@griffel/transform 3.0.3 → 3.0.5

package/__fixtures__/assets-urls/output.meta.json

@@ -0,0 +1,14 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "d": [
+      ".f405sdg{background-image:url(http://www.example.com);}",
+      ".fvpuk3z{background-image:url(https://www.example.com);}",
+      ".fcrzfig{background-image:url(\"https://www.example.com\");}",
+      ".f1b0d1k8{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}",
+      ".f15gfcnl{background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" height=\"32\" aria-hidden=\"true\" viewBox=\"0 0 16 16\" width=\"32\" data-view-component=\"true\" class=\"octicon octicon-mark-github v-align-middle\"%3E%3Cpath fill-rule=\"evenodd\" d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\"%3E%3C/path%3E%3C/svg%3E');}",
+      ".f1bk4c0y{filter:url(#a);}"
+    ]
+  }
+}

package/__fixtures__/assets-urls/output.ts

@@ -0,0 +1,10 @@
+import { __css } from '@griffel/react';
+
+export const useStyles = __css({
+  httpUrl: { Bcmaq0h: 'f405sdg' },
+  httpsUrl: { Bcmaq0h: 'fvpuk3z' },
+  httpsUrlWithQuotes: { Bcmaq0h: 'fcrzfig' },
+  dataUrl: { Bcmaq0h: 'f1b0d1k8' },
+  dataUrlQuotes: { Bcmaq0h: 'f15gfcnl' },
+  hashOnly: { Bhu2qc9: 'f1bk4c0y' },
+});

package/__fixtures__/at-rules/code.ts

@@ -0,0 +1,14 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  root: {
+    '@media (min-width: 600px)': {
+      paddingLeft: '4px',
+      paddingRight: '4px',
+    },
+    '@supports (display: flex)': {
+      paddingLeft: '4px',
+      paddingRight: '4px',
+    },
+  },
+});

package/__fixtures__/at-rules/output.meta.json

@@ -0,0 +1,15 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "m": [
+      [
+        "@media (min-width: 600px){.f1h4p6a1{padding-right:4px;}.fgefjy{padding-left:4px;}}",
+        {
+          "m": "(min-width: 600px)"
+        }
+      ]
+    ],
+    "t": ["@supports (display: flex){.f1dyc5nu{padding-left:4px;}.f1kq3x14{padding-right:4px;}}"]
+  }
+}

package/__fixtures__/at-rules/output.ts

@@ -0,0 +1,10 @@
+import { __css } from '@griffel/react';
+
+export const useStyles = __css({
+  root: {
+    wbkd2a: ['fgefjy', 'f1h4p6a1'],
+    Dt0rau: ['f1h4p6a1', 'fgefjy'],
+    k2kg1z: ['f1dyc5nu', 'f1kq3x14'],
+    Blnc60a: ['f1kq3x14', 'f1dyc5nu'],
+  },
+});

package/__fixtures__/config-classname-hash-salt/code.ts

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

package/__fixtures__/config-classname-hash-salt/output.meta.json

@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "d": [".feohi3x{color:red;}", ".f1rwgqon{padding-left:4px;}", ".f1tyzn0d{padding-right:4px;}"]
+  }
+}

package/__fixtures__/config-classname-hash-salt/output.ts

@@ -0,0 +1,3 @@
+import { __css } from '@griffel/react';
+
+export const useStyles = __css({ root: { sj55zd: 'feohi3x', uwmqm3: ['f1rwgqon', 'f1tyzn0d'] } });

package/__fixtures__/config-evaluation-rules/code.ts

@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+import { colorRed } from './consts';
+
+export const useStyles = makeStyles({
+  // This import has no sense, but it will prevent us from evaluation in AST by Babel
+  // This fixture uses "sampleEvaluator.js" in transformPlugin's config so input we should get a different color
+  root: { color: colorRed },
+});

package/__fixtures__/config-evaluation-rules/consts.ts

@@ -0,0 +1 @@
+export const colorRed = 'red';

package/__fixtures__/config-evaluation-rules/output.meta.json

@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "d": [".f163i14w{color:blue;}"]
+  }
+}

package/__fixtures__/config-evaluation-rules/output.ts

@@ -0,0 +1,4 @@
+import { __css } from '@griffel/react';
+import { colorRed } from './consts';
+
+export const useStyles = __css({ root: { sj55zd: 'f163i14w' } });

package/__fixtures__/config-evaluation-rules/sampleEvaluator.cjs

@@ -0,0 +1,12 @@
+// @ts-check
+
+/** @type {import("@linaria/babel-preset").Evaluator} */
+const sampleEvaluator = () => {
+  // Evaluators transform input code to something that will be evaluated by Node later. In evaluatePathsInVM() we expect
+  // that results will be available as "exports.__mkPreval", this evaluator mocks it
+  const result = `exports.__mkPreval = [{ root: { color: 'blue' } }]`;
+
+  return { code: result, imports: null, moduleKind: 'cjs' };
+};
+
+module.exports.default = sampleEvaluator;

package/__fixtures__/error-argument-count/fixture.js

@@ -0,0 +1,4 @@
+import { makeStyles } from '@griffel/react';
+
+// This file is .js intentionally to avoid TS compiler errors
+export const useStyles = makeStyles({ root: { color: 'red' } }, 'foo');

package/__fixtures__/error-cjs/fixture.js

@@ -0,0 +1,4 @@
+const { makeStyles } = require('@griffel/react');
+
+const useStyles = makeStyles({ root: { color: 'red' } });
+module.exports = { useStyles };

package/__fixtures__/error-on-undefined/fixture.ts

@@ -0,0 +1,7 @@
+import { makeStyles } from '@griffel/react';
+// @ts-expect-error This module does not have exported member 'colors'
+import { colors } from './tokens';
+
+export const useClassesA = makeStyles({
+  root: { color: colors.foreground },
+});

package/__fixtures__/error-on-undefined/tokens.ts

@@ -0,0 +1 @@
+export const tokens = {};

package/__fixtures__/export-default/code.ts

@@ -0,0 +1,6 @@
+import { makeStyles } from '@griffel/react';
+
+export default makeStyles({
+  root: { color: 'red', paddingLeft: '4px' },
+  icon: { backgroundColor: 'green', marginLeft: '4px' },
+});

package/__fixtures__/export-default/output.meta.json

@@ -0,0 +1,14 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "d": [
+      ".fe3e8s9{color:red;}",
+      ".fycuoez{padding-left:4px;}",
+      ".f8wuabp{padding-right:4px;}",
+      ".fcnqdeg{background-color:green;}",
+      ".fjf1xye{margin-left:4px;}",
+      ".f8zmjen{margin-right:4px;}"
+    ]
+  }
+}

package/__fixtures__/export-default/output.ts

@@ -0,0 +1,6 @@
+import { __css } from '@griffel/react';
+
+export default __css({
+  root: { sj55zd: 'fe3e8s9', uwmqm3: ['fycuoez', 'f8wuabp'] },
+  icon: { De3pzq: 'fcnqdeg', Frg6f3: ['fjf1xye', 'f8zmjen'] },
+});

package/__fixtures__/function-mixin/code.ts

@@ -0,0 +1,6 @@
+import { makeStyles } from '@griffel/react';
+import { createMixin } from './mixins';
+
+export const useStyles = makeStyles({
+  avatar: createMixin({ display: 'block', opacity: '0' }),
+});

package/__fixtures__/function-mixin/mixins.ts

@@ -0,0 +1,7 @@
+import type { GriffelStyle } from '@griffel/core';
+import { tokens } from './tokens';
+
+export const createMixin = (rule: GriffelStyle): GriffelStyle => ({
+  color: tokens.colorBrandBackground,
+  ...rule,
+});

package/__fixtures__/function-mixin/output.meta.json

@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "d": [".f1817uup{color:var(--colorBrandBackground);}", ".ftgm304{display:block;}", ".fk73vx1{opacity:0;}"]
+  }
+}

package/__fixtures__/function-mixin/output.ts

@@ -0,0 +1,4 @@
+import { __css } from '@griffel/react';
+import { createMixin } from './mixins';
+
+export const useStyles = __css({ avatar: { sj55zd: 'f1817uup', mc9l5x: 'ftgm304', abs64n: 'fk73vx1' } });

package/__fixtures__/function-mixin/tokens.ts

@@ -0,0 +1,3 @@
+export const tokens = {
+  colorBrandBackground: 'var(--colorBrandBackground)',
+};

package/__fixtures__/import-alias/code.ts

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

package/__fixtures__/import-alias/output.meta.json

@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "d": [".fe3e8s9{color:red;}"]
+  }
+}

package/__fixtures__/import-alias/output.ts

@@ -0,0 +1,3 @@
+import { __css } from '@griffel/react';
+
+export const useStyles = __css({ root: { sj55zd: 'fe3e8s9' } });

package/__fixtures__/import-custom-module/code.ts

@@ -0,0 +1,6 @@
+// @ts-expect-error This module does not exist, but will be resolved via aliases
+import { makeStyles } from 'custom-package';
+
+export const useStyles = makeStyles({
+  root: { color: 'red' },
+});

package/__fixtures__/import-custom-module/output.meta.json

@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "d": [".fe3e8s9{color:red;}"]
+  }
+}

package/__fixtures__/import-custom-module/output.ts

@@ -0,0 +1,4 @@
+// @ts-expect-error This module does not exist, but will be resolved via aliases
+import { __css } from 'custom-package';
+
+export const useStyles = __css({ root: { sj55zd: 'fe3e8s9' } });

package/__fixtures__/keyframes/code.ts

@@ -0,0 +1,22 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  single: {
+    animationName: {
+      from: { transform: 'rotate(0deg)' },
+      to: { transform: 'rotate(360deg)' },
+    },
+  },
+  multiple: {
+    animationName: [
+      {
+        from: { transform: 'rotate(0deg)' },
+        to: { transform: 'rotate(360deg)' },
+      },
+      {
+        from: { height: '100px' },
+        to: { height: '200px' },
+      },
+    ],
+  },
+});

package/__fixtures__/keyframes/output.meta.json

@@ -0,0 +1,17 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "k": [
+      "@keyframes f1q8eu9e{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}",
+      "@keyframes f55c0se{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}",
+      "@keyframes f19fnzg9{from{height:100px;}to{height:200px;}}"
+    ],
+    "d": [
+      ".f1g6ul6r{animation-name:f1q8eu9e;}",
+      ".f1fp4ujf{animation-name:f55c0se;}",
+      ".f1e467oh{animation-name:f1q8eu9e,f19fnzg9;}",
+      ".f1w9bd63{animation-name:f55c0se,f19fnzg9;}"
+    ]
+  }
+}

package/__fixtures__/keyframes/output.ts

@@ -0,0 +1,6 @@
+import { __css } from '@griffel/react';
+
+export const useStyles = __css({
+  single: { Bv12yb3: ['f1g6ul6r', 'f1fp4ujf'] },
+  multiple: { Bv12yb3: ['f1e467oh', 'f1w9bd63'] },
+});

package/__fixtures__/multiple-declarations/code.ts

@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles1 = makeStyles({
+  root: { color: 'red' },
+});
+export const useStyles2 = makeStyles({
+  root: { color: 'green' },
+});

package/__fixtures__/multiple-declarations/output.meta.json

@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "d": [".fka9v86{color:green;}", ".fe3e8s9{color:red;}"]
+  }
+}

package/__fixtures__/multiple-declarations/output.ts

@@ -0,0 +1,4 @@
+import { __css } from '@griffel/react';
+
+export const useStyles1 = __css({ root: { sj55zd: 'fe3e8s9' } });
+export const useStyles2 = __css({ root: { sj55zd: 'fka9v86' } });

package/__fixtures__/non-existing-module-call/code.ts

@@ -0,0 +1,10 @@
+import { makeStyles } from '@griffel/react';
+import { createModule } from './module';
+
+export const useStyles = makeStyles({
+  container: {
+    color: 'red',
+  },
+});
+
+createModule().baz();

package/__fixtures__/non-existing-module-call/module.ts

@@ -0,0 +1,13 @@
+type FakeModule = {
+  foo: () => void;
+  bar: () => void;
+  baz: () => void;
+};
+
+export function createModule(): FakeModule {
+  return {
+    foo: () => {},
+    bar: () => {},
+    // this implementation intentionally missing "baz" property to throw on calls in runtime
+  } as unknown as FakeModule;
+}

package/__fixtures__/non-existing-module-call/output.meta.json

@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "d": [".fe3e8s9{color:red;}"]
+  }
+}

package/__fixtures__/non-existing-module-call/output.ts

@@ -0,0 +1,6 @@
+import { __css } from '@griffel/react';
+import { createModule } from './module';
+
+export const useStyles = __css({ container: { sj55zd: 'fe3e8s9' } });
+
+createModule().baz();

package/__fixtures__/object/code.ts

@@ -0,0 +1,6 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  root: { color: 'red', paddingLeft: '4px' },
+  icon: { backgroundColor: 'green', marginLeft: '4px' },
+});

package/__fixtures__/object/output.meta.json

@@ -0,0 +1,14 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "d": [
+      ".fe3e8s9{color:red;}",
+      ".fycuoez{padding-left:4px;}",
+      ".f8wuabp{padding-right:4px;}",
+      ".fcnqdeg{background-color:green;}",
+      ".fjf1xye{margin-left:4px;}",
+      ".f8zmjen{margin-right:4px;}"
+    ]
+  }
+}

package/__fixtures__/object/output.ts

@@ -0,0 +1,6 @@
+import { __css } from '@griffel/react';
+
+export const useStyles = __css({
+  root: { sj55zd: 'fe3e8s9', uwmqm3: ['fycuoez', 'f8wuabp'] },
+  icon: { De3pzq: 'fcnqdeg', Frg6f3: ['fjf1xye', 'f8zmjen'] },
+});

package/__fixtures__/object-computed-keys/code.ts

@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+
+const rootSlot = 'root';
+
+export const useStyles = makeStyles({
+  [rootSlot]: { color: 'red', paddingLeft: '4px' },
+  [rootSlot + 'primary']: { backgroundColor: 'green', marginLeft: '4px' },
+});

package/__fixtures__/object-computed-keys/output.meta.json

@@ -0,0 +1,14 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "d": [
+      ".fe3e8s9{color:red;}",
+      ".fycuoez{padding-left:4px;}",
+      ".f8wuabp{padding-right:4px;}",
+      ".fcnqdeg{background-color:green;}",
+      ".fjf1xye{margin-left:4px;}",
+      ".f8zmjen{margin-right:4px;}"
+    ]
+  }
+}

package/__fixtures__/object-computed-keys/output.ts

@@ -0,0 +1,8 @@
+import { __css } from '@griffel/react';
+
+const rootSlot = 'root';
+
+export const useStyles = __css({
+  root: { sj55zd: 'fe3e8s9', uwmqm3: ['fycuoez', 'f8wuabp'] },
+  rootprimary: { De3pzq: 'fcnqdeg', Frg6f3: ['fjf1xye', 'f8zmjen'] },
+});

package/__fixtures__/object-imported-keys/code.ts

@@ -0,0 +1,9 @@
+import { makeStyles } from '@griffel/react';
+import { className, selector } from './consts';
+
+export const useStyles = makeStyles({
+  root: {
+    [selector]: { color: 'red' },
+    [`& .${className}`]: { color: 'blue' },
+  },
+});

package/__fixtures__/object-imported-keys/consts.ts

@@ -0,0 +1,2 @@
+export const className = 'component-foo';
+export const selector = '& .component-bar';

package/__fixtures__/object-imported-keys/output.meta.json

@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "d": [".f1wgwx3x .component-bar{color:red;}", ".fglt6ox .component-foo{color:blue;}"]
+  }
+}

package/__fixtures__/object-imported-keys/output.ts

@@ -0,0 +1,4 @@
+import { __css } from '@griffel/react';
+import { className, selector } from './consts';
+
+export const useStyles = __css({ root: { B0egftl: 'f1wgwx3x', qhv8v2: 'fglt6ox' } });

package/__fixtures__/object-mixins/code.ts

@@ -0,0 +1,11 @@
+import { makeStyles } from '@griffel/react';
+import { flexStyles, gridStyles, typography } from './mixins';
+
+export const useStyles = makeStyles({
+  root: flexStyles,
+  label: typography.text,
+  header: typography.header,
+
+  icon: { ...flexStyles, color: 'red' },
+  image: { ...gridStyles('10px'), color: 'green' },
+});

package/__fixtures__/object-mixins/mixins.ts

@@ -0,0 +1,17 @@
+import type { GriffelStyle } from '@griffel/core';
+import { tokens } from './tokens';
+
+export const flexStyles: GriffelStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+};
+
+export const gridStyles = (gridGap: string): GriffelStyle => ({
+  display: 'grid',
+  gridRowGap: gridGap,
+});
+
+export const typography: Record<'text' | 'header', GriffelStyle> = {
+  text: { fontWeight: tokens.fontWeightRegular },
+  header: { fontWeight: 'bold' },
+};

package/__fixtures__/object-mixins/output.meta.json

@@ -0,0 +1,16 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "d": [
+      ".f22iagw{display:flex;}",
+      ".f1vx9l62{flex-direction:column;}",
+      ".figsok6{font-weight:var(--fontWeightRegular);}",
+      ".f16wzh4i{font-weight:bold;}",
+      ".fe3e8s9{color:red;}",
+      ".f13qh94s{display:grid;}",
+      ".f85kjgz{grid-row-gap:10px;}",
+      ".fka9v86{color:green;}"
+    ]
+  }
+}

package/__fixtures__/object-mixins/output.ts

@@ -0,0 +1,10 @@
+import { __css } from '@griffel/react';
+import { flexStyles, gridStyles, typography } from './mixins';
+
+export const useStyles = __css({
+  root: { mc9l5x: 'f22iagw', Beiy3e4: 'f1vx9l62' },
+  label: { Bhrd7zp: 'figsok6' },
+  header: { Bhrd7zp: 'f16wzh4i' },
+  icon: { mc9l5x: 'f22iagw', Beiy3e4: 'f1vx9l62', sj55zd: 'fe3e8s9' },
+  image: { mc9l5x: 'f13qh94s', a6qtfi: 'f85kjgz', sj55zd: 'fka9v86' },
+});

package/__fixtures__/object-mixins/tokens.ts

@@ -0,0 +1,3 @@
+export const tokens = {
+  fontWeightRegular: 'var(--fontWeightRegular)',
+};

package/__fixtures__/object-nesting/code.ts

@@ -0,0 +1,13 @@
+import { makeStyles } from '@griffel/react';
+import { colorBlue } from './consts';
+
+export const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+
+    ':hover': { color: 'red' },
+    ':focus': { ':hover': { color: colorBlue } },
+
+    '& .foo': { ':hover': { color: 'green' } },
+  },
+});

package/__fixtures__/object-nesting/consts.ts

@@ -0,0 +1 @@
+export const colorBlue = 'blue';

package/__fixtures__/object-nesting/output.meta.json

@@ -0,0 +1,9 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "d": [".f22iagw{display:flex;}", ".fh8e7tb .foo:hover{color:green;}"],
+    "h": [".faf35ka:hover{color:red;}"],
+    "f": [".f17t1d3d:focus:hover{color:blue;}"]
+  }
+}

package/__fixtures__/object-nesting/output.ts

@@ -0,0 +1,6 @@
+import { __css } from '@griffel/react';
+import { colorBlue } from './consts';
+
+export const useStyles = __css({
+  root: { mc9l5x: 'f22iagw', Bi91k9c: 'faf35ka', Bb9khzn: 'f17t1d3d', Btk3f3y: 'fh8e7tb' },
+});

package/__fixtures__/object-reset/code.ts

@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+
+export const RESET = 'DO_NOT_USE_DIRECTLY: @griffel/reset-value' as unknown as 'unset';
+
+export const useStyles = makeStyles({
+  root: { color: 'red', paddingLeft: RESET },
+  icon: { color: RESET },
+});

package/__fixtures__/object-reset/output.meta.json

@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "d": [".fe3e8s9{color:red;}"]
+  }
+}

package/__fixtures__/object-reset/output.ts

@@ -0,0 +1,5 @@
+import { __css } from '@griffel/react';
+
+export const RESET = 'DO_NOT_USE_DIRECTLY: @griffel/reset-value' as unknown as 'unset';
+
+export const useStyles = __css({ root: { sj55zd: 'fe3e8s9', uwmqm3: 0 }, icon: { sj55zd: 0 } });

package/__fixtures__/object-sequence-expr/code.ts

@@ -0,0 +1,16 @@
+import type { GriffelStyle } from '@griffel/react';
+import { makeStyles } from '@griffel/react';
+
+const switchClassName = 'fui-Switch';
+let _a: Record<string, GriffelStyle>;
+
+export const useStyles = makeStyles({
+  root:
+    ((_a = {}),
+    (_a[':hover .' + switchClassName] = {
+      ':before': {
+        backgroundColor: 'red',
+      },
+    }),
+    _a),
+});