CSS Preprocessing with SWC

[mattjennings]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

It seems there is currently no support for plugins when using SWC with Next.js. Are there any plans for this? I'd really like to setup PostCSS, but of course it's only available as a babel plugin.

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

What is the expected behavior?

Plugin system to allow CSS preprocessing

Environment (include versions)

• Version of styled-jsx (or next.js if it's being used): Next.js
• Browser: Chrome
• OS: macOS

Did this work in previous versions?

Yes, plugin system is available with Babel

[KarthikeyanRanasthala]

Bump!

[tettoffensive]

Seems strange that there isn't support since this is a Vercel project and Next.js is now using SWC. I personally want to be able to use scss syntax in my project.

[huozhi]

cc @kdy1 @kwonoj

[kdy1]

Do you mean a rust-based one, or postcss?

[Somiona]

Upvote, the current example for enabling styled jsx plugins is by using it with babel, and there's no clear instruction of how to configure it to work with swc.

[wjd3]

PostCSS support for SWC would enable Tailwind CSS usage, like the @apply directive.

[stef7]

Bumping too... Still no way to use PostCSS + Styled JSX with SWC 😞

The project is halfway through, also using Tailwind and @apply, so if we need to drop PostCSS, it means we lose that too. So Styled JSX might be the one that goes, if we can find another solution. Or accept slower compilation time...

[jacquescrocker]

This is definitely blocking my usage of SWC. I can't imagine having to go back to plain CSS for all my components... that seems so incredibly backwards.

[huozhi]

https://swc.rs/docs/configuration/compilation#jscexperimentalplugins might be sth you're looking for

[Garett-MacGowan]

https://swc.rs/docs/configuration/compilation#jscexperimentalplugins might be sth you're looking for

I'm having a hard time using that plugin. As far as I can tell, .swcrc doesn't load in Next.js. As such, i've tried adding the plugin to the experimental swcPlugins section in next.config.js. I've run npm install @swc/plugin-styled-jsx and confirmed it exists in node-modules.

next.config.js

experimental: {
  swcPlugins: [
    ['@swc/plugin-styled-jsx', {}]
  ]
}

The above configuration throws "Failed to create plugin instance"

Any insights would be appreciated. Would like to avoid babel + styled-jsx-plugin-postcss.

[huozhi]

@Garett-MacGowan if you’re using nextjs, you don’t need to configure swcrc for styled-jsx. Which nextjs version are you having issue with?

[Venipa]

@huozhi we actually do need to since tailwind isnt available in styled-jsx without configuring postcss

my current .swcrc config

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-jsx",
          {
            "plugins": [
              "@styled-jsx/plugin-sass",
              "styled-jsx-plugin-postcss"
            ]
          }
        ]
      ]
    }
  }
}

[huozhi]

I would say this is more like a limitation to swc while supporting various usage cases. swc compilation for next.js (next-swc) can have native and wasm bindings to run in different scenarios. Supporting many pre-processing plugins which are depending on node.js (like sass) would be a problem for wasm build of next-swc. Also it could have a performance limitation which is opposite to the purpose of having swc compilation.

At the moment we don't have an nice solution to handle it in both ways, going to close this issue for now.

[dzcpy]

@huozhi we actually do need to since tailwind isnt available in styled-jsx without configuring postcss

my current .swcrc config

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-jsx",
          {
            "plugins": [
              "@styled-jsx/plugin-sass",
              "styled-jsx-plugin-postcss"
            ]
          }
        ]
      ]
    }
  }
}

Have you got it working with style-jsx + tailwind(postcss)?

[danielegarciav]

@huozhi

swc compilation for next.js (next-swc) can have native and wasm bindings to run in different scenarios. Supporting many pre-processing plugins which are depending on node.js (like sass) would be a problem for wasm build of next-swc.

Starting with Next 14, the WASM target for next-swc has been removed.

At the moment we don't have an nice solution to handle it in both ways, going to close this issue for now.

If I understand this right, now that we don't have to handle it both ways, this issue can be reopened (or a new one could be created).

[Venipa]

so any updates on this? cuz this is bad: