@griffel/transform 3.0.3 → 3.0.5

package/__fixtures__/object-sequence-expr/output.meta.json

@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "h": [".f1cm6cy7:hover .fui-Switch:before{background-color:red;}"]
+  }
+}

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

@@ -0,0 +1,7 @@
+import type { GriffelStyle } from '@griffel/react';
+import { __css } from '@griffel/react';
+
+const switchClassName = 'fui-Switch';
+let _a: Record<string, GriffelStyle>;
+
+export const useStyles = __css({ root: { ozcac4: 'f1cm6cy7' } });

package/__fixtures__/object-shorthands/code.ts

@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  root: {
+    borderRight: `5px solid red /* @noflip */`,
+    borderBottom: `5px solid red`,
+  },
+});

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

@@ -0,0 +1,20 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "d": [
+      [
+        ".fq3r367{border-right:5px solid red ;}",
+        {
+          "p": -1
+        }
+      ],
+      [
+        ".f171p8tk{border-bottom:5px solid red;}",
+        {
+          "p": -1
+        }
+      ]
+    ]
+  }
+}

package/__fixtures__/object-shorthands/output.ts

@@ -0,0 +1,5 @@
+import { __css } from '@griffel/react';
+
+export const useStyles = __css({
+  root: { h3c5rm: 0, vrafjx: 0, Bekrc4i: 0, u1mtju: 'fq3r367', B9xav0g: 0, oivjwe: 0, Bn0qgzm: 0, Bgfg5da: 'f171p8tk' },
+});

package/__fixtures__/object-variables/code.ts

@@ -0,0 +1,9 @@
+import { makeStyles } from '@griffel/react';
+import { colorGreen, theme } from './vars';
+
+const colorRed = 'red';
+
+export const useStyles = makeStyles({
+  root: { color: colorRed, paddingLeft: '4px' },
+  icon: { color: theme.black, backgroundColor: colorGreen, marginLeft: '4px' },
+});

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

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

package/__fixtures__/object-variables/output.ts

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

package/__fixtures__/object-variables/vars.ts

@@ -0,0 +1,5 @@
+export const colorGreen = 'green';
+
+export const theme = {
+  black: '#000',
+};

package/__fixtures__/reset-styles/code.ts

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

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

@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "r": [".rjefjbm{color:red;padding-left:4px;}", ".r7z97ji{color:red;padding-right:4px;}"]
+  }
+}

package/__fixtures__/reset-styles/output.ts

@@ -0,0 +1,3 @@
+import { __resetCSS } from '@griffel/react';
+
+export const useStyles = __resetCSS('rjefjbm', 'r7z97ji');

package/__fixtures__/reset-styles-at-rules/code.ts

@@ -0,0 +1,7 @@
+import { makeResetStyles } from '@griffel/react';
+
+export const useStyles = makeResetStyles({
+  color: 'red',
+  '@supports (display: flex)': { color: 'pink' },
+  '@media (min-width: 100px)': { color: 'blue' },
+});

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

@@ -0,0 +1,8 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "r": [".rjrhw4c{color:red;}"],
+    "s": ["@supports (display: flex){.rjrhw4c{color:pink;}}", "@media (min-width: 100px){.rjrhw4c{color:blue;}}"]
+  }
+}

package/__fixtures__/reset-styles-at-rules/output.ts

@@ -0,0 +1,3 @@
+import { __resetCSS } from '@griffel/react';
+
+export const useStyles = __resetCSS('rjrhw4c', null);

package/__fixtures__/rules-with-metadata/code.ts

@@ -0,0 +1,9 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  media: {
+    '@media screen and (max-width: 100px)': {
+      color: 'red',
+    },
+  },
+});

package/__fixtures__/rules-with-metadata/output.meta.json

@@ -0,0 +1,14 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {
+    "m": [
+      [
+        "@media screen and (max-width: 100px){.ful25cn{color:red;}}",
+        {
+          "m": "screen and (max-width: 100px)"
+        }
+      ]
+    ]
+  }
+}

package/__fixtures__/rules-with-metadata/output.ts

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

package/__fixtures__/shared-mixins/code.ts

@@ -0,0 +1,7 @@
+import { makeStyles } from '@griffel/react';
+import { sharedStyles } from './mixins';
+
+export const useStyles = makeStyles({
+  ...sharedStyles,
+  icon: { color: 'red' },
+});

package/__fixtures__/shared-mixins/mixins.ts

@@ -0,0 +1,6 @@
+import type { GriffelStyle } from '@griffel/core';
+
+export const sharedStyles: Record<string, GriffelStyle> = {
+  root: { display: 'flex' },
+  container: { display: 'grid' },
+};

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

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

package/__fixtures__/shared-mixins/output.ts

@@ -0,0 +1,8 @@
+import { __css } from '@griffel/react';
+import { sharedStyles } from './mixins';
+
+export const useStyles = __css({
+  root: { mc9l5x: 'f22iagw' },
+  container: { mc9l5x: 'f13qh94s' },
+  icon: { sj55zd: 'fe3e8s9' },
+});

package/__fixtures__/static-styles/code.ts

@@ -0,0 +1,7 @@
+import { makeStaticStyles } from '@griffel/react';
+
+export const useStaticStyles = makeStaticStyles({
+  body: {
+    background: 'red',
+  },
+});

package/__fixtures__/static-styles/output.meta.json

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

package/__fixtures__/static-styles/output.ts

@@ -0,0 +1,3 @@
+import { __staticCSS } from '@griffel/react';
+
+export const useStaticStyles = __staticCSS({ d: ['body{background:red;}'] });

package/__fixtures__/static-styles-array/code.ts

@@ -0,0 +1,10 @@
+import { makeStaticStyles } from '@griffel/react';
+
+export const useStaticStyles = makeStaticStyles([
+  {
+    body: {
+      background: 'red',
+    },
+  },
+  'html { margin: 0; }',
+]);

package/__fixtures__/static-styles-array/output.meta.json

@@ -0,0 +1,7 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "d": ["body{background:red;}", "html{margin:0;}"]
+  }
+}

package/__fixtures__/static-styles-array/output.ts

@@ -0,0 +1,3 @@
+import { __staticCSS } from '@griffel/react';
+
+export const useStaticStyles = __staticCSS({ d: ['body{background:red;}', 'html{margin:0;}'] });

package/__fixtures__/static-styles-string/code.ts

@@ -0,0 +1,3 @@
+import { makeStaticStyles } from '@griffel/react';
+
+export const useStaticStyles = makeStaticStyles('body { background: red; }');

package/__fixtures__/static-styles-string/output.meta.json

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

package/__fixtures__/static-styles-string/output.ts

@@ -0,0 +1,3 @@
+import { __staticCSS } from '@griffel/react';
+
+export const useStaticStyles = __staticCSS({ d: ['body{background:red;}'] });

package/__fixtures__/tokens/code.ts

@@ -0,0 +1,11 @@
+import { makeStyles } from '@griffel/react';
+import { customTokens } from './tokens';
+
+export const useStyles = makeStyles({
+  root: {
+    backgroundColor: 'black',
+    color: customTokens.colorPaletteBlueBorder2,
+    display: 'flex',
+  },
+  rootPrimary: { color: customTokens.colorBrandBackground },
+});

package/__fixtures__/tokens/output.meta.json

@@ -0,0 +1,12 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": true,
+  "cssRulesByBucket": {
+    "d": [
+      ".f1734hy{background-color:black;}",
+      ".ff34w31{color:var(--colorPaletteBlueBorder2);}",
+      ".f22iagw{display:flex;}",
+      ".f1817uup{color:var(--colorBrandBackground);}"
+    ]
+  }
+}

package/__fixtures__/tokens/output.ts

@@ -0,0 +1,7 @@
+import { __css } from '@griffel/react';
+import { customTokens } from './tokens';
+
+export const useStyles = __css({
+  root: { De3pzq: 'f1734hy', sj55zd: 'ff34w31', mc9l5x: 'f22iagw' },
+  rootPrimary: { sj55zd: 'f1817uup' },
+});

package/__fixtures__/tokens/tokens.ts

@@ -0,0 +1,4 @@
+export const customTokens = {
+  colorPaletteBlueBorder2: 'var(--colorPaletteBlueBorder2)',
+  colorBrandBackground: 'var(--colorBrandBackground)',
+};

package/__fixtures__/unsupported-css-properties/fixture.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  // List of shorthand properties is not exhaustive
+  // resulting output should be empty anyway
+  root: {
+    // @ts-expect-error unsupported css properties should be stripped
+    all: 'initial',
+    // @ts-expect-error unsupported css properties should be stripped
+    borderColor: 'value',
+    // @ts-expect-error unsupported css properties should be stripped
+    borderStyle: 'value',
+    // @ts-expect-error unsupported css properties should be stripped
+    borderWidth: 'value',
+  },
+});

package/__fixtures__/unsupported-css-properties/output.meta.json

@@ -0,0 +1,5 @@
+{
+  "usedProcessing": true,
+  "usedVMForEvaluation": false,
+  "cssRulesByBucket": {}
+}

package/__fixtures__/unsupported-css-properties/output.ts

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

package/eslint.config.mjs

@@ -0,0 +1,31 @@
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  {
+    ignores: ['**/dist', '**/out-tsc', '__fixtures__/*/output.ts'],
+  },
+  ...baseConfig,
+  {
+    files: ['__fixtures__/*/*.ts'],
+    rules: {
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-var-requires': 'off',
+    },
+  },
+  {
+    files: ['vite.config.*', 'vitest.config.*'],
+    rules: {
+      'import-x/no-extraneous-dependencies': 'off',
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    // Override or add rules here
+    rules: {},
+  },
+  {
+    files: ['**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/transform",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "A package that performs build time transforms for Griffel",
   "license": "MIT",
   "repository": {
@@ -18,12 +18,11 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@griffel/core": "^1.20.3",
-    "@griffel/transform-shaker": "^1.0.4",
+    "@griffel/core": "^1.21.1",
+    "@griffel/transform-shaker": "^1.0.6",
     "debug": "^4.3.0",
     "magic-string": "^0.30.19",
-    "oxc-parser": "^0.116.0",
-    "oxc-walker": "^0.7.0"
-  },
-  "module": "./src/index.mts.js"
-}
+    "oxc-parser": "^0.132.0",
+    "oxc-walker": "^1.0.0"
+  }
+}

package/project.json

@@ -0,0 +1,51 @@
+{
+  "name": "@griffel/transform",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/transform/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "test": {
+      "executor": "@nx/vitest:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "reportsDirectory": "{projectRoot}/../../coverage/packages/transform"
+      }
+    },
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/transform",
+        "tsConfig": "packages/transform/tsconfig.lib.json",
+        "skipTypeField": true,
+        "packageJson": "packages/transform/package.json",
+        "main": "packages/transform/src/index.mts",
+        "assets": [
+          "packages/transform/README.md",
+          {
+            "glob": "LICENSE.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "type-check": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/transform",
+        "commands": [
+          {
+            "command": "tsc -b --pretty"
+          }
+        ]
+      },
+      "outputs": []
+    }
+  }
+}

package/src/{constants.mjs → constants.mts}

@@ -1,3 +1,2 @@
 export const ASSET_TAG_OPEN = '<griffel-asset>';
 export const ASSET_TAG_CLOSE = '</griffel-asset>';
-//# sourceMappingURL=constants.mjs.map

package/src/evaluation/astEvaluator.mts

@@ -0,0 +1,109 @@
+import type { Node, ObjectExpression, Program, TemplateLiteral } from 'oxc-parser';
+import type { EvaluationResult, AstEvaluatorContext, AstEvaluatorPlugin } from './types.mjs';
+
+/**
+ * Sentinel value returned by plugins and evaluateNode to signal "can't handle this node".
+ * Using a symbol avoids the cost of Error construction and stack trace capture.
+ */
+export const DEOPT: unique symbol = Symbol('deopt');
+export type Deopt = typeof DEOPT;
+
+/**
+ * Simple static evaluator for object expressions with nested objects.
+ * Based on Babel's evaluation approach but simplified for our specific use case.
+ *
+ * Handles:
+ * - Objects with nested objects: { root: { color: 'red', padding: 0 } }
+ * - String literals, numeric literals, boolean literals, null
+ * - Simple property access
+ *
+ * Plugins can extend evaluation to handle additional node types.
+ */
+export function astEvaluator(node: Node, programAst: Program, plugins: AstEvaluatorPlugin[] = []): EvaluationResult {
+  const context: AstEvaluatorContext = {
+    programAst,
+    evaluateNode,
+  };
+
+  function evaluateNode(node: Node): unknown {
+    // Base cases
+    switch (node.type) {
+      case 'Literal':
+        return node.value;
+
+      case 'ObjectExpression':
+        return evaluateObjectExpression(node);
+
+      case 'TemplateLiteral':
+        if ((node as TemplateLiteral).expressions.length === 0) {
+          return (node as TemplateLiteral).quasis[0].value.cooked;
+        }
+        break;
+    }
+
+    // Try plugins in order
+    // ---
+
+    for (const plugin of plugins) {
+      const result = plugin.evaluateNode(node, context);
+
+      if (result !== DEOPT) {
+        return result;
+      }
+    }
+
+    return DEOPT;
+  }
+
+  function evaluateObjectExpression(node: ObjectExpression): unknown {
+    const obj: Record<string, unknown> = {};
+
+    for (const prop of node.properties) {
+      if (prop.type !== 'Property' || prop.kind !== 'init') {
+        return DEOPT;
+      }
+
+      let key: string;
+
+      if (prop.computed) {
+        return DEOPT;
+      } else if (prop.key.type === 'Identifier') {
+        key = prop.key.name;
+      } else if (prop.key.type === 'Literal') {
+        const keyLiteral = prop.key;
+
+        if (typeof keyLiteral.value === 'string' || typeof keyLiteral.value === 'number') {
+          key = String(keyLiteral.value);
+        } else {
+          return DEOPT;
+        }
+      } else {
+        return DEOPT;
+      }
+
+      const value = evaluateNode(prop.value);
+
+      if (value === DEOPT) {
+        return DEOPT;
+      }
+
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
+  const result = evaluateNode(node);
+
+  if (result === DEOPT) {
+    return {
+      confident: false,
+      value: undefined,
+    };
+  }
+
+  return {
+    confident: true,
+    value: result,
+  };
+}