@griffel/tag-processor

Griffel processor for wyw-in-js

A processor for wyw-in-js for that performs build time transforms for makeStyles & makeResetStyles @griffel/react.

• Install
• How to use it?
  • Handling Griffel re-exports

Install

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

How to use it?

This package cannot be used solely, it should be paired with @griffel/vite-plugin or other tools that support WyW-in-js.

Handling Griffel re-exports

import { makeStyles, makeResetStyles } from 'custom-package';

By default, the processor handles imports from @griffel/react & @fluentui/react-components, to handle imports from custom packages settings you need to include meta information to a matching package.json:

{
  "name": "custom-package",
  "version": "1.0.0",
  "wyw-in-js": {
    "tags": {
      "makeStyles": "@griffel/tag-processor/make-styles",
      "makeResetStyles": "@griffel/tag-processor/make-reset-styles"
    }
  }
}

Note: "custom-package" should re-export following functions from @griffel/react:

• __styles
• __css
• __resetStyles
• __resetCSS