Documentation on @griffel/postcss-syntax package

[benkeen]

Hey folks! I was hoping to find some better doc on the @griffel/postcss-syntax package. All that's provided is listed here: https://github.com/microsoft/griffel/blob/main/packages/postcss-syntax/README.md

But there's no clear connection between how the syntax being defined in that file is used in @griffel/babel-preset. I'll continue working at it and I'm sure I'll figure it out at some point, but I know other people are equally confused.

Thanks!

[benkeen]

It looks like the return value from createSyntax could be used right in the babel definition, so:

const { createSyntax } = require('@griffel/postcss-syntax');
const syntax = createSyntax({
  modules: [
    { moduleSource: '@myScope/griffel', importName: 'createStyles' },
  ]
});

And with a demo babel config:

{
  "presets": [
    [
      "@griffel",
      {
        "modules": [{ "moduleSource": "custom-package", "importName": "makeStyles" }]
      }
    ]
  ]
}

Would be:

{
  "presets": [
    [
      "@griffel",
      syntax
    ]
  ]
}

But this returns a validation failure (babel 5): Validation failed for passed config: data must NOT have additional properties