Port babel-plugin-styled-components to SWC #30802

timneutkens · 2021-11-02T11:48:50Z

This Babel plugin is the most used customization of .babelrc.

The plugin is split up in multiple separate transforms:

https://github.com/styled-components/babel-plugin-styled-components/blob/a26774e599c82c72e8793989f60310d29c181fac/src/index.js

The defaults are here: https://github.com/styled-components/babel-plugin-styled-components/blob/950692b92855f17609e4281d5081e3d2acbf4b6b/src/utils/options.js

The critical one which makes styled-components not have hydration issues with Next.js is displayNameAndId. All the other ones seem to be optimizations. Because of this I'd start by porting the displayNameAndId transform and then check what else can be ported.

Looking at the defaults the only transform that is disabled by default is the pure annotations one.

List of transforms:

The text was updated successfully, but these errors were encountered:

switz · 2021-11-02T18:27:51Z

swc-project/swc#2506

Unclear if this is relevant, but it looks like SWC fixed the compiler to not break with styled-components. Still probably not enough to close this issue for customization/optionality, but maybe if updated, swc can compile SC at a base level now?

timneutkens · 2021-11-02T19:00:58Z

swc-project/swc#2506

Unclear if this is relevant, but it looks like SWC fixed the compiler to not break with styled-components. Still probably not enough to close this issue for customization/optionality, but maybe if updated, swc can compile SC at a base level now?

The linked issue is unrelated as that one is about the minifier. This issue is about implementing the transforms that are critical for running styled-components correctly when doing SSR.

## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint` Related to: #30802

timneutkens · 2021-11-10T18:32:59Z

Posted an update on the feedback thread: #30174 (comment). It's available to try now.

cahbb · 2021-11-22T07:14:05Z

Awesome ⭐

I'm a bit confused on how to actually implement. Not sure if this is on a "normal" next@12 version or if I still have to install next@canary. #30174 (comment)

I'm running version 12.0.2. Do I still need to use the experimental key in next.config.js?

This actually works, but am getting no displayNames (component names) on the components.

{
  styledComponent: true
}

This works as expected. Do you guys have an estimate on when this is not experimental any more?

{
  experimental: {
    styledComponent: true
  }
}

romulovalez · 2021-11-22T15:07:56Z

Right now is available only on next@canary and inside experimental.

Thanks to @kdy1 and @timneutkens for this contribution!

I'll wait for css prop to be ready and I will adopt in a blink of an eye!

matwii · 2021-11-23T12:08:58Z

Ahh this explains why css prop failed.. I thought it was supported. Is it planned later?

janro1 · 2021-11-24T12:00:02Z

Hi @kdy1, are you planning to publish the styled-components swc plugin to npm as well? Would be cool if it could also be used with the swc-loader

samuelhnrq · 2021-11-25T12:41:42Z

I'll wait for css prop to be ready and I will adopt in a blink of an eye!

Wait you mean like Emotion's css prop? I've been using it on next 12 already. You can change the JSX pragma trough jsconfig.json

nwesthoff · 2021-11-25T14:47:55Z

Thank you @timneutkens, we're all very excited about the work you all have been doing with SWC.

Our main blocker right now is 'referring to other components' feature of styled-components. I'm not exactly sure what transform this is using, but I wanted to flag it in case it's not on your roadmap already.

timneutkens · 2021-11-26T14:28:11Z

Our main blocker right now is 'referring to other components' feature of styled-components. I'm not exactly sure what transform this is using, but I wanted to flag it in case it's not on your roadmap already.

That feature doesn't seem to rely on any compilation, it's just leveraging tagged template literals. Are you running into an issue with that feature or just checking if it's supported?

agriffis · 2021-11-29T16:01:39Z

Do you expect to support topLevelImportPaths? We need this for xstyled or any other lib that wraps styled-components. More info:

https://xstyled.dev/docs/migrate-from-styled-components/#babel-plugin
styled-components/babel-plugin-styled-components#288

kdy1 · 2021-11-30T09:32:30Z

@janro1

Hi @kdy1, are you planning to publish the styled-components swc plugin to npm as well? Would be cool if it could also be used with the swc-loader

Sorry for the late response. I finally managed to handle issue emails and saw this.
Of course, although not polished/documented yet but @swc/core now supports rust plugins under experimental flags.

But it will require some more work because currently only displayNameAndId is ported to rust.

janro1 · 2021-11-30T10:28:41Z

@janro1

Hi @kdy1, are you planning to publish the styled-components swc plugin to npm as well? Would be cool if it could also be used with the swc-loader

Sorry for the late response. I finally managed to handle issue emails and saw this. Of course, although not polished/documented yet but @swc/core now supports rust plugins under experimental flags.

But it will require some more work because currently only displayNameAndId is ported to rust.

Nice, thank you @kdy1! From what I see, displayNameAndId is all we need currently.

KimPaow · 2021-12-01T13:37:43Z

When opting in to use SWC I noticed that media-queries like below have a new behaviour. Before, the query would take precedence but now the margin: 23px auto overwrites margin: auto auto 120px even when the condition is true.

const P = styled(BaseP)`
  margin-bottom: 60px;

  ${mq.breakpoint('sm')} {
    margin: auto auto 120px;
  }
`;

const CenterP = styled(P)`
  text-align: center;
  margin: 23px auto;
`;

roxeteer · 2021-12-01T13:40:56Z

@KimPaow That has happened randomly in our applications even with babel. Styled-components FAQ has a solution: https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity

KimPaow · 2021-12-01T13:51:46Z

@roxeteer That seems to be working, thanks for the tip!

agriffis · 2021-12-01T13:59:45Z

@roxeteer It's not random. Media queries don't increase specificity. The wrapping styled-component overrides the wrapped one because the rules come later.

@KimPaow The behavior you describe happens with Babel too, it's not related to SWC. https://codesandbox.io/s/stupefied-grass-e0cox?file=/src/App.js

kdy1 · 2021-12-01T14:01:14Z

@agriffis I think it's related to the fact only displayNameAndId is ported. There were some babel transforms which can modify css, but those are not ported.

roxeteer · 2021-12-01T14:07:14Z

@agriffis It's random in the sense that it depends on the order that styled-components outputs the rules, and it doesn't seem to be constant.

agriffis · 2021-12-01T14:20:09Z

@roxeteer Hmm, that really shouldn't happen... 😦 I understand you might not have a reproducer handy, but if you do, I would love to see it and an issue at https://github.com/styled-components/styled-components/issues. The specificity hack in the s-c doc shouldn't be necessary in this case. (Asking as a contributor to styled-components.)

@kdy1 Are you referring to transpilation of tagged template literals? In theory that's only an optimization and shouldn't change behavior. Or do you mean something else?

ekaterina4952 · 2023-05-15T13:30:35Z

I have still same issue on the nextjs 13.4.1 even though I configured such as document of nextjs.
compiler: { styledComponents: { ssr: true} }

Prop "className" did not match. Server: "mui-style-1ggikmx" Client: "css-1ggikmx"

thexpand · 2023-05-15T13:55:51Z

I know this is probably not very relevant to the issue at hand, but I'll give you my 2 cents. It's been a very long time since this issue was opened. At some point, I just decided not to use SWC on the project that used the styled-components package. Later on, I started using CSS Modules with sass support and got completely hooked up. It's so much lighter on the final bundle and pages load definitely faster. For conditional switching of CSS classes, I use the classnames npm package. For me, CSS-in-JS puts too much pressure on the bundle and bloats it unnecessarily. Since I ditched it, I never looked back.

bsmith-self · 2023-05-15T17:00:15Z

We did the same thing. The issue in this ticket wasn't the motivator for switching, exactly, but switching means it became mostly a legacy issue

utikati · 2023-08-07T15:36:15Z

I know this is probably not very relevant to the issue at hand, but I'll give you my 2 cents. It's been a very long time since this issue was opened. At some point, I just decided not to use SWC on the project that used the styled-components package. Later on, I started using CSS Modules with sass support and got completely hooked up. It's so much lighter on the final bundle and pages load definitely faster. For conditional switching of CSS classes, I use the classnames npm package. For me, CSS-in-JS puts too much pressure on the bundle and bloats it unnecessarily. Since I ditched it, I never looked back.

@thexpand Can you just tell me if in dev you can trace the file where your style is?
Im using SASS and in dev in browser i try to debug but all I see is "layout.css" with all the styles, did you had the same problem?

2Pacalypse- · 2023-08-21T17:58:40Z

Hey guys, I'm using the newest Next.js with the SWC compiler and styled-components work fine, but I don't see the more useful class names in the developer tools, which is supposed to be controlled with the displayNames config property. Nothing I do seem to fix this, and even more weirdly this used to work fine with the pages router, but doesn't work now with the app router. Does anyone know what might be wrong, or what's the best way to debug this in case it's a bug in Next.js's code?

machineghost · 2023-08-21T18:21:42Z

Honestly, the fact that this ticket has been open for almost two years should tell you everything you need to know: the Next.js team just doesn't care about supporting Styled Components.

Similarly, don't expect the Styled Components devs to help out in any way: when I asked the guy who answered basically said that he was the only developer left, and he could barely keep the library maintained on his own, so he doesn't have time to help out other projects.

Sadly, in 2023, if you want to use Next.js, you either have to abandon Styled Components (as I did), or live with a flawed integration.

Lwdthe1 · 2023-08-27T01:32:29Z

I'm using Next.js 13.0.3 beta, and I've added to next.config.js:
compiler: {
  styledComponents: true,
},
However, when my own client-side JavaScript adds classes to elements, I'm getting the warning "Prop "className" did not match. Server: "<myclass, etc.>"
How do I prevent this warning? I do want to use ssr and rust, and I need to add classes to elements in the client, classes that are not present on the component expressed in the server-side JSX. Adding styledComponents: true is not fixing it.
I fixed the warning "Prop "className" did not match. Server: "<myclass, etc.>" by setting next.config.js like this:
// @ts-check
const { i18n } = require('./next-i18next.config.js');

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  reactStrictMode: true,
  compiler: { styledComponents: { ssr: true } },  // ✅
  i18n,
  trailingSlash: true,
};

module.exports = nextConfig;
Nextjs@12 +

styled-components

🔎 Trouble Shooting:

Only set compiler: { styledComponents: true } is not enough ❌

If used nextjs@12+，no need to import babel plugin babel-plugin-styled-components

This got me to a solution for getting the css prop working again after upgrading from NextJs 10, but mine is slightly different. I'm using:

"next": "^13.1.6",
"react": "^18.2.0",,
"styled-components": "^6.0.7", ,
"babel-plugin-styled-components": "^1.13.3",
"webpack": "^5.88.2"

The following are my next.config.js and .babelrc setups:

// next.config.js
module.exports = {
  return {
    env,
    useFileSystemPublicRoutes: false,
    typescript: {
	// TODO: Remove once project is fully typed
	ignoreBuildErrors: true,
    },
    compiler: {
	styledComponents: true,
    },
  }
}

// .babelrc
"plugins": [
		// ... other plugins
		[
			"babel-plugin-styled-components",
			{
				"ssr": true,
				"displayName": true,
				"preprocess": false
			}
		]
	]

kdy1 · 2023-08-27T04:09:40Z

@Lwdthe1 If you have .babelrc, compiler.styledComponents has no effect.

Lwdthe1 · 2023-08-27T21:21:09Z

@Lwdthe1 If you have .babelrc, compiler.styledComponents has no effect.

That's what I heard elsewhere, but that's not true. If I remove compiler.styledComponents, my css props stop working completely.

However, it does appear the babel-plugin-styled-components has no effect if I keep it or remove it so long as I have compiler.styledComponents.

2Pacalypse- · 2023-08-29T12:57:27Z

Hey guys, I'm using the newest Next.js with the SWC compiler and styled-components work fine, but I don't see the more useful class names in the developer tools, which is supposed to be controlled with the displayNames config property. Nothing I do seem to fix this, and even more weirdly this used to work fine with the pages router, but doesn't work now with the app router. Does anyone know what might be wrong, or what's the best way to debug this in case it's a bug in Next.js's code?

In case someone else faces the same issue, I've fixed it by doing what this comment suggested: #46605 (comment)

Sounds ridiculous, but it works.

S-YOU · 2023-09-16T02:11:16Z

pure, minify and transpileTemplateLiterals are not implemented yet

May I know why minify is not supporting at all? I am seeing standalone/.build folder js contents not getting minified.

fnwbr · 2023-10-24T17:41:20Z

Hey @kdy1 👋
Thank you very much for your continued efforts on this. As I'm seeing some movement in the @swc/plugin-styled-components package, can you maybe enlighten the rest of us?

As referred to by @2Pacalypse- and @d-nakajima, how come that this is the case?

I faced same problem when I use import { styled } from 'styled-components'. I change to import styled from 'styled-components' and it is fixed. Please try this change If your code is like first one.

(I don't know why it is fixed. The code for export in 'styled-components' file is export { styled, styled as default } ...)

Is there any chance you can fix this behavior going forward, and allow us to also use the following style of importing as well?

import { styled } from 'styled-components';

(This is the recommended way as of https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-named-as-default.md)

kdy1 · 2023-10-25T20:03:46Z

~~Okay. I think at least the recommended way should work out of the box. I'll work on it. Thank you for the notice. I didn't know that it's the recommended way.~~

I misread it. It's a third-party eslint rule

kdy1 · 2023-10-25T20:05:58Z

Filed swc-project/plugins#224 anyway, but I have lots of tasks with higher priority

This implements `minify` option in styled-components plugin. The minification algorithm and unit tests are ported from `babel-plugin-styled-components`. Note that CSS code in helper functions (`keyframes`, `css`, etc.) are currently not always processed. I think there is a bug in `is_helper` function, so I'll fix it in another pull request later. fixes swc-project#143 cf. vercel/next.js#30802

…roject#237) This implements `transpileTemplateLiterals` option in styled-components plugin. cf. vercel/next.js#30802

This implements `pure` option in styled-components plugin. cf. vercel/next.js#30802

### What? Update swc crates. Diff: swc-project/swc@09b3003...c566b73 ### Why? To fix bugs, and improve minification. ### How? turbopack counterpart: vercel/turborepo#6472 - Closes PACK-1972 - Closes vercel#30802 --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

fnwbr · 2023-12-05T16:26:05Z

Can confirm that import { styled } from 'styled-components'; is now also working as expected. (Tested Next.js 14.0.4-canary.41)
Thank you @kdy1! 🙌

github-actions · 2023-12-20T00:03:09Z

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

timneutkens added kind: story SWC Related to minification/transpilation in Next.js. labels Nov 2, 2021

timneutkens changed the title ~~Port babel-plugin-styled-components~~ Port babel-plugin-styled-components to SWC Nov 2, 2021

timneutkens mentioned this issue Nov 2, 2021

Port @emotion/babel-plugin to SWC #30804

Closed

timneutkens assigned kdy1 Nov 2, 2021

kdy1 mentioned this issue Nov 9, 2021

next-swc: Add displayNameAndId of styled-components #31189

Merged

10 tasks

timneutkens assigned losfair and unassigned kdy1 Nov 19, 2021

m-maillot mentioned this issue Nov 25, 2021

Upgrade next js SocialGouv/code-du-travail-numerique#4044

Closed

vladmandic mentioned this issue Mar 8, 2023

Error when deployed on Heroku, potentially due to minification vladmandic/face-api#157

Closed

machineghost mentioned this issue May 16, 2023

Please reopen# 3634 styled-components/styled-components#3921

Closed

kdy1 mentioned this issue Oct 30, 2023

[styled-components] import { styled } from 'styled-components'; should work swc-project/plugins#224

Closed

ciffelia mentioned this issue Nov 22, 2023

feat(styled-components): Implement minification swc-project/plugins#235

Merged

ciffelia mentioned this issue Nov 25, 2023

feat(styled-components): Implement transpileTemplateLiterals swc-project/plugins#237

Merged

ciffelia added a commit to ciffelia/swc-plugins that referenced this issue Nov 25, 2023

feat(styled-components): Implement transpileTemplateLiterals (swc-p…

1fd7c3d

…roject#237) This implements `transpileTemplateLiterals` option in styled-components plugin. cf. vercel/next.js#30802

ciffelia mentioned this issue Nov 25, 2023

feat(styled-components): Implement pure option swc-project/plugins#238

Merged

kdy1 mentioned this issue Nov 26, 2023

Update swc_core to v0.86.81 #58517

Merged

ciffelia added a commit to ciffelia/swc-plugins that referenced this issue Nov 27, 2023

feat(styled-components): Implement pure option (swc-project#238)

66f0b1b

This implements `pure` option in styled-components plugin. cf. vercel/next.js#30802

sokra closed this as completed in #58517 Nov 27, 2023

github-actions bot added the locked label Dec 20, 2023

github-actions bot locked as resolved and limited conversation to collaborators Dec 20, 2023

Port babel-plugin-styled-components to SWC #30802

Port babel-plugin-styled-components to SWC #30802

Comments

timneutkens commented Nov 2, 2021 • edited by kdy1 Loading

switz commented Nov 2, 2021

timneutkens commented Nov 2, 2021

timneutkens commented Nov 10, 2021

cahbb commented Nov 22, 2021

romulovalez commented Nov 22, 2021

matwii commented Nov 23, 2021

janro1 commented Nov 24, 2021

samuelhnrq commented Nov 25, 2021

nwesthoff commented Nov 25, 2021

timneutkens commented Nov 26, 2021

agriffis commented Nov 29, 2021

kdy1 commented Nov 30, 2021

janro1 commented Nov 30, 2021

KimPaow commented Dec 1, 2021 • edited Loading

roxeteer commented Dec 1, 2021

KimPaow commented Dec 1, 2021

agriffis commented Dec 1, 2021

kdy1 commented Dec 1, 2021

roxeteer commented Dec 1, 2021

agriffis commented Dec 1, 2021 • edited Loading

ekaterina4952 commented May 15, 2023

thexpand commented May 15, 2023

bsmith-self commented May 15, 2023

utikati commented Aug 7, 2023 • edited Loading

2Pacalypse- commented Aug 21, 2023

machineghost commented Aug 21, 2023

Lwdthe1 commented Aug 27, 2023 • edited Loading

kdy1 commented Aug 27, 2023

Lwdthe1 commented Aug 27, 2023

2Pacalypse- commented Aug 29, 2023

S-YOU commented Sep 16, 2023 • edited Loading

fnwbr commented Oct 24, 2023

kdy1 commented Oct 25, 2023 • edited Loading

kdy1 commented Oct 25, 2023

fnwbr commented Dec 5, 2023

github-actions bot commented Dec 20, 2023

timneutkens commented Nov 2, 2021 •

edited by kdy1

Loading

KimPaow commented Dec 1, 2021 •

edited

Loading

agriffis commented Dec 1, 2021 •

edited

Loading

utikati commented Aug 7, 2023 •

edited

Loading

Lwdthe1 commented Aug 27, 2023 •

edited

Loading

S-YOU commented Sep 16, 2023 •

edited

Loading

kdy1 commented Oct 25, 2023 •

edited

Loading