Skip to content
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

Using Webpack to generate our JavaScript loaded CSS #2003

Merged
merged 2 commits into from
Mar 31, 2019
Merged

Using Webpack to generate our JavaScript loaded CSS #2003

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d5d3468
Load JS-only styles via Webpack
jdlrobson Mar 23, 2019
b9e44b8
Creates lessc Makefile function to DRY up Less commands
shaneriley Feb 13, 2019
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
21 changes: 8 additions & 13 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ SOLR_VERSION=apache-solr-1.4.0
ACCESS_LOG_FORMAT='%(h)s %(l)s %(u)s %(t)s "%(r)s" %(s)s %(b)s "%(f)s"'
GITHUB_EDITOR_WIDTH=127

define lessc
echo Compressing page-$(1).less; \
lessc -x static/css/$(1).less $(BUILD)/$(1).css
endef

# Use python from local env if it exists or else default to python in the path.
PYTHON=$(if $(wildcard env),env/bin/python,python)

Expand All @@ -20,19 +25,9 @@ all: git css js i18n

css:
mkdir -p $(BUILD)
lessc -x static/css/page-admin.less $(BUILD)/page-admin.css
lessc -x static/css/page-book.less $(BUILD)/page-book.css
lessc -x static/css/page-edit.less $(BUILD)/page-edit.css
lessc -x static/css/page-form.less $(BUILD)/page-form.css
lessc -x static/css/page-home.less $(BUILD)/page-home.css
lessc -x static/css/page-lists.less $(BUILD)/page-lists.css
lessc -x static/css/page-plain.less $(BUILD)/page-plain.css
lessc -x static/css/page-subject.less $(BUILD)/page-subject.css
lessc -x static/css/page-user.less $(BUILD)/page-user.css
lessc -x static/css/js-all.less $(BUILD)/js-all.css
lessc -x static/css/page-book-widget.less $(BUILD)/page-book-widget.css
lessc -x static/css/page-design.less $(BUILD)/page-design.css
lessc -x static/css/page-dev.less $(BUILD)/page-dev.css
for asset in admin book edit form home lists plain subject user book-widget design dev; do \
$(call lessc,page-$$asset); \
done

js:
mkdir -p $(BUILD)
Expand Down
3 changes: 1 addition & 2 deletions openlibrary/plugins/openlibrary/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { getAvailabilityV2,
updateBookAvailability, updateWorkAvailability } from './availability';
import bookReaderInit from './bookreader_direct';
import Carousel from './carousels';
import loadStyle from './loadStyle';
import { ungettext, ugettext, sprintf } from './i18n';
import { addFadeInFunctionsTojQuery } from './jquery.others';
import jQueryRepeat from './jquery.repeat';
Expand All @@ -25,6 +24,7 @@ import Template from './template.js';
// Add $.fn.toggleText, $.fn.focusNextInputField, $.fn.ol_confirm_dialog, $.fn.tap, $.log
import { closePopup, initShowPasswords, truncate, cond } from './utils';
import initValidate from './validate';
import '../../../../static/css/js-all.less';

// Eventually we will export all these to a single global ol, but in the mean time
// we add them to the window object for backwards compatibility.
Expand All @@ -39,7 +39,6 @@ window.getAvailabilityV2 = getAvailabilityV2;
window.isScrolledIntoView = isScrolledIntoView;
window.htmlquote = htmlquote;
window.len = len;
window.loadStyle = loadStyle;
window.plot_tooltip_graph = plot_tooltip_graph;
window.plot_minigraph = plot_minigraph;
window.range = range;
Expand Down
16 changes: 0 additions & 16 deletions openlibrary/plugins/openlibrary/js/loadStyle.js
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions openlibrary/templates/site/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,6 @@
<!-- Both v2 and v1 pages have a JavaScript execution queue that will
be emptied at the bottom of the page -->
<script type="text/javascript">window.q = [];</script>
$ styleJS = static_url('build/js-all.css');
$# Load CSS via JavaScript later to speed up first paint
<script>window.q.push(function () {
loadStyle("$styleJS");
});</script>
$if "dev" in ctx.features:
<link href="$static_url('build/page-dev.css')" rel="stylesheet" type="text/css"/>

Expand Down
5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
},
{
"path": "static/build/all.js",
"maxSize": "25.7KB"
"maxSize": "34.7KB"
},
{
"path": "static/build/page-admin.css",
Expand Down Expand Up @@ -61,14 +61,17 @@
"@babel/register": "7.0.0",
"babel-loader": "8.0.5",
"bundlesize": "^0.17.0",
"css-loader": "2.1.1",
"detect-libc": "^1.0.3",
"eslint": "^5.7.0",
"jest": "^24.5.0",
"less": "^3.8.1",
"less-loader": "4.1.0",
"node-gyp": "^3.8.0",
"prebuild-install": "^5.2.1",
"stylelint": "^9.5.0",
"stylelint-declaration-use-variable": "^1.7.0",
"style-loader": "0.23.1",
"svgo": "1.1.1",
"webpack": "4.27.1",
"webpack-cli": "3.1.2"
Expand Down
7 changes: 7 additions & 0 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,13 @@ module.exports = {
cacheDirectory: true
}
}
}, {
test: /\.less$/,
loader: [
'style-loader',
'css-loader',
'less-loader' // compiles Less to CSS
]
} ]
},
optimization: {
Expand Down