AstroTurfLoaderError: Cannot use the decorators and decorators-legacy plugin together

I’m looking for css-in-js library for my project, linaria and astroturf are in my preference. astroturf looks better for me because we already use css modules using .less.

The problem is when I use { legacy: true } for @babel/plugin-proposal-decorators build will crash with error message: AstroTurfLoaderError: Cannot use the decorators and decorators-legacy plugin together.

My babel config is:

{
    presets: [
        ['@babel/preset-env', {
            loose: true,
        }],
        '@babel/preset-react',
    ],
    plugins: [
        '@babel/plugin-syntax-dynamic-import',
        [
            '@babel/plugin-proposal-decorators',
            { legacy: true },
        ],
        '@babel/plugin-proposal-object-rest-spread',
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        [
            '@babel/plugin-transform-runtime',
            {
                corejs: false,
                helpers: true,
                regenerator: true,
                useESModules: false,
            },
        ],
    ],
}

What i do wrong?

[jquense]

It’s not intentionally opinionated, the parser requires picking one. Last I tried the two options were not compatible with each other. If that’s different now I’m certainly open to it

[jsg2021]

Yeah, that could even be articulated in the setup for people targeting very old runtimes… or error at startup?

Nevermind, this loader doesn’t transform the tag template literals… yeah, it’s better to just ensure the parser can at least handle tags and let the user’s config fill in the rest.