Repository: microsoft/griffel
Pull request #363 (2023-04-05 08:01:32)

docs: Add animation example to playground
See title 👆👆

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

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

<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/apps/website/src/components/Playground/code/templates/animation.js b/apps/website/src/components/Playground/code/templates/animation.js
new file mode 100644
index 0000000..645a067
--- /dev/null
+++ b/apps/website/src/components/Playground/code/templates/animation.js
@@ -0,0 +1,25 @@
+import { makeStyles } from '@griffel/core';
+
+export default makeStyles({
+  spinInACircle: {
+    animationPlayState: 'running',
+    animationDelay: '5s',
+    animationTimingFunction: 'cubic-bezier(0.1, 0.5, 0.1, 0.5)',
+    animationDirection: 'normal',
+    animationDuration: '5s',
+    animationIterationCount: 'infinite',
+    animationName: {
+      from: {
+        transform: 'rotate(0deg)',
+      },
+      to: {
+        transform: 'rotate(360deg)',
+      },
+    },
+  },
+});
+
+export const meta = {
+  name: 'Animations',
+  position: 12,
+};
diff --git a/change/@griffel-core-d4f54abc-a7c5-45ea-831f-679248cd7d3c.json b/change/@griffel-core-d4f54abc-a7c5-45ea-831f-679248cd7d3c.json
new file mode 100644
index 0000000..3a0b7a2
--- /dev/null
+++ b/change/@griffel-core-d4f54abc-a7c5-45ea-831f-679248cd7d3c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore(core): hide warnings in Node (part 2)",
+  "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 51dc913..98dcb98 100644
--- a/packages/core/src/runtime/resolveResetStyleRules.ts
+++ b/packages/core/src/runtime/resolveResetStyleRules.ts
@@ -11,7 +11,7 @@ import { isObject } from './utils/isObject';
 import { hyphenateProperty } from './utils/hyphenateProperty';
 import { compileCSSRules, normalizePseudoSelector } from './compileCSS';
 import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS';
-import { warnAboutUnresolvedRule } from './warnAboutUnresolvedRule';
+import { warnAboutUnresolvedRule } from './warnings/warnAboutUnresolvedRule';
 
 /**
  * @internal
diff --git a/packages/core/src/runtime/resolveStyleRules.ts b/packages/core/src/runtime/resolveStyleRules.ts
index 17d4612..c3b6e4d 100644
--- a/packages/core/src/runtime/resolveStyleRules.ts
+++ b/packages/core/src/runtime/resolveStyleRules.ts
@@ -22,7 +22,8 @@ import { isObject } from './utils/isObject';
 import { getStyleBucketName } from './getStyleBucketName';
 import { hashClassName } from './utils/hashClassName';
 import { hashPropertyKey } from './utils/hashPropertyKey';
-import { warnAboutUnresolvedRule } from './warnAboutUnresolvedRule';
+import { warnAboutUnresolvedRule } from './warnings/warnAboutUnresolvedRule';
+import { warnAboutUnsupportedProperties } from './warnings/warnAboutUnsupportedProperties';
 
 function pushToClassesMap(
   classesMap: CSSClassesMap,
@@ -83,19 +84,7 @@ export function resolveStyleRules(
   for (const property in styles) {
     // eslint-disable-next-line no-prototype-builtins
     if (UNSUPPORTED_CSS_PROPERTIES.hasOwnProperty(property)) {
-      if (process.env.NODE_ENV !== 'production') {
-        console.error(
-          [
-            `@griffel/react: You are using unsupported shorthand CSS property "${property}". ` +
-              `Please check your "makeStyles" calls, there *should not* be following:`,
-            ' '.repeat(2) + `makeStyles({`,
-            ' '.repeat(4) + `[slot]: { ${property}: "${styles[property as keyof GriffelStyle]}" }`,
-            ' '.repeat(2) + `})`,
-            '',
-            'Learn why CSS shorthands are not supported: https://aka.ms/griffel-css-shorthands',
-          ].join('\n'),
-        );
-      }
+      warnAboutUnsupportedProperties(property, styles[property as keyof GriffelStyle]);
       continue;
     }
 
diff --git a/packages/core/src/runtime/warnings/logError.ts b/packages/core/src/runtime/warnings/logError.ts
new file mode 100644
index 0000000..fff72ec
--- /dev/null
+++ b/packages/core/src/runtime/warnings/logError.ts
@@ -0,0 +1,5 @@
+export function logError(...args: any[]): void {
+  if (process.env.NODE_ENV !== 'production' && typeof document !== 'undefined') {
+    console.error(...args);
+  }
+}
diff --git a/packages/core/src/runtime/warnAboutUnresolvedRule.ts b/packages/core/src/runtime/warnings/warnAboutUnresolvedRule.ts
similarity index 82%
rename from packages/core/src/runtime/warnAboutUnresolvedRule.ts
rename to packages/core/src/runtime/warnings/warnAboutUnresolvedRule.ts
index 45adc51..148e063 100644
--- a/packages/core/src/runtime/warnAboutUnresolvedRule.ts
+++ b/packages/core/src/runtime/warnings/warnAboutUnresolvedRule.ts
@@ -1,10 +1,7 @@
-import type { GriffelResetStyle, GriffelStyle } from '../types';
+import type { GriffelResetStyle, GriffelStyle } from '../../types';
+import { logError } from './logError';
 
 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. ' +
@@ -33,6 +30,5 @@ export function warnAboutUnresolvedRule(property: string, value: GriffelStyle |
     );
   }
 
-  // eslint-disable-next-line no-console
-  console.error(message.join('\n'));
+  logError(message.join('\n'));
 }
diff --git a/packages/core/src/runtime/warnings/warnAboutUnsupportedProperties.ts b/packages/core/src/runtime/warnings/warnAboutUnsupportedProperties.ts
new file mode 100644
index 0000000..1df0cf9
--- /dev/null
+++ b/packages/core/src/runtime/warnings/warnAboutUnsupportedProperties.ts
@@ -0,0 +1,16 @@
+import type { GriffelStyle } from '../../types';
+import { logError } from './logError';
+
+export function warnAboutUnsupportedProperties(property: string, value: GriffelStyle[keyof GriffelStyle]) {
+  logError(
+    [
+      `@griffel/react: You are using unsupported shorthand CSS property "${property}". ` +
+        `Please check your "makeStyles" calls, there *should not* be following:`,
+      ' '.repeat(2) + `makeStyles({`,
+      ' '.repeat(4) + `[slot]: { ${property}: "${value}" }`,
+      ' '.repeat(2) + `})`,
+      '',
+      'Learn why CSS shorthands are not supported: https://aka.ms/griffel-css-shorthands',
+    ].join('\n'),
+  );
+}


Test patch:
diff --git a/packages/core/src/runtime/warnAboutUnresolvedRule-node.test.ts b/packages/core/src/runtime/warnAboutUnresolvedRule-node.test.ts
deleted file mode 100644
index 8ec9e13..0000000
--- a/packages/core/src/runtime/warnAboutUnresolvedRule-node.test.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * @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();
-  });
-});
diff --git a/packages/core/src/runtime/warnings/logError-node.test.ts b/packages/core/src/runtime/warnings/logError-node.test.ts
new file mode 100644
index 0000000..ceb73ea
--- /dev/null
+++ b/packages/core/src/runtime/warnings/logError-node.test.ts
@@ -0,0 +1,14 @@
+/*
+ * @jest-environment node
+ */
+
+import { logError } from './logError';
+
+describe('logError', () => {
+  it('does not log in Node', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation();
+
+    logError('An error occurred');
+    expect(spy).not.toBeCalled();
+  });
+});
diff --git a/packages/core/src/runtime/warnings/logError.test.ts b/packages/core/src/runtime/warnings/logError.test.ts
new file mode 100644
index 0000000..6ee4790
--- /dev/null
+++ b/packages/core/src/runtime/warnings/logError.test.ts
@@ -0,0 +1,11 @@
+import { logError } from './logError';
+
+describe('logError', () => {
+  it('logs in browser env', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation();
+
+    logError('An error occurred');
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('An error occurred');
+  });
+});
diff --git a/packages/core/src/runtime/warnAboutUnresolvedRule.test.ts b/packages/core/src/runtime/warnings/warnAboutUnresolvedRule.test.ts
similarity index 83%
rename from packages/core/src/runtime/warnAboutUnresolvedRule.test.ts
rename to packages/core/src/runtime/warnings/warnAboutUnresolvedRule.test.ts
index 86926e4..991d04f 100644
--- a/packages/core/src/runtime/warnAboutUnresolvedRule.test.ts
+++ b/packages/core/src/runtime/warnings/warnAboutUnresolvedRule.test.ts
@@ -1,15 +1,16 @@
 import { warnAboutUnresolvedRule } from './warnAboutUnresolvedRule';
+import { logError } from './logError';
+
+jest.mock('./logError', () => ({ logError: jest.fn() }));
 
 describe('warnAboutUnresolvedRule', () => {
   it('warns on a missing "&"', () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation();
-
     warnAboutUnresolvedRule('div', {
       color: 'red',
       ':hover': { color: 'blue' },
     });
 
-    expect(spy.mock.calls[0][0]).toMatchInlineSnapshot(`
+    expect((logError as jest.Mock).mock.calls[0][0]).toMatchInlineSnapshot(`
       "@griffel/react: A rule was not resolved to CSS properly. Please check your \`makeStyles\` or \`makeResetStyles\` calls for following:
         makeStyles({
           [slot]: {
diff --git a/packages/core/src/runtime/warnings/warnAboutUnsupportedProperties.test.ts b/packages/core/src/runtime/warnings/warnAboutUnsupportedProperties.test.ts
new file mode 100644
index 0000000..c73541c
--- /dev/null
+++ b/packages/core/src/runtime/warnings/warnAboutUnsupportedProperties.test.ts
@@ -0,0 +1,17 @@
+import { warnAboutUnsupportedProperties } from './warnAboutUnsupportedProperties';
+import { logError } from './logError';
+
+jest.mock('./logError', () => ({ logError: jest.fn() }));
+
+it('warnAboutUnresolvedRule', () => {
+  warnAboutUnsupportedProperties('flex', 0);
+
+  expect((logError as jest.Mock).mock.calls[0][0]).toMatchInlineSnapshot(`
+      "@griffel/react: You are using unsupported shorthand CSS property \\"flex\\". Please check your \\"makeStyles\\" calls, there *should not* be following:
+        makeStyles({
+          [slot]: { flex: \\"0\\" }
+        })
+
+      Learn why CSS shorthands are not supported: https://aka.ms/griffel-css-shorthands"
+    `);
+});