Skip to content

Less and css build #11822

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
lokesh wants to merge 4 commits into
base: master
Choose a base branch
from
+55 −27
Draft

Less and css build #11822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
134e295
Enhance webpack configuration to support both .less and .css files fo…
lokesh Feb 5, 2026
557fb1a
Refactor link-box component: replace .less imports with inline .css i…
lokesh Feb 5, 2026
7846f6f
Remove migration comment from link-box CSS file after transitioning f…
lokesh Feb 5, 2026
0c6475e
Add CSS Custom Properties for caching in head.html and remove migrati…
lokesh Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions openlibrary/templates/site/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@
<link href="/static/images/openlibrary-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="/static/images/openlibrary-192x192.png" rel="icon" sizes="192x192" />
<link href="/static/images/openlibrary-128x128.png" rel="icon" sizes="128x128" />
$# CSS Custom Properties (design tokens) - loaded separately for caching
<link href="$static_url('css/less/generated-custom-properties.css')" rel="stylesheet" type="text/css" />
$ style = 'build/css/page-%s.css'%ctx.get('cssfile', 'user')
<link href="$static_url(style)" rel="stylesheet" type="text/css" />

Expand Down
23 changes: 23 additions & 0 deletions static/css/components/link-box.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/**
* Link Box
* https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#linkbox
*/

.link-box {
font-size: var(--font-size-body-medium);
white-space: normal;
word-wrap: break-word;
}

.link-box h3 {
color: var(--grey);
margin: 0;
padding: 0;
text-transform: uppercase;
display: inline;
font-size: var(--font-size-label-medium);
}

.link-box.link-box--with-header h3 {
display: block;
}
22 changes: 0 additions & 22 deletions static/css/components/link-box.less
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion static/css/components/work.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ a.section-anchor {
}

@import (less) "components/readerStats.less";
@import (less) "components/link-box.less";
@import (inline) "components/link-box.css";

// Right (editionTools)
div.editionTools {
Expand Down
2 changes: 1 addition & 1 deletion static/css/legacy.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -761,7 +761,7 @@ div.verify {
/* LANGUAGE DROPDOWN */
@import (less) "components/language.less";

@import (less) "components/link-box.less";
@import (inline) "components/link-box.css";

// Various templates
.content {
Expand Down
2 changes: 1 addition & 1 deletion static/css/page-subject.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
@import (less) "components/page-heading-search-box.less";
@import (less) "components/carousel.less";
@import (less) "components/chart.less";
@import (less) "components/link-box.less";
@import (inline) "components/link-box.css";
@import (less) "components/widget-box.less";
@import (less) "components/listLists.less";
@import (less) "components/footer.less";
Expand Down
29 changes: 27 additions & 2 deletions webpack.config.css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,32 @@
/* eslint-env node, es6 */
/*
* Webpack config for compiling Less files to independent CSS files in static/build/
* Webpack config for compiling Less and CSS files to independent CSS files in static/build/
* Supports both .less and .css entry points for gradual migration from LESS to native CSS.
*/
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const LessPluginCleanCss = require('less-plugin-clean-css');
const distDir = path.resolve(__dirname, process.env.BUILD_DIR || 'static/build/css');

// Find all Less files matching static/css/page-*.less
// Find all entry files matching static/css/page-*.less or static/css/page-*.css
const lessFiles = glob.sync('./static/css/page-*.less');
const cssFiles = glob.sync('./static/css/page-*.css');
const entries = {};

lessFiles.forEach(file => {
// e.g. page-home.less -> page-home
const name = path.basename(file, '.less');
entries[name] = file;
});

cssFiles.forEach(file => {
// e.g. page-home.css -> page-home
// CSS files take precedence if both .less and .css exist (migration complete)
const name = path.basename(file, '.css');
entries[name] = file;
});

module.exports = {
context: __dirname,
entry: entries,
Expand All @@ -28,6 +38,7 @@ module.exports = {
},
module: {
rules: [
// Rule for .less files (legacy, to be removed after migration)
{
test: /\.less$/,
use: [
Expand Down Expand Up @@ -55,6 +66,20 @@ module.exports = {
}
}
]
},
// Rule for .css files (native CSS)
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false,
import: true // Enable @import resolution
}
}
]
}
]
},
Expand Down