From c3fa6ff8053f047d6d8dd8270dbb243abed5d587 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 19 Jan 2017 02:48:17 +0000 Subject: [PATCH] Use the postcss-webpack-loader Use postcss-webpack-loader instead of webpack-cli to process the scss. Doing so mostly means that we avoid the problem that webpack-dev-server fails to start if we haven't already built the CSS. (It also simplifies package.json somewhat, which is no bad thing) --- package.json | 14 ++++++-------- postcss.config.js | 13 +++++++++++++ postcss.config.json | 15 --------------- webpack.config.js | 26 +++++++++++++++++++++----- 4 files changed, 40 insertions(+), 28 deletions(-) create mode 100644 postcss.config.js delete mode 100644 postcss.config.json diff --git a/package.json b/package.json index 722e0cf095..84e0547890 100644 --- a/package.json +++ b/package.json @@ -29,21 +29,19 @@ "reskindex": "reskindex -h src/header", "build:res": "node scripts/copy-res.js", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", - "build:css": "mkdirp build && postcss -c postcss.config.json", "build:compile": "babel --source-maps -d lib src", "build:bundle": "NODE_ENV=production webpack -p --progress", "build:bundle:dev": "webpack --optimize-occurence-order --progress", "build:electron": "npm run clean && npm run build && build -wml --ia32 --x64", - "build": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle", - "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle:dev", + "build": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle", + "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle:dev", "dist": "scripts/package.sh", "start:res": "node scripts/copy-res.js -w", "start:js": "webpack-dev-server -w --progress", "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress", - "start:css": "mkdirp build && postcss -c postcss.config.json -w", - "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\" \"npm run start:css\"", - "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"", - "clean": "rimraf build lib webapp electron/dist", + "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"", + "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"", + "clean": "rimraf lib webapp electron/dist", "prepublish": "npm run build:compile", "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false", "test:multi": "karma start" @@ -114,9 +112,9 @@ "mocha": "^2.4.5", "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", - "postcss-cli": "^2.6.0", "postcss-extend": "^1.0.5", "postcss-import": "^9.0.0", + "postcss-loader": "^1.2.2", "postcss-mixins": "^5.4.1", "postcss-nested": "^1.0.0", "postcss-scss": "^0.4.0", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000000..5305d9ed9e --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,13 @@ +module.exports = { + plugins: [ + require("postcss-import")(), + require("autoprefixer")(), + require("postcss-simple-vars")(), + require("postcss-extend")(), + require("postcss-nested")(), + require("postcss-mixins")(), + require("postcss-strip-inline-comments")(), + ], + "parser": "postcss-scss", + "local-plugins": true, +}; diff --git a/postcss.config.json b/postcss.config.json deleted file mode 100644 index 7ed32cdac1..0000000000 --- a/postcss.config.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "use": [ - "postcss-import", - "autoprefixer", - "postcss-simple-vars", - "postcss-extend", - "postcss-nested", - "postcss-mixins", - "postcss-strip-inline-comments" - ], - "parser": "postcss-scss", - "input": "src/skins/vector/css/themes/[^_]*.scss", - "dir": "build", - "local-plugins": true -} diff --git a/webpack.config.js b/webpack.config.js index 3a70196596..136e0af754 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -17,8 +17,8 @@ module.exports = { "olm": "./src/vector/olm-loader.js", // CSS themes - "theme-light": "./build/light.scss", - "theme-dark": "./build/dark.scss", + "theme-light": "./src/skins/vector/css/themes/light.scss", + "theme-dark": "./src/skins/vector/css/themes/dark.scss" }, module: { preLoaders: [ @@ -27,9 +27,25 @@ module.exports = { loaders: [ { test: /\.json$/, loader: "json" }, { test: /\.js$/, loader: "babel", include: path.resolve('./src') }, - // css-raw-loader loads CSS but doesn't try to treat url()s as require()s - // we're assuming that postcss has already preprocessed SCSS by this point - { test: /\.s?css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, + { + test: /\.scss$/, + + // 1. postcss-loader turns the SCSS into normal CSS. + // 2. css-raw-loader turns the CSS into a javascript module + // whose default export is a string containing the CSS. + // (css-raw-loader is similar to css-loader, but the latter + // would also drag in the imgs and fonts that our CSS refers to + // as webpack inputs.) + // 3. ExtractTextPlugin turns that string into a separate asset. + loader: ExtractTextPlugin.extract( + "css-raw-loader!postcss-loader?config=postcss.config.js" + ), + }, + { + // this works similarly to the scss case, without postcss. + test: /\.css$/, + loader: ExtractTextPlugin.extract("css-raw-loader"), + }, ], noParse: [ // don't parse the languages within highlight.js. They cause stack