Merge pull request #2990 from vector-im/rav/postcss-webpack-loader

Use the postcss-webpack-loader

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",

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,
+};

postcss.config.json

@@ -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
-}

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