mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-04 02:02:14 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Use the postcss-webpack-loader
This commit is contained in:
Richard van der Hoff 2017-01-19 03:01:53 +00:00 committed by GitHub
commit 971314d75a
4 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package.json
View File

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

13
postcss.config.js Normal file
View File

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

15
postcss.config.json
View File

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

26
webpack.config.js
View File

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