chore: refactor at rules to be a separate param in functions (#556)

microsoft · May 16, 2024 · 3cac9f0 · 3cac9f0
1 parent e3bf466
commit 3cac9f0
Show file tree

Hide file tree

Showing 10 changed files with 281 additions and 283 deletions.
diff --git a/change/@griffel-core-6be177be-0e28-4c2b-b669-fbf43322e4aa.json b/change/@griffel-core-6be177be-0e28-4c2b-b669-fbf43322e4aa.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: refactor at rules to be a separate param in functions",
+  "packageName": "@griffel/core",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/core/src/runtime/compileAtomicCSSRule.test.ts b/packages/core/src/runtime/compileAtomicCSSRule.test.ts
@@ -1,17 +1,17 @@
 import { compileAtomicCSSRule, normalizePseudoSelector } from './compileAtomicCSSRule';
 import type { CompileAtomicCSSOptions } from './compileAtomicCSSRule';
+import type { AtRules } from './utils/types';
 
-const defaultOptions: Pick<
-  CompileAtomicCSSOptions,
-  'rtlClassName' | 'className' | 'media' | 'selectors' | 'support' | 'layer' | 'container'
-> = {
+const defaultOptions: Pick<CompileAtomicCSSOptions, 'rtlClassName' | 'className' | 'selectors'> = {
   className: 'foo',
   rtlClassName: 'rtl-foo',
-  media: '',
   selectors: [],
-  support: '',
-  layer: '',
+};
+const defaultAtRules: AtRules = {
   container: '',
+  layer: '',
+  media: '',
+  supports: '',
 };
 
 describe('compileAtomicCSSRule', () => {
@@ -54,34 +54,43 @@ describe('compileAtomicCSSRule', () => {
     ['scroll-margin', '0'],
   ])('does not prefix %s:%s', (property, value) => {
     expect(
-      compileAtomicCSSRule({
-        ...defaultOptions,
-        property,
-        value,
-      }),
+      compileAtomicCSSRule(
+        {
+          ...defaultOptions,
+          property,
+          value,
+        },
+        defaultAtRules,
+      ),
     ).toMatchSnapshot();
   });
 
   it('handles pseudo', () => {
     expect(
-      compileAtomicCSSRule({
-        ...defaultOptions,
-        selectors: [':hover'],
-        property: 'color',
-        value: 'red',
-      }),
+      compileAtomicCSSRule(
+        {
+          ...defaultOptions,
+          selectors: [':hover'],
+          property: 'color',
+          value: 'red',
+        },
+        defaultAtRules,
+      ),
     ).toMatchInlineSnapshot(`
       Array [
         ".foo:hover{color:red;}",
       ]
     `);
     expect(
-      compileAtomicCSSRule({
-        ...defaultOptions,
-        selectors: [':focus:hover'],
-        property: 'color',
-        value: 'red',
-      }),
+      compileAtomicCSSRule(
+        {
+          ...defaultOptions,
+          selectors: [':focus:hover'],
+          property: 'color',
+          value: 'red',
+        },
+        defaultAtRules,
+      ),
     ).toMatchInlineSnapshot(`
       Array [
         ".foo:focus:hover{color:red;}",
@@ -91,11 +100,14 @@ describe('compileAtomicCSSRule', () => {
 
   it('handles array of values', () => {
     expect(
-      compileAtomicCSSRule({
-        ...defaultOptions,
-        property: 'color',
-        value: ['red', 'blue'],
-      }),
+      compileAtomicCSSRule(
+        {
+          ...defaultOptions,
+          property: 'color',
+          value: ['red', 'blue'],
+        },
+        defaultAtRules,
+      ),
     ).toMatchInlineSnapshot(`
       Array [
         ".foo{color:red;color:blue;}",
@@ -105,24 +117,28 @@ describe('compileAtomicCSSRule', () => {
 
   it('handles at-rules', () => {
     expect(
-      compileAtomicCSSRule({
-        ...defaultOptions,
-        media: '(max-width: 100px)',
-        property: 'color',
-        value: 'red',
-      }),
+      compileAtomicCSSRule(
+        {
+          ...defaultOptions,
+          property: 'color',
+          value: 'red',
+        },
+        { ...defaultAtRules, media: '(max-width: 100px)' },
+      ),
     ).toMatchInlineSnapshot(`
       Array [
         "@media (max-width: 100px){.foo{color:red;}}",
       ]
     `);
     expect(
-      compileAtomicCSSRule({
-        ...defaultOptions,
-        support: '(display: table-cell)',
-        property: 'color',
-        value: 'red',
-      }),
+      compileAtomicCSSRule(
+        {
+          ...defaultOptions,
+          property: 'color',
+          value: 'red',
+        },
+        { ...defaultAtRules, supports: '(display: table-cell)' },
+      ),
     ).toMatchInlineSnapshot(`
       Array [
         "@supports (display: table-cell){.foo{color:red;}}",
@@ -132,15 +148,18 @@ describe('compileAtomicCSSRule', () => {
 
   it('handles rtl properties', () => {
     expect(
-      compileAtomicCSSRule({
-        ...defaultOptions,
+      compileAtomicCSSRule(
+        {
+          ...defaultOptions,
 
-        property: 'paddingLeft',
-        value: '10px',
+          property: 'paddingLeft',
+          value: '10px',
 
-        rtlProperty: 'paddingRight',
-        rtlValue: '10px',
-      }),
+          rtlProperty: 'paddingRight',
+          rtlValue: '10px',
+        },
+        defaultAtRules,
+      ),
     ).toMatchInlineSnapshot(`
       Array [
         ".foo{padding-left:10px;}",
@@ -151,16 +170,19 @@ describe('compileAtomicCSSRule', () => {
 
   it('handles rtl properties with pseudo selectors', () => {
     expect(
-      compileAtomicCSSRule({
-        ...defaultOptions,
-        selectors: [':before'],
+      compileAtomicCSSRule(
+        {
+          ...defaultOptions,
+          selectors: [':before'],
 
-        property: 'paddingLeft',
-        value: '10px',
+          property: 'paddingLeft',
+          value: '10px',
 
-        rtlProperty: 'paddingRight',
-        rtlValue: '10px',
-      }),
+          rtlProperty: 'paddingRight',
+          rtlValue: '10px',
+        },
+        defaultAtRules,
+      ),
     ).toMatchInlineSnapshot(`
       Array [
         ".foo:before{padding-left:10px;}",
@@ -171,13 +193,16 @@ describe('compileAtomicCSSRule', () => {
 
   it('handles rtl properties with fallback values', () => {
     expect(
-      compileAtomicCSSRule({
-        ...defaultOptions,
-        property: 'paddingLeft',
-        value: [0, '10px'],
-        rtlProperty: 'paddingRight',
-        rtlValue: [0, '10px'],
-      }),
+      compileAtomicCSSRule(
+        {
+          ...defaultOptions,
+          property: 'paddingLeft',
+          value: [0, '10px'],
+          rtlProperty: 'paddingRight',
+          rtlValue: [0, '10px'],
+        },
+        defaultAtRules,
+      ),
     ).toMatchInlineSnapshot(`
       Array [
         ".foo{padding-left:0;padding-left:10px;}",
@@ -189,24 +214,30 @@ describe('compileAtomicCSSRule', () => {
   describe('global', () => {
     it('compiles global rules', () => {
       expect(
-        compileAtomicCSSRule({
-          ...defaultOptions,
-          selectors: [':global(body)'],
-          property: 'color',
-          value: 'red',
-        }),
+        compileAtomicCSSRule(
+          {
+            ...defaultOptions,
+            selectors: [':global(body)'],
+            property: 'color',
+            value: 'red',
+          },
+          defaultAtRules,
+        ),
       ).toMatchInlineSnapshot(`
               Array [
                 "body .foo{color:red;}",
               ]
           `);
       expect(
-        compileAtomicCSSRule({
-          ...defaultOptions,
-          selectors: [':global(.fui-FluentProvider)', '& .focus:hover'],
-          property: 'color',
-          value: 'red',
-        }),
+        compileAtomicCSSRule(
+          {
+            ...defaultOptions,
+            selectors: [':global(.fui-FluentProvider)', '& .focus:hover'],
+            property: 'color',
+            value: 'red',
+          },
+          defaultAtRules,
+        ),
       ).toMatchInlineSnapshot(`
               Array [
                 ".fui-FluentProvider .foo .focus:hover{color:red;}",
@@ -216,15 +247,18 @@ describe('compileAtomicCSSRule', () => {
 
     it('compiles global rules with RTL', () => {
       expect(
-        compileAtomicCSSRule({
-          ...defaultOptions,
-          selectors: [':global(body)'],
-          property: 'paddingLeft',
-          value: '10px',
+        compileAtomicCSSRule(
+          {
+            ...defaultOptions,
+            selectors: [':global(body)'],
+            property: 'paddingLeft',
+            value: '10px',
 
-          rtlProperty: 'paddingRight',
-          rtlValue: '10px',
-        }),
+            rtlProperty: 'paddingRight',
+            rtlValue: '10px',
+          },
+          defaultAtRules,
+        ),
       ).toMatchInlineSnapshot(`
               Array [
                 "body .foo{padding-left:10px;}",

diff --git a/packages/core/src/runtime/compileAtomicCSSRule.ts b/packages/core/src/runtime/compileAtomicCSSRule.ts
@@ -1,15 +1,11 @@
 import { hyphenateProperty } from './utils/hyphenateProperty';
 import { normalizeNestedProperty } from './utils/normalizeNestedProperty';
+import type { AtRules } from './utils/types';
 import { compileCSSRules } from './compileCSSRules';
 
 export interface CompileAtomicCSSOptions {
   className: string;
-
   selectors: string[];
-  media: string;
-  layer: string;
-  support: string;
-  container: string;
 
   property: string;
   value: number | string | Array<number | string>;
@@ -55,20 +51,10 @@ function createCSSRule(classNameSelector: string, cssDeclaration: string, pseudo
 
 export function compileAtomicCSSRule(
   options: CompileAtomicCSSOptions,
+  atRules: AtRules,
 ): [string? /* ltr definition */, string? /* rtl definition */] {
-  const {
-    className,
-    media,
-    layer,
-    selectors,
-    support,
-    property,
-    rtlClassName,
-    rtlProperty,
-    rtlValue,
-    value,
-    container,
-  } = options;
+  const { className, selectors, property, rtlClassName, rtlProperty, rtlValue, value } = options;
+  const { container, layer, media, supports } = atRules;
 
   const classNameSelector = `.${className}`;
   const cssDeclaration = Array.isArray(value)
@@ -94,8 +80,8 @@ export function compileAtomicCSSRule(
     cssRule = `@layer ${layer} { ${cssRule} }`;
   }
 
-  if (support) {
-    cssRule = `@supports ${support} { ${cssRule} }`;
+  if (supports) {
+    cssRule = `@supports ${supports} { ${cssRule} }`;
   }
 
   if (container) {

diff --git a/packages/core/src/runtime/getStyleBucketName.test.ts b/packages/core/src/runtime/getStyleBucketName.test.ts
@@ -2,23 +2,29 @@ import { getStyleBucketName } from './getStyleBucketName';
 
 describe('getStyleBucketName', () => {
   it('returns bucketName based on mapping', () => {
-    expect(getStyleBucketName([], '', '', '', '')).toBe('d');
-    expect(getStyleBucketName(['.foo'], '', '', '', '')).toBe('d');
+    expect(getStyleBucketName([], { container: '', media: '', supports: '', layer: '' })).toBe('d');
+    expect(getStyleBucketName(['.foo'], { container: '', media: '', supports: '', layer: '' })).toBe('d');
 
-    expect(getStyleBucketName([' :link'], '', '', '', '')).toBe('l');
-    expect(getStyleBucketName([' :hover '], '', '', '', '')).toBe('h');
+    expect(getStyleBucketName([' :link'], { container: '', media: '', supports: '', layer: '' })).toBe('l');
+    expect(getStyleBucketName([' :hover '], { container: '', media: '', supports: '', layer: '' })).toBe('h');
 
-    expect(getStyleBucketName([':link'], '', '', '', '')).toBe('l');
-    expect(getStyleBucketName([':visited'], '', '', '', '')).toBe('v');
-    expect(getStyleBucketName([':focus-within'], '', '', '', '')).toBe('w');
-    expect(getStyleBucketName([':focus'], '', '', '', '')).toBe('f');
-    expect(getStyleBucketName([':focus-visible'], '', '', '', '')).toBe('i');
-    expect(getStyleBucketName([':hover'], '', '', '', '')).toBe('h');
-    expect(getStyleBucketName([':active'], '', '', '', '')).toBe('a');
+    expect(getStyleBucketName([':link'], { container: '', media: '', supports: '', layer: '' })).toBe('l');
+    expect(getStyleBucketName([':visited'], { container: '', media: '', supports: '', layer: '' })).toBe('v');
+    expect(getStyleBucketName([':focus-within'], { container: '', media: '', supports: '', layer: '' })).toBe('w');
+    expect(getStyleBucketName([':focus'], { container: '', media: '', supports: '', layer: '' })).toBe('f');
+    expect(getStyleBucketName([':focus-visible'], { container: '', media: '', supports: '', layer: '' })).toBe('i');
+    expect(getStyleBucketName([':hover'], { container: '', media: '', supports: '', layer: '' })).toBe('h');
+    expect(getStyleBucketName([':active'], { container: '', media: '', supports: '', layer: '' })).toBe('a');
 
-    expect(getStyleBucketName([':active'], 'theme', '', '', '')).toBe('t');
-    expect(getStyleBucketName([':active'], '', '(max-width: 100px)', '', '')).toBe('m');
-    expect(getStyleBucketName([':active'], '', '', '(display: table-cell)', '')).toBe('t');
-    expect(getStyleBucketName([':active'], '', '', '', 'foo (max-width: 1px)')).toBe('c');
+    expect(getStyleBucketName([':active'], { container: '', media: '', supports: '', layer: 'theme' })).toBe('t');
+    expect(
+      getStyleBucketName([':active'], { container: '', media: '(max-width: 100px)', supports: '', layer: '' }),
+    ).toBe('m');
+    expect(
+      getStyleBucketName([':active'], { container: '', media: '', supports: '(display: table-cell)', layer: '' }),
+    ).toBe('t');
+    expect(
+      getStyleBucketName([':active'], { container: 'foo (max-width: 1px)', media: '', supports: '', layer: '' }),
+    ).toBe('c');
   });
 });