Commit 9ae71104 authored by JC Brand's avatar JC Brand

webpack: split css out into separate file

- Add postcss with autoprefixer and cleancss
parent 93de11d1
...@@ -154,27 +154,18 @@ logo/conversejs-filled%.png:: logo/conversejs-filled.svg ...@@ -154,27 +154,18 @@ logo/conversejs-filled%.png:: logo/conversejs-filled.svg
$(INKSCAPE) -e $@ -w $* $< $(INKSCAPE) -e $@ -w $* $<
$(OXIPNG) $@ $(OXIPNG) $@
BUILDS = dist/converse.js \ BUILDS = src/headless/dist/converse-headless.js \
dist/converse.min.js \
src/headless/dist/converse-headless.js \
src/headless/dist/converse-headless.min.js \ src/headless/dist/converse-headless.min.js \
dist/converse-no-dependencies.min.js \
dist/converse-no-dependencies.js \ dist/converse-no-dependencies.js \
dist/converse-no-dependencies-es2015.js dist/converse-no-dependencies-es2015.js
dist/converse.js: src webpack.config.js stamp-npm @converse/headless src/headless/dist/converse-headless.js: src webpack.common.js stamp-npm @converse/headless
npm run converse.js
dist/converse.min.js: src webpack.config.js stamp-npm @converse/headless
npm run converse.min.js
src/headless/dist/converse-headless.js: src webpack.config.js stamp-npm @converse/headless
npm run converse-headless.js npm run converse-headless.js
src/headless/dist/converse-headless.min.js: src webpack.config.js stamp-npm @converse/headless src/headless/dist/converse-headless.min.js: src webpack.common.js stamp-npm @converse/headless
npm run converse-headless.min.js npm run converse-headless.min.js
dist/converse-no-dependencies.js: src webpack.config.js stamp-npm @converse/headless dist/converse-no-dependencies.js: src webpack.common.js stamp-npm @converse/headless
$(NPX) webpack --mode=development --type=nodeps $(NPX) webpack --mode=development --type=nodeps
dist/converse-no-dependencies.min.js: src webpack.config.js stamp-npm @converse/headless dist/converse-no-dependencies-es2015.js: src webpack.common.js stamp-npm @converse/headless
$(NPX) webpack --mode=production --type=nodeps
dist/converse-no-dependencies-es2015.js: src webpack.config.js stamp-npm @converse/headless
$(NPX) webpack --mode=development --type=nodeps --lang=es2015 $(NPX) webpack --mode=development --type=nodeps --lang=es2015
@converse/headless: src/headless @converse/headless: src/headless
...@@ -183,7 +174,8 @@ dist/converse-no-dependencies-es2015.js: src webpack.config.js stamp-npm @conver ...@@ -183,7 +174,8 @@ dist/converse-no-dependencies-es2015.js: src webpack.config.js stamp-npm @conver
dist:: build dist:: build
.PHONY: build .PHONY: build
build:: stamp-npm css $(BUILDS) build:: stamp-npm css
npm run build
######################################################################## ########################################################################
## Tests ## Tests
...@@ -197,7 +189,7 @@ eslint: stamp-npm ...@@ -197,7 +189,7 @@ eslint: stamp-npm
$(ESLINT) spec/ $(ESLINT) spec/
.PHONY: check .PHONY: check
check: eslint dist/converse.js check: eslint build
LOG_CR_VERBOSITY=INFO $(CHROMIUM) --disable-gpu --no-sandbox http://localhost:$(HTTPSERVE_PORT)/tests/index.html LOG_CR_VERBOSITY=INFO $(CHROMIUM) --disable-gpu --no-sandbox http://localhost:$(HTTPSERVE_PORT)/tests/index.html
######################################################################## ########################################################################
......
...@@ -2779,6 +2779,34 @@ ...@@ -2779,6 +2779,34 @@
"integrity": "sha1-D+9a1G8b16hQLGVyfwNn1e5D1pY=", "integrity": "sha1-D+9a1G8b16hQLGVyfwNn1e5D1pY=",
"dev": true "dev": true
}, },
"autoprefixer": {
"version": "9.6.1",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.1.tgz",
"integrity": "sha512-aVo5WxR3VyvyJxcJC3h4FKfwCQvQWb1tSI5VHNibddCVWrcD1NvlxEweg3TSgiPztMnWfjpy2FURKA2kvDE+Tw==",
"dev": true,
"requires": {
"browserslist": "^4.6.3",
"caniuse-lite": "^1.0.30000980",
"chalk": "^2.4.2",
"normalize-range": "^0.1.2",
"num2fraction": "^1.2.2",
"postcss": "^7.0.17",
"postcss-value-parser": "^4.0.0"
},
"dependencies": {
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
}
}
}
},
"aws-sign2": { "aws-sign2": {
"version": "0.7.0", "version": "0.7.0",
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
...@@ -7566,6 +7594,15 @@ ...@@ -7566,6 +7594,15 @@
"minimatch": "^3.0.4" "minimatch": "^3.0.4"
} }
}, },
"import-cwd": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
"integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
"dev": true,
"requires": {
"import-from": "^2.1.0"
}
},
"import-fresh": { "import-fresh": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
...@@ -7584,6 +7621,23 @@ ...@@ -7584,6 +7621,23 @@
} }
} }
}, },
"import-from": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
"integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
"dev": true,
"requires": {
"resolve-from": "^3.0.0"
},
"dependencies": {
"resolve-from": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
"dev": true
}
}
},
"import-local": { "import-local": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz", "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
...@@ -9620,6 +9674,12 @@ ...@@ -9620,6 +9674,12 @@
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true "dev": true
}, },
"normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
"dev": true
},
"normalize-url": { "normalize-url": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
...@@ -12811,6 +12871,12 @@ ...@@ -12811,6 +12871,12 @@
"boolbase": "~1.0.0" "boolbase": "~1.0.0"
} }
}, },
"num2fraction": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
"dev": true
},
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
...@@ -13602,6 +13668,77 @@ ...@@ -13602,6 +13668,77 @@
} }
} }
}, },
"postcss-clean": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/postcss-clean/-/postcss-clean-1.1.0.tgz",
"integrity": "sha512-83g3GqMbCM5NL6MlbbPLJ/m2NrUepBF44MoDk4Gt04QGXeXKh9+ilQa0DzLnYnvqYHQCw83nckuEzBFr2muwbg==",
"dev": true,
"requires": {
"clean-css": "^4.x",
"postcss": "^6.x"
},
"dependencies": {
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
}
},
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"postcss-load-config": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
"integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
"dev": true,
"requires": {
"cosmiconfig": "^5.0.0",
"import-cwd": "^2.0.0"
}
},
"postcss-loader": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz",
"integrity": "sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==",
"dev": true,
"requires": {
"loader-utils": "^1.1.0",
"postcss": "^7.0.0",
"postcss-load-config": "^2.0.0",
"schema-utils": "^1.0.0"
}
},
"postcss-modules-extract-imports": { "postcss-modules-extract-imports": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
......
...@@ -17,6 +17,8 @@ ...@@ -17,6 +17,8 @@
"scripts": { "scripts": {
"start": "webpack-dev-server --config webpack.dev.js", "start": "webpack-dev-server --config webpack.dev.js",
"clean": "rm -rf node_modules stamp-npm dist *.zip", "clean": "rm -rf node_modules stamp-npm dist *.zip",
"converse-headless.js": "webpack --mode=development --type=headless",
"converse-headless.min.js": "npm run converse-headless.js && webpack --mode=production --type=headless",
"build": "webpack --config webpack.prod.js", "build": "webpack --config webpack.prod.js",
"lerna": "lerna bootstrap --hoist --ignore-scripts", "lerna": "lerna bootstrap --hoist --ignore-scripts",
"prepare": "npm run lerna && npm run build" "prepare": "npm run lerna && npm run build"
...@@ -50,6 +52,7 @@ ...@@ -50,6 +52,7 @@
"@babel/preset-env": "^7.5.4", "@babel/preset-env": "^7.5.4",
"@converse/headless": "file:src/headless", "@converse/headless": "file:src/headless",
"@fortawesome/fontawesome-free": "5.9.0", "@fortawesome/fontawesome-free": "5.9.0",
"autoprefixer": "^9.6.1",
"babel-eslint": "^10.0.2", "babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-syntax-dynamic-import": "^6.18.0",
...@@ -84,6 +87,8 @@ ...@@ -84,6 +87,8 @@
"npm": "^6.4.1", "npm": "^6.4.1",
"po-loader": "^0.5.0", "po-loader": "^0.5.0",
"po2json": "^1.0.0-alpha", "po2json": "^1.0.0-alpha",
"postcss-clean": "^1.1.0",
"postcss-loader": "^3.0.0",
"prettierx": "^0.6.0", "prettierx": "^0.6.0",
"requirejs": "2.3.6", "requirejs": "2.3.6",
"run-headless-chromium": "^0.1.1", "run-headless-chromium": "^0.1.1",
......
/* global module */
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-clean')
]
}
/* global __dirname, module, process */
const HTMLWebpackPlugin = require('html-webpack-plugin'); const HTMLWebpackPlugin = require('html-webpack-plugin');
const minimist = require('minimist'); const minimist = require('minimist');
const path = require('path'); const path = require('path');
...@@ -8,12 +9,6 @@ const config = { ...@@ -8,12 +9,6 @@ const config = {
externals: [{ externals: [{
"window": "window" "window": "window"
}], }],
plugins: [
new HTMLWebpackPlugin({
title: 'Production',
template: 'webpack.html'
})
],
module: { module: {
rules: [ rules: [
{ {
......
/* global module */
const merge = require("webpack-merge"); const merge = require("webpack-merge");
const common = require("./webpack.common.js"); const common = require("./webpack.common.js");
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, { module.exports = merge(common, {
mode: "development", mode: "development",
devtool: "inline-source-map", devtool: "inline-source-map",
devServer: { devServer: {
contentBase: "./dist" contentBase: "./dist"
} },
plugins: [
new HTMLWebpackPlugin({
title: 'Production',
template: 'webpack.html'
})
],
}); });
/* global __dirname, module */
const common = require("./webpack.common.js"); const common = require("./webpack.common.js");
const merge = require("webpack-merge"); const merge = require("webpack-merge");
const path = require('path'); const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = merge(common, { module.exports = merge(common, {
output: { output: {
...@@ -9,7 +11,32 @@ module.exports = merge(common, { ...@@ -9,7 +11,32 @@ module.exports = merge(common, {
filename: 'converse.js', filename: 'converse.js',
chunkFilename: '[name].js' chunkFilename: '[name].js'
}, },
plugins: [
new MiniCssExtractPlugin({filename: '../dist/converse.css'})
],
mode: "production", mode: "production",
devtool: "source-map", devtool: "source-map",
module: {
rules: [{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {sourceMap: true}
},
'postcss-loader',
{
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(__dirname, 'node_modules/')
],
sourceMap: true
}
}
]
}]
}
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment