A 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.
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