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

Author: moonglum

lib/make-postcss.js

@@ -1,16 +1,28 @@
+let path = require("path");
 let postcss = require("postcss");
 let atImport = require("postcss-import");
-let { promisify } = require("faucet-pipeline-core/lib/util");
+let postcssPresetEnv = require("postcss-preset-env");
+let { repr, promisify } = require("faucet-pipeline-core/lib/util");
 let readFile = promisify(require("fs").readFile);
 
 module.exports = function(input, target, assetManager, sourcemaps, browsers) {
-	// if(browsers && browsers.length > 0) {
-	// let filepath = path.relative(assetManager.referenceDir, input);
-	// console.error(`compiling CSS ${repr(filepath)} for ${browsers.join(", ")}`);
-
-	let processor = postcss([
+	let plugins = [
 		atImport()
-	]);
+	];
+
+	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 = {
 		from: input,

package.json

@@ -21,7 +21,8 @@
 	"dependencies": {
 		"faucet-pipeline-core": "^1.0.0",
 		"postcss": "~7.0.3",
-		"postcss-import": "^12.0.0"
+		"postcss-import": "^12.0.0",
+		"postcss-preset-env": "^6.0.7"
 	},
 	"devDependencies": {
 		"eslint-config-fnd": "^1.6.0",

test/run

@@ -29,4 +29,9 @@ begin "$root/test_sourcemap"
 	assert_identical_sourcemap "./dist/bundle.css" "./expected.css" "./expected.css.map"
 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;
+}