diff --git a/lib/make-postcss.js b/lib/make-postcss.js index 7538e0c..6ba3f06 100644 --- a/lib/make-postcss.js +++ b/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 = { diff --git a/test/run b/test/run index fe8650e..476f5fb 100755 --- a/test/run +++ b/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" diff --git a/test/test_cssnext/.browserslistrc b/test/test_cssnext/.browserslistrc new file mode 100644 index 0000000..755f8b8 --- /dev/null +++ b/test/test_cssnext/.browserslistrc @@ -0,0 +1 @@ +IE 10 diff --git a/test/test_cssnext/expected.css b/test/test_cssnext/expected.css new file mode 100644 index 0000000..0a95fa7 --- /dev/null +++ b/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; +} diff --git a/test/test_cssnext/faucet.config.js b/test/test_cssnext/faucet.config.js new file mode 100644 index 0000000..2295fca --- /dev/null +++ b/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" + } + } +}; diff --git a/test/test_cssnext/src/index.css b/test/test_cssnext/src/index.css new file mode 100644 index 0000000..71535b2 --- /dev/null +++ b/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; +}