CSS Next Support and Prefixing via postcss-preset-env #1

Author: moonglum

lib/make-postcss.js

@@ -1,7 +1,9 @@
+let path = require("path");
 let postcss = require("postcss");
 let atImport = require("postcss-import");
+let postcssPresetEnv = require("postcss-preset-env");
 let assetURL = require("./asset-url");
-let { promisify } = require("faucet-pipeline-core/lib/util");
+let { repr, promisify } = require("faucet-pipeline-core/lib/util");
 let readFile = promisify(require("fs").readFile);
 
 module.exports = function(input, target, assetManager, sourcemaps, browsers, compact) {
@@ -17,6 +19,18 @@ module.exports = function(input, target, assetManager, sourcemaps, browsers, com
 		);
 	}
 
+	if(browsers && browsers.length > 0) {
+		let filepath = path.relative(assetManager.referenceDir, input);
+		console.error(`compiling CSS ${repr(filepath)} for ${browsers.join(", ")}`);
+		plugins.push(postcssPresetEnv({
+			stage: 2, // maybe a little too unstable?
+			browsers: browsers,
+			autoprefixer: {
+				cascade: false // this disables weird indentation
+			}
+		}));
+	}
+
 	let processor = postcss(plugins);
 
 	let options = {

package.json

@@ -24,11 +24,12 @@
 		"postcss-discard-comments": "~5.0.1",
 		"postcss-import": "~14.0.2",
 		"postcss-message-helpers": "~2.0.0",
-		"postcss-normalize-whitespace": "~5.0.1"
+		"postcss-normalize-whitespace": "~5.0.1",
+		"postcss-preset-env": "^6.0.7"
 	},
 	"devDependencies": {
 		"eslint-config-fnd": "^1.6.0",
-		"eslint-plugin-import": "^2.13.0",
+		"eslint-plugin-import": "^2.15.0",
 		"faucet-pipeline-static": "^1.0.0",
 		"json-diff": "^0.7.1",
 		"npm-run-all": "^4.1.5",

test/run

@@ -39,4 +39,9 @@ begin "$root/test_static_integration"
 	assert_identical "./dist/bundle.css" "./expected.css"
 end
 
+begin "$root/test_cssnext"
+	faucet
+	assert_identical "./dist/bundle.css" "./expected.css"
+end
+
 echo; echo "SUCCESS: all tests passed"

test/test_cssnext/.browserslistrc

@@ -0,0 +1 @@
+IE 10

test/test_cssnext/expected.css

@@ -0,0 +1,11 @@
+:root {
+	--fontSize: 1rem;
+}
+
+body {
+	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
+	font-size: 1rem;
+	font-size: var(--fontSize);
+	-ms-user-select: none;
+	user-select: none;
+}

test/test_cssnext/faucet.config.js

@@ -0,0 +1,15 @@
+"use strict";
+let path = require("path");
+
+module.exports = {
+	css: [{
+		source: "./src/index.css",
+		target: "./dist/bundle.css"
+	}],
+	plugins: {
+		css: {
+			plugin: path.resolve("../.."),
+			bucket: "styles"
+		}
+	}
+};

test/test_cssnext/src/index.css

@@ -0,0 +1,9 @@
+:root {
+	--fontSize: 1rem;
+}
+
+body {
+	font-family: system-ui;
+	font-size: var(--fontSize);
+	user-select: none;
+}