@griffel/transform

A high-performance transformation package for Griffel that unifies CSS-in-JS transformation and extraction functionality.

• Overview
• Features
• Install
• Usage
  • Basic Transformation
• API Reference
  • transformSync(sourceCode, options)

Overview

@griffel/transform provides a unified approach to CSS-in-JS transformation and extraction for Griffel. It replaces Babel-based processing with modern OXC-based parsing for improved performance while maintaining full compatibility with existing Griffel APIs.

Install

yarn add --dev @griffel/transform
# or
npm install --save-dev @griffel/transform

Usage

Basic Transformation

import { transformSync } from '@griffel/transform';

const sourceCode = `
  import { makeStyles } from '@griffel/react';
  
  const useStyles = makeStyles({
    root: { color: 'red' }
  });
`;

const result = transformSync(sourceCode, {
  filename: 'styles.ts',
});

console.log(result.code); // Transformed code with __css calls
console.log(result.cssRulesByBucket); // Extracted CSS rules

API Reference

transformSync(sourceCode, options)

Transforms source code containing makeStyles or makeResetStyles calls.

Parameters:

• sourceCode (string): Source code to transform
• options (TransformOptions): Transformation options

Returns: TransformResult object containing:

• code: Transformed source code
• cssRulesByBucket: Extracted CSS rules organized by bucket type
• usedProcessing: Whether any transformations were applied
• usedVMForEvaluation: Whether VM evaluation was used

TransformOptions:

• filename (string): File path for error reporting and source maps
• classNameHashSalt? (string): Salt for CSS class name generation
• generateMetadata? (boolean): Include metadata in CSS rules
• modules? (string[]): Module sources to process
• babelOptions? (object): Babel configuration for complex evaluations
• evaluationRules? (array): Rules for determining evaluation strategy