diff --git a/scripts/build/generate_css_js_files.js b/scripts/build/generate_css_js_files.js index f87f6d595f..69b2fd7031 100644 --- a/scripts/build/generate_css_js_files.js +++ b/scripts/build/generate_css_js_files.js @@ -3,16 +3,22 @@ // found in the LICENSE file. const fs = require('fs'); const path = require('path'); -const CleanCSS = require('clean-css'); const {writeIfChanged} = require('./ninja/write-if-changed.js'); +const postcss = require('postcss'); +const cssnano = require('cssnano'); -const cleanCSS = new CleanCSS(); +async function runCSSMinification(input, fileName) { + // postcss needs to be given a fileName, even though it doesn't read from it nor write to it. + // So we pass in the correct name, even though it has no impact on the resulting code. + const result = await postcss([cssnano({preset: 'default'})]).process(input, {from: fileName}); + return result.css; +} -function codeForFile({fileName, input, isDebug, isLegacy = false, buildTimestamp}) { +async function codeForFile({fileName, input, isDebug, isLegacy = false, buildTimestamp}) { input = input.replace(/\`/g, '\\\''); input = input.replace(/\\/g, '\\\\'); - const stylesheetContents = isDebug ? input : cleanCSS.minify(input).styles; + const stylesheetContents = isDebug ? input : await runCSSMinification(input, fileName); let exportStatement; if (isLegacy) { @@ -42,7 +48,7 @@ ${exportStatement} // Exported only so it can be unit tested. exports.codeForFile = codeForFile; -function runMain() { +async function runMain() { const [, , buildTimestamp, isDebugString, legacyString, targetName, srcDir, targetGenDir, files] = process.argv; const filenames = files.split(','); @@ -52,7 +58,7 @@ function runMain() { for (const fileName of filenames) { const contents = fs.readFileSync(path.join(srcDir, fileName), {encoding: 'utf8', flag: 'r'}); - const newContents = codeForFile({fileName, isDebug, input: contents, isLegacy, buildTimestamp}); + const newContents = await codeForFile({fileName, isDebug, input: contents, isLegacy, buildTimestamp}); const generatedFileName = `${fileName}${isLegacy ? '.legacy' : ''}.js`; const generatedFileLocation = path.join(targetGenDir, generatedFileName); diff --git a/scripts/build/tests/generate_css_js_files_test.js b/scripts/build/tests/generate_css_js_files_test.js index c56fe92273..6bf6500f46 100644 --- a/scripts/build/tests/generate_css_js_files_test.js +++ b/scripts/build/tests/generate_css_js_files_test.js @@ -6,48 +6,36 @@ const {assert} = require('chai'); const {codeForFile} = require('../generate_css_js_files.js'); describe('generating CSS JS files', () => { - it('minifies code when not in debug mode', () => { + it('minifies code when not in debug mode', async () => { const css = `div { height: 20px; }`; - const contents = - codeForFile({fileName: 'app.css', isDebug: false, input: css, isLegacy: false, buildTimestamp: Date.now()}); + const contents = await codeForFile( + {fileName: 'app.css', isDebug: false, input: css, isLegacy: false, buildTimestamp: Date.now()}); assert.isTrue(contents.includes('div{height:20px}')); }); - it('respects clean-css ignore comments', () => { + it('supports container queries', async () => { const css = ` - /* clean-css ignore:start */ - div { - height: 20px; - } - /* clean-css ignore:end */ - otherDiv { - width: 20px; - }`; - const contents = - codeForFile({fileName: 'app.css', isDebug: false, input: css, isLegacy: false, buildTimestamp: Date.now()}); - assert.isTrue(contents.includes(`div { - height: 20px; - }`)); - }); - - it('does not strip container queries wrapped in clean-css ignore', () => { - const css = ` - /* clean-css ignore:start */ @container (width<1024px) { .test { color: #fff; } - } - /* clean-css ignore:end */ - `; - const contents = - codeForFile({fileName: 'app.css', isDebug: false, input: css, isLegacy: false, buildTimestamp: Date.now()}); - assert.isTrue(contents.includes(`@container (width<1024px) { + }`; + const contents = await codeForFile( + {fileName: 'app.css', isDebug: false, input: css, isLegacy: false, buildTimestamp: Date.now()}); + assert.isTrue(contents.includes('@container (width<1024px){.test{color:#fff}}')); + }); + + it('does not minify when debug mode is on', async () => { + const css = ` + @container (width<1024px) { .test { color: #fff; } - }`)); + }`; + const contents = await codeForFile( + {fileName: 'app.css', isDebug: true, input: css, isLegacy: false, buildTimestamp: Date.now()}); + assert.isTrue(contents.includes(css)); }); });