Move generate_css_js_files to use cssnano

Bug: 1399763
Change-Id: I96964df8eb6c8979d5f208aa442687c439acaa7b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4092364
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>

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);
 

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));
   });
 });