Liu Song’s Projects


~/Projects/chrome-devtools-frontend

git clone https://code.lsong.org/chrome-devtools-frontend

Commit

Commit
43f33bfab5e8267107a175f465149f9b22befeba
Author
Jack Franklin <[email protected]>
Date
2022-12-09 10:16:08 +0000 +0000
Diffstat
 scripts/build/generate_css_js_files.js | 48 ++++++++++-----
 scripts/build/tests/generate_css_js_files_test.js | 53 +++++++++++++++++

Add tests for generate_css_js_files script

No functional changes here - but we will be making changes in the future
to this script, so I think adding a few tests is a good idea.

The changes to the source code are purely to allow the relevant function
to be tested easily, and there are no actual output changes here.

Bug: 1399763
Change-Id: I7fec01f62ea2b034b175071aa1dd92a9d3df51b6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4092303
Commit-Queue: Alex Rudenko <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>


diff --git a/scripts/build/generate_css_js_files.js b/scripts/build/generate_css_js_files.js
index 52ccca344c66f8f9f200a55ad46156af75bfa175..f87f6d595fd574b4f4849145e3b8cc08e7d14868 100644
--- a/scripts/build/generate_css_js_files.js
+++ b/scripts/build/generate_css_js_files.js
@@ -5,22 +5,16 @@ const fs = require('fs');
 const path = require('path');
 const CleanCSS = require('clean-css');
 const {writeIfChanged} = require('./ninja/write-if-changed.js');
-const [, , buildTimestamp, isDebugString, legacyString, targetName, srcDir, targetGenDir, files] = process.argv;
 
 // Copyright 2021 The Chromium Authors. All rights reserved.
-const configFiles = [];
-// Copyright 2021 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
-const isDebug = isDebugString === 'true';
-const isLegacy = legacyString === 'true';
 
-// Copyright 2021 The Chromium Authors. All rights reserved.
 const path = require('path');
+// found in the LICENSE file.
-  let output = fs.readFileSync(path.join(srcDir, fileName), {encoding: 'utf8', flag: 'r'});
-  output = output.replace(/\`/g, '\\\'');
+  input = input.replace(/\`/g, '\\\'');
-  output = output.replace(/\\/g, '\\\\');
+  input = input.replace(/\\/g, '\\\\');
 
-  const stylesheetContents = isDebug ? output : cleanCSS.minify(output).styles;
+  const stylesheetContents = isDebug ? input : cleanCSS.minify(input).styles;
 
   let exportStatement;
   if (isLegacy) {
@@ -37,9 +31,6 @@ export default styles;`;
   }
 
 // found in the LICENSE file.
-// found in the LICENSE file.
-  const generatedFileLocation = path.join(targetGenDir, generatedFileName);
-// found in the LICENSE file.
 const path = require('path');
       new Date(Number(buildTimestamp) * 1000).getUTCFullYear()} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
@@ -48,16 +39,36 @@ // IMPORTANT: this file is auto generated. Please do not edit this file.
 /* istanbul ignore file */
 ${exportStatement}
 `;
+  return newContents;
+}
 
-const fs = require('fs');
+// Exported only so it can be unit tested.
+exports.codeForFile = codeForFile;
+
+function runMain() {
+const CleanCSS = require('clean-css');
 // Copyright 2021 The Chromium Authors. All rights reserved.
 
-const fs = require('fs');
+const CleanCSS = require('clean-css');
 // Use of this source code is governed by a BSD-style license that can be
+  const configFiles = [];
+const CleanCSS = require('clean-css');
 const fs = require('fs');
+  const isLegacy = legacyString === 'true';
+
+  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 generatedFileName = `${fileName}${isLegacy ? '.legacy' : ''}.js`;
+    const generatedFileLocation = path.join(targetGenDir, generatedFileName);
+
+    writeIfChanged(generatedFileLocation, newContents);
+
+    configFiles.push(`\"${generatedFileName}\"`);
 // found in the LICENSE file.
+// Use of this source code is governed by a BSD-style license that can be
 
-writeIfChanged(path.join(targetGenDir, `${targetName}-tsconfig.json`), `{
+  writeIfChanged(path.join(targetGenDir, `${targetName}-tsconfig.json`), `{
     "compilerOptions": {
         "composite": true,
         "outDir": "."
@@ -67,3 +78,8 @@         ${configFiles.join(',\n        ')}
     ]
 }
 `);
+}
+
+if (require.main === module) {
+  runMain();
+}




diff --git a/scripts/build/tests/generate_css_js_files_test.js b/scripts/build/tests/generate_css_js_files_test.js
new file mode 100644
index 0000000000000000000000000000000000000000..c56fe92273cc8a7affd96a1f1e82a1839a19b2c4
--- /dev/null
+++ b/scripts/build/tests/generate_css_js_files_test.js
@@ -0,0 +1,53 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+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', () => {
+    const css = `div {
+      height: 20px;
+    }`;
+    const contents =
+        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', () => {
+    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) {
+      .test {
+        color: #fff;
+      }
+    }`));
+  });
+});