Repository: microsoft/griffel
Pull request #267 (2022-11-01 14:57:42)

chore: rework tests CSS extraction
This PR:
- removes usages of `console.log` to prefer usages of `export`
- adds a comment to `output.css` to identify from which files CSS comes
- updates `style-buckets` to include `@layer` & `@supports`
- adds `with-chunks` to assert chunks behavior
- adds `with-css` to ensure that we don't affect third-parties


Patch:
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.css
index 9003857..54d906a 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.css
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets-multiple/output.css
@@ -1,3 +1,4 @@
+/** griffel.css **/
 .fp00rh9 {
   background-image: url(blank.jpg), url(empty.jpg);
 }
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.css
index 6c74738..f592e12 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.css
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/assets/output.css
@@ -1,3 +1,4 @@
+/** griffel.css **/
 .fnwsaxv {
   background-image: url(blank.jpg);
 }
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/code.ts
index 3c20101..19dad50 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/code.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/code.ts
@@ -1,6 +1,6 @@
 import { __styles } from '@griffel/react';
 
-const styles = __styles(
+export const styles = __styles(
   {
     root: {
       sj55zd: 'fe3e8s9',
@@ -20,5 +20,3 @@ const styles = __styles(
     ],
   },
 );
-
-console.log(styles);
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.css
index 807e034..f1412ed 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.css
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.css
@@ -1,3 +1,4 @@
+/** griffel.css **/
 .fe3e8s9 {
   color: red;
 }
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts
index 5c87bf6..3a5eb05 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/basic-rules/output.ts
@@ -1,6 +1,5 @@
 import { __styles, __css } from '@griffel/react';
-
-const styles = __css({
+export const styles = __css({
   root: {
     sj55zd: 'fe3e8s9',
     uwmqm3: ['fycuoez', 'f8wuabp'],
@@ -11,6 +10,4 @@ const styles = __css({
   },
 });
 
-console.log(styles);
-
 import 'griffel.css!=!../../../virtual-loader/index.js!../../../virtual-loader/griffel.css?style=.fe3e8s9%7Bcolor%3Ared%3B%7D%0A.fycuoez%7Bpadding-left%3A4px%3B%7D%0A.f8wuabp%7Bpadding-right%3A4px%3B%7D%0A.fcnqdeg%7Bbackground-color%3Agreen%3B%7D';
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/code.ts
index 0be9cd8..a0165bb 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/code.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/code.ts
@@ -1,6 +1,6 @@
 import { __styles } from '@griffel/react';
 
-const styles = __styles(
+export const styles = __styles(
   {
     root: {
       sj55zd: 'fe3e8s9',
@@ -10,5 +10,3 @@ const styles = __styles(
     d: ['.fe3e8s9{color:red;}'],
   },
 );
-
-console.log(styles);
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/output.css
index b0a2f30..6948fb7 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/output.css
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/config-name/output.css
@@ -1,3 +1,4 @@
+/** griffel.e44646c584b8724e9528.css **/
 .fe3e8s9 {
   color: red;
 }
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.css
index 550ed80..53761cb 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.css
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/mixed/output.css
@@ -1,3 +1,4 @@
+/** griffel.css **/
 .rjefjbm {
   color: red;
   padding-left: 4px;
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.css
index 1bbd349..8325d4d 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.css
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/multiple/output.css
@@ -1,3 +1,4 @@
+/** griffel.css **/
 .fe3e8s9 {
   color: red;
 }
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.css
index ef2d71f..4f279e4 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.css
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset-assets/output.css
@@ -1,3 +1,4 @@
+/** griffel.css **/
 .ra9m047 {
   background-image: url(blank.jpg);
 }
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.css
index a6789af..9dabdb7 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.css
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/reset/output.css
@@ -1,3 +1,4 @@
+/** griffel.css **/
 .rjefjbm {
   color: red;
   padding-left: 4px;
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/code.ts
index b1c9aca..202b20d 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/code.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/code.ts
@@ -1,6 +1,6 @@
 import { __styles } from '@griffel/react';
 
-const styles1 = __styles(
+export const styles1 = __styles(
   {
     root: {
       sj55zd: 'fe3e8s9',
@@ -12,7 +12,7 @@ const styles1 = __styles(
   },
 );
 
-const styles2 = __styles(
+export const styles2 = __styles(
   {
     root: {
       sj55zd: 'fe3e8s9',
@@ -23,5 +23,3 @@ const styles2 = __styles(
     d: ['.fe3e8s9{color:red;}', '.fcnqdeg{background-color:green;}'],
   },
 );
-
-console.log(styles1, styles2);
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/output.css
index 1bbd349..8325d4d 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/output.css
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/rules-deduplication/output.css
@@ -1,3 +1,4 @@
+/** griffel.css **/
 .fe3e8s9 {
   color: red;
 }
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/code.ts
index d60249f..a21174b 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/code.ts
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/code.ts
@@ -1,6 +1,6 @@
 import { __styles } from '@griffel/react';
 
-const styles = __styles(
+export const styles = __styles(
   {},
   // Classes in this test are intentionally not realistic to simplify snapshots
   {
@@ -13,6 +13,7 @@ const styles = __styles(
     h: ['.color-yellow:hover { color: yellow; }'],
     a: ['.color-black:active { color: black; }'],
     k: ['@keyframes foo { from{ transform:rotate(0deg); } to { transform:rotate(360deg); } }'],
+    t: ['@supports (display: table-cell){.foo{color:red;}}', '@layer color {.f1hjcal7 {color: red;}}'],
     m: [
       [
         '@media (forced-colors: active) { .color-magenta { color: magenta; } }',
@@ -23,5 +24,3 @@ const styles = __styles(
     ],
   },
 );
-
-console.log(styles);
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/output.css
index 432f7ce..cbd8c2c 100644
--- a/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/output.css
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/style-buckets/output.css
@@ -1,3 +1,4 @@
+/** griffel.css **/
 .color-red {
   color: red;
 }
@@ -33,6 +34,16 @@
     transform: rotate(360deg);
   }
 }
+@supports (display: table-cell) {
+  .foo {
+    color: red;
+  }
+}
+@layer color {
+  .f1hjcal7 {
+    color: red;
+  }
+}
 @media (forced-colors: active) {
   .color-magenta {
     color: magenta;
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.css
new file mode 100644
index 0000000..7c0edcc
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.css
@@ -0,0 +1,6 @@
+.foo {
+  color: red;
+}
+.bar {
+  color: yellow;
+}
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.ts
new file mode 100644
index 0000000..30eb1b9
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkA.ts
@@ -0,0 +1,11 @@
+import { __styles } from '@griffel/react';
+import './chunkA.css';
+
+export const styles = __styles(
+  {
+    root: { sj55zd: 'fe3e8s9' },
+  },
+  {
+    d: ['.fe3e8s9{color:red;}'],
+  },
+);
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.css
new file mode 100644
index 0000000..edf0e19
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.css
@@ -0,0 +1,3 @@
+.baz {
+  color: blue;
+}
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.ts
new file mode 100644
index 0000000..3481964
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/chunkB.ts
@@ -0,0 +1,11 @@
+import { __styles } from '@griffel/react';
+import './chunkB.css';
+
+export const styles = __styles(
+  {
+    root: { sj55zd: 'fe3e8s9' },
+  },
+  {
+    d: ['.fe3e8s9{color:red;}'],
+  },
+);
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/code.ts
new file mode 100644
index 0000000..11f3c3d
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/code.ts
@@ -0,0 +1,25 @@
+import { __styles } from '@griffel/react';
+
+export const styles = __styles(
+  {
+    root: {
+      Bi91k9c: 'faf35ka',
+    },
+  },
+  {
+    d: ['.fcnqdeg{background-color:green;}'],
+  },
+);
+
+export async function loadStyles() {
+  const { styles: stylesA } = await import(
+    /* webpackChunkName: "chunkA" */
+    './chunkA'
+  );
+  const { styles: stylesB } = await import(
+    /* webpackChunkName: "chunkB" */
+    './chunkB'
+  );
+
+  return [stylesA, stylesB];
+}
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/fs.json
new file mode 100644
index 0000000..f2f6134
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/fs.json
@@ -0,0 +1,1 @@
+["bundle.js", "chunkA.bundle.js", "chunkA.css", "chunkB.bundle.js", "chunkB.css", "griffel.css"]
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/output.css
new file mode 100644
index 0000000..4e24000
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-chunks/output.css
@@ -0,0 +1,20 @@
+/** chunkA.css **/
+.foo {
+  color: red;
+}
+.bar {
+  color: yellow;
+}
+
+/** chunkB.css **/
+.baz {
+  color: blue;
+}
+
+/** griffel.css **/
+.fcnqdeg {
+  background-color: green;
+}
+.fe3e8s9 {
+  color: red;
+}
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/code.ts b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/code.ts
new file mode 100644
index 0000000..859da15
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/code.ts
@@ -0,0 +1,11 @@
+import { __styles } from '@griffel/react';
+import './input.css';
+
+export const styles1 = __styles(
+  {
+    root: { sj55zd: 'fe3e8s9' },
+  },
+  {
+    d: ['.fe3e8s9{color:red;}'],
+  },
+);
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/fs.json b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/fs.json
new file mode 100644
index 0000000..3acc0b5
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/fs.json
@@ -0,0 +1,1 @@
+["bundle.js", "griffel.css", "main.css"]
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/input.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/input.css
new file mode 100644
index 0000000..7c0edcc
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/input.css
@@ -0,0 +1,6 @@
+.foo {
+  color: red;
+}
+.bar {
+  color: yellow;
+}
diff --git a/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/output.css b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/output.css
new file mode 100644
index 0000000..f8fda3c
--- /dev/null
+++ b/packages/webpack-extraction-plugin/__fixtures__/webpack/with-css/output.css
@@ -0,0 +1,11 @@
+/** griffel.css **/
+.fe3e8s9 {
+  color: red;
+}
+/** main.css **/
+.foo {
+  color: red;
+}
+.bar {
+  color: yellow;
+}


Test patch:
diff --git a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts b/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts
index 1660fee..7c70cdc 100644
--- a/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts
+++ b/packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts
@@ -97,19 +97,19 @@ async function compileSourceWithWebpack(
       }
 
       const filesList = virtualFsVolume.readdirSync(__dirname) as string[];
-
-      const cssFilePath = path.resolve(
-        __dirname,
-        options.cssFilename ? filesList.find(filename => filename.includes('griffel')) ?? '' : 'griffel.css',
-      );
-
-      if (!virtualFsVolume.existsSync(cssFilePath)) {
-        reject(new Error('"griffel.css" does not exist in filesystem'));
-      }
-
-      const cssOutput = virtualFsVolume.readFileSync(cssFilePath, {
-        encoding: 'utf-8',
-      }) as string;
+      const cssOutput = filesList
+        .filter(filename => filename.includes('.css'))
+        .map(filename => {
+          return (
+            '\n' +
+            `/** ${path.basename(filename)} **/` +
+            '\n' +
+            virtualFsVolume.readFileSync(path.resolve(__dirname, filename), {
+              encoding: 'utf-8',
+            })
+          );
+        })
+        .join('');
 
       resolve({
         cssOutput,
@@ -192,11 +192,12 @@ function testFixture(fixtureName: string, options: CompileOptions = {}) {
       }
     }
 
+    const fsSnapshot = JSON.parse(await fs.promises.readFile(fsSnapshotPath, { encoding: 'utf8' }));
+    expect(resultFsSnapshot).toMatchObject(fsSnapshot);
+
     if (cssOutputPath) {
       const cssOutput = fixLineEndings(await fs.promises.readFile(cssOutputPath, { encoding: 'utf8' }));
-      const fsSnapshot = JSON.parse(await fs.promises.readFile(fsSnapshotPath, { encoding: 'utf8' }));
 
-      expect(resultFsSnapshot).toMatchObject(fsSnapshot);
       expect(resultCSS).toBe(cssOutput);
       return;
     }
@@ -232,4 +233,10 @@ describe('webpackLoader', () => {
 
   // "pathinfo" adds comments with paths to output
   testFixture('basic-rules', { webpackConfig: { output: { pathinfo: true } } });
+
+  // With existing CSS
+  testFixture('with-css');
+
+  // Chunks
+  testFixture('with-chunks');
 });