"Disabled SWC as replacement for Babel because of custom Babel configuration"?

[andrewschreiber]

One of the big upgrades in Next 12 is use of the fast rust compiler SWC. Is there any way this .babelrc could be altered or removed while maintaining project functionality?

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-postcss"]
        }
      }
    ]
  ]
}

[ixartz]

I have already spend several days looking for a solution. Currently, there aren't any solution I'm totally satisfy.

Someone already shared the babel config for SWC support:
vercel/next.js#30174 (comment)

Maybe we should wait Vercel to add support?

I'm totally open for ideas.

[ixartz]

Do you see any slowness using the boilerplate?
I'm using for several Next JS projects and I don't see any issue even without using SWC compiler.

[andrewschreiber]

Still is pretty quick. Vercel builds in about a minute, though ~12 seconds would be incredible (if the 5x claims are to be believed).

I think it makes sense to wait for Vercel to support it.

I am curious about removing styled-jsx altogether. Haven't used it before and I've been pretty happy with vanilla tailwind. What use do you still find for it?

[ixartz]

If you don't used styled-jsx, I think you can remove .babelrc, remove the dependencies in package.json and you should be able to enjoy SWC speed.

I added styled-jsx support because

• It's one of Next JS core feature. It doesn't mean we should keep it...
• There is currently some limitation in vanilla tailwind for selector. styled-jsx is able to solve it with some powerful CSS selector.

[andrewschreiber]

Which selector are your referring to?

[ixartz]

Something you are currently not able to do it with Tailwind CSS is the children selector: styling the children with Tailwind. Or, the CSS attribute selector.

Maybe, we should the other way around: try to enable swc by removing the custom babel and if someone need a powerful selector, he can add it.

[oliverpatrick]

Something you are currently not able to do it with Tailwind CSS is the children selector: styling the children with Tailwind. Or, the CSS attribute selector.

Maybe, we should the other way around: try to enable swc by removing the custom babel and if someone need a powerful selector, he can add it.

Sorry if I'm mistaken with my understanding of this. Are you aware of the custom class names you can use in TailwindCSS currently? You can select pure selectors and group attributes together to select exactly what you need.

With that being said it was made in the interests of speed to do as you mentioned in the latter part of your response and remove the dependencies and the .babelrc file.

[ixartz]

@oliverpatrick Thank you for your message and your suggestion.
I reread your suggestion several and didn't fully understand your solution.
Could you share me example or a link to the documentation?

[oliverpatrick]

@ixartz Sorry about that. As I said, excuse me if I’m mistaken. After a quick google search I couldn’t find anything conclusive.

Fireship on YouTube however covers quite a concise little video on tailwind and roughly mentions what I mean. I have timestamped the link for you: https://youtu.be/pfaSUYaSgRo?t=503

Hope this helps.

[ixartz]

@oliverpatrick Thank you for taking the time to share the solution. It's one possible solution but it isn't as easy as I expected.
Here is someone asking the same thing: tailwindlabs/tailwindcss#1984

I think it's an edge case: styled-jsx-plugin-postcss doesn't need for all project. We can remove it from the boilerplate and we can use the rust compiler.

[oliverpatrick]

Spot on. Thank you for taking the time to review my comments and making the boilerplate. I’m glad I could offer feedback.

[ixartz]

@oliverpatrick @andrewschreiber I just remove styled-jsx-plugin-postcss and .babelrc. By default, the boilerplate now uses SWC compiler and the warning is now removed: "Disabled SWC as replacement for Babel because of custom Babel configuration"