Repository: microsoft/griffel
Pull request #357 (2023-03-29 09:30:17)

chore(core): hide warnings in Node
As both runtime and build time tools use the same functionality, we will emit warnings in build time. That was not intentional and confuses users, this PR hides warnings for Node env.

github-actions[bot]: ## 📊 Bundle size report

| Package & Exports                                                                                                            |    Baseline (minified/GZIP) |                          PR |                                                                                                                                                                                                   Change |
| :--------------------------------------------------------------------------------------------------------------------------- | --------------------------: | --------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeResetStyles-runtime.fixture.js'>makeResetStyles (runtime)</abbr>       | `17.922 kB`<br />`6.675 kB` | `18.752 kB`<br />`7.135 kB` | `830 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br />`460 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /> |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeStylesRuntime.fixture.js'>makeStyles + mergeClasses (runtime)</abbr>   | `22.009 kB`<br />`8.238 kB` | `22.839 kB`<br />`8.676 kB` | `830 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br />`438 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /> |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeResetStyles-runtime.fixture.js'>makeResetStyles (runtime)</abbr>      | `19.787 kB`<br />`7.455 kB` | `20.617 kB`<br />`7.902 kB` | `830 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br />`447 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /> |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStyles-runtime.fixture.js'>makeStyles + mergeClasses (runtime)</abbr> |  `23.885 kB`<br />`8.99 kB` | `24.715 kB`<br />`9.426 kB` | `830 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /><br />`436 B` <img aria-hidden="true" src="https://microsoft.github.io/monosize/images/increase.png" /> |

<details>
<summary>Unchanged fixtures</summary>

| Package & Exports                                                                                                         |        Size (minified/GZIP) |
| ------------------------------------------------------------------------------------------------------------------------- | --------------------------: |
| <samp>core</samp> <br /> <abbr title='bundle-size/makeStyles.fixture.js'>makeStyles + mergeClasses (build time)</abbr>    |   `2.19 kB`<br />`1.045 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/__css.fixture.js'>\_\_css + mergeClasses (build time)</abbr>           |  `2.227 kB`<br />`1.046 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/__styles.fixture.js'>\_\_styles + mergeClasses (build time)</abbr>     |   `4.03 kB`<br />`1.835 kB` |
| <samp>react</samp> <br /> <abbr title='bundle-size/makeStaticStyles-runtime.fixture.js'>makeStaticStyles (runtime)</abbr> | `10.633 kB`<br />`4.533 kB` |

</details>
<sub>🤖 This report was generated against <a href='https://github.com/microsoft/griffel/commit/a9578a7504a0d4e3824bd4ba60b37f358ecd1de3'>a9578a7504a0d4e3824bd4ba60b37f358ecd1de3</a></sub>

<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/change/@griffel-core-858c3d97-f959-46a8-94a1-4e8300b34885.json b/change/@griffel-core-858c3d97-f959-46a8-94a1-4e8300b34885.json
new file mode 100644
index 0000000..efe33f1
--- /dev/null
+++ b/change/@griffel-core-858c3d97-f959-46a8-94a1-4e8300b34885.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: hide warnings in Node",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/core/src/runtime/resolveResetStyleRules.ts b/packages/core/src/runtime/resolveResetStyleRules.ts
index ea85cba..51dc913 100644
--- a/packages/core/src/runtime/resolveResetStyleRules.ts
+++ b/packages/core/src/runtime/resolveResetStyleRules.ts
@@ -119,9 +119,7 @@ function createStringFromStyles(styles: GriffelResetStyle) {
       }
     }
 
-    if (process.env.NODE_ENV !== 'production') {
-      warnAboutUnresolvedRule(property, value);
-    }
+    warnAboutUnresolvedRule(property, value);
   }
 
   return [ltrCSS, rtlCSS];
diff --git a/packages/core/src/runtime/resolveStyleRules.ts b/packages/core/src/runtime/resolveStyleRules.ts
index 91a2fb7..17d4612 100644
--- a/packages/core/src/runtime/resolveStyleRules.ts
+++ b/packages/core/src/runtime/resolveStyleRules.ts
@@ -319,9 +319,7 @@ export function resolveStyleRules(
           cssRulesByBucket,
         );
       } else {
-        if (process.env.NODE_ENV !== 'production') {
-          warnAboutUnresolvedRule(property, value);
-        }
+        warnAboutUnresolvedRule(property, value);
       }
     }
   }
diff --git a/packages/core/src/runtime/warnAboutUnresolvedRule.ts b/packages/core/src/runtime/warnAboutUnresolvedRule.ts
index 372d348..45adc51 100644
--- a/packages/core/src/runtime/warnAboutUnresolvedRule.ts
+++ b/packages/core/src/runtime/warnAboutUnresolvedRule.ts
@@ -1,6 +1,10 @@
 import type { GriffelResetStyle, GriffelStyle } from '../types';
 
 export function warnAboutUnresolvedRule(property: string, value: GriffelStyle | GriffelResetStyle) {
+  if (process.env.NODE_ENV === 'production' || typeof document === 'undefined') {
+    return;
+  }
+
   const ruleText = JSON.stringify(value, null, 2);
   const message: string[] = [
     '@griffel/react: A rule was not resolved to CSS properly. ' +


Test patch:
diff --git a/packages/core/src/runtime/warnAboutUnresolvedRule-node.test.ts b/packages/core/src/runtime/warnAboutUnresolvedRule-node.test.ts
new file mode 100644
index 0000000..8ec9e13
--- /dev/null
+++ b/packages/core/src/runtime/warnAboutUnresolvedRule-node.test.ts
@@ -0,0 +1,18 @@
+/*
+ * @jest-environment node
+ */
+
+import { warnAboutUnresolvedRule } from './warnAboutUnresolvedRule';
+
+describe('warnAboutUnresolvedRule', () => {
+  it('does not warn in Node', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation();
+
+    warnAboutUnresolvedRule('div', {
+      color: 'red',
+      ':hover': { color: 'blue' },
+    });
+
+    expect(spy).not.toBeCalled();
+  });
+});