@griffel/transform 3.0.5 → 3.0.6

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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,20 +0,0 @@
-{
-  "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

@@ -1,5 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,15 +0,0 @@
-{
-  "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

@@ -1,9 +0,0 @@
-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

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

package/__fixtures__/reset-styles/code.ts

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

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

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

package/__fixtures__/reset-styles/output.ts

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,8 +0,0 @@
-{
-  "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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,14 +0,0 @@
-{
-  "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

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

package/__fixtures__/shared-mixins/code.ts

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

package/__fixtures__/shared-mixins/mixins.ts

@@ -1,6 +0,0 @@
-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

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

package/__fixtures__/shared-mixins/output.ts

@@ -1,8 +0,0 @@
-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

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

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

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

package/__fixtures__/static-styles/output.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

package/__fixtures__/tokens/code.ts

@@ -1,11 +0,0 @@
-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

@@ -1,12 +0,0 @@
-{
-  "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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,16 +0,0 @@
-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

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

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

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

package/eslint.config.mjs

@@ -1,31 +0,0 @@
-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/project.json

@@ -1,51 +0,0 @@
-{
-  "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/evaluation/astEvaluator.mts

@@ -1,109 +0,0 @@
-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,
-  };
-}