postcss syntax for Griffel
npm install @griffel/postcss-syntaxA postcss custom syntax for Javascript files that contain
Griffel CSS in JS code.
The parser will parse a Javascript file and return the CSS output of any Griffel makeStyle or makeResetStyle
calls. The parsed postcss AST will include source locations back to the original Javascript code.
The stringifier only works on a postcss AST that was parsed by this custom syntax since Griffel ahead of time
compilation lacks the capability to map generated CSS back to the original javascript properties very accurately.
The preprocessor uses transforms in the @griffel/babel-preset package. In order to configure the babel transform
that is used internally, we've created the a factory to return the custom syntax that uses the desired configuration.
``ts``
import { createSyntax } from '@griffel/postcss-syntax';
const syntax = createSyntax({
modules: [
{ moduleSource: '@myScope/griffel', importName: 'createStyles' },
]
})
For more information about how to configure the babel Griffel preset
you can check out the docs