fix(webpack-extraction-plugin): do not emit empty CSS files

change/@griffel-webpack-extraction-plugin-12160e79-5a79-4ece-a6b2-0d216619592e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: do not emit empty CSS files",
+  "packageName": "@griffel/webpack-extraction-plugin",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/webpack-extraction-plugin/__fixtures__/webpack/empty/code.ts

@@ -0,0 +1,8 @@
+import { __styles } from '@griffel/react';
+
+export const useStyles = __styles(
+  {
+    root: {},
+  },
+  {},
+);

packages/webpack-extraction-plugin/__fixtures__/webpack/empty/fs.json

@@ -0,0 +1 @@
+["bundle.js"]

packages/webpack-extraction-plugin/__fixtures__/webpack/empty/output.ts

@@ -0,0 +1,5 @@
+import { __css as _css } from '@griffel/react';
+import { __styles } from '@griffel/react';
+export const useStyles = _css({
+  root: {},
+});

packages/webpack-extraction-plugin/src/GriffelCSSExtractionPlugin.test.ts

@@ -230,6 +230,7 @@ describe('webpackLoader', () => {
   testFixture('reset');
   testFixture('reset-media');
   testFixture('mixed');
+  testFixture('empty');
 
   // Multiple calls of __styles
   testFixture('multiple');

packages/webpack-extraction-plugin/src/webpackLoader.test.ts

@@ -186,6 +186,7 @@ describe('webpackLoader', () => {
   testFixture('basic-rules');
   testFixture('reset');
   testFixture('mixed');
+  testFixture('empty');
 
   // Multiple
   testFixture('multiple');

packages/webpack-extraction-plugin/src/webpackLoader.ts

@@ -72,7 +72,14 @@ function webpackLoader(
     const resultSourceMap = unstable_keepOriginalCode ? inputSourceMap : result.sourceMap;
 
     if (result.cssRulesByBucket) {
-      const css = Object.entries(result.cssRulesByBucket).reduce((acc, [cssBucketName, cssBucketRules]) => {
+      const entries = Object.entries(result.cssRulesByBucket);
+
+      if (entries.length === 0) {
+        this.callback(null, resultCode, resultSourceMap);
+        return;
+      }
+
+      const css = entries.reduce((acc, [cssBucketName, cssBucketRules]) => {
         if (cssBucketName === 'm') {
           return (
             acc +

packages/webpack-loader/__fixtures__/empty/code.ts

@@ -0,0 +1,5 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  root: {},
+});

packages/webpack-loader/__fixtures__/empty/output.ts

@@ -0,0 +1,7 @@
+import { __styles } from '@griffel/react';
+export const useStyles = __styles(
+  {
+    root: {},
+  },
+  {},
+);

packages/webpack-loader/src/webpackLoader.test.ts

@@ -232,6 +232,7 @@ describe('webpackLoader', () => {
   testFixture('object');
   testFixture('function');
   testFixture('reset');
+  testFixture('empty');
 
   // Integration fixtures for config functionality
   testFixture('config-modules', {