experimental flag to transpile styled-components to next-yak

[jantimon]

Maybe we could add an experimental flag in the withYak config to automatically transpile styled-components code to next-yak. This feature would allow users to easily test existing styled-components-based projects with next-yak, potentially identifying performance improvements and compatibility issues.

Benefits:

1. Easier migration path for existing styled-components projects
2. Quick performance comparison between styled-components and next-yak
3. Identify areas where next-yak might need additional features to fully support styled-components syntax

Proposed Implementation:

• Add a new experimental flag in withYak config, e.g., library: "styled-components"
• When enabled, the loader would detect and transform styled-components imports to the next-yak equivalent

[Mad-Kat]

At the moment we don't support 100% of all features that styled-components has. Is the idea to somehow bail out if we find something that we don't support or just generate a warning?

[laem]

Hi ! That's what I'm looking for. Transforming all these lines is a bit of work, before being convinced of the interest of this lib.

import styled from 'styled-components' 
import {styled} from 'next-yak'

The other task I see for my codebase is to transform the css={text-transform: uppercase} to css={csstext-transform: uppercase}, which contrary to styled-components's version, needs an import of {css}

[laem]

I guess there are tools that help build scripts that transform js/ts files to handle these migrations, but I don't know this field.

[laem]

The migration is quite heavier than I thought. Multiple days of work for my map application. cartesapp/cartes#704
I'm converting components one by one in dev mode.

Running the build fails with an error that is not easy to understand.

$ next build
   ▲ Next.js 15.0.3
   - Environments: .env.local, .env
   - Experiments (use with caution):
     · turbo
     · swcPlugins
     · reactCompiler

   Creating an optimized production build ...
Generated 11 documents in .contentlayer
Failed to compile.

HookWebpackError: /home/laem/cartes/static/css/aaefa09d05cdbf9f.css:21:3: Unclosed block
    at makeWebpackError (/home/laem/cartes/node_modules/next/dist/compiled/webpack/bundle5.js:28:314597)
    at /home/laem/cartes/node_modules/next/dist/compiled/webpack/bundle5.js:28:106393
    at eval (eval at create (/home/laem/cartes/node_modules/next/dist/compiled/webpack/bundle5.js:13:9218), <anonymous>:44:1)
-- inner error --
CssSyntaxError: /home/laem/cartes/static/css/aaefa09d05cdbf9f.css:21:3: Unclosed block
    at Input.error (/home/laem/cartes/node_modules/postcss/lib/input.js:106:16)
    at ScssParser.unclosedBlock (/home/laem/cartes/node_modules/postcss/lib/parser.js:574:22)
    at ScssParser.endFile (/home/laem/cartes/node_modules/postcss/lib/parser.js:336:35)
    at ScssParser.parse (/home/laem/cartes/node_modules/postcss/lib/parser.js:475:10)
    at scssParse (/home/laem/cartes/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
    at new LazyResult (/home/laem/cartes/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (/home/laem/cartes/node_modules/postcss/lib/processor.js:53:14)
    at CssMinimizerPlugin.optimizeAsset (/home/laem/cartes/node_modules/next/src/build/webpack/plugins/css-minimizer-plugin.ts:48:8)
    at /home/laem/cartes/node_modules/next/src/build/webpack/plugins/css-minimizer-plugin.ts:97:47
    at Span.traceAsyncFn (/home/laem/cartes/node_modules/next/src/trace/trace.ts:143:14)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: /home/laem/cartes/static/css/aaefa09d05cdbf9f.css:21:3: Unclosed block
    at Input.error (/home/laem/cartes/node_modules/postcss/lib/input.js:106:16)
    at ScssParser.unclosedBlock (/home/laem/cartes/node_modules/postcss/lib/parser.js:574:22)
    at ScssParser.endFile (/home/laem/cartes/node_modules/postcss/lib/parser.js:336:35)
    at ScssParser.parse (/home/laem/cartes/node_modules/postcss/lib/parser.js:475:10)
    at scssParse (/home/laem/cartes/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
    at new LazyResult (/home/laem/cartes/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (/home/laem/cartes/node_modules/postcss/lib/processor.js:53:14)
    at CssMinimizerPlugin.optimizeAsset (/home/laem/cartes/node_modules/next/src/build/webpack/plugins/css-minimizer-plugin.ts:48:8)
    at /home/laem/cartes/node_modules/next/src/build/webpack/plugins/css-minimizer-plugin.ts:97:47
    at Span.traceAsyncFn (/home/laem/cartes/node_modules/next/src/trace/trace.ts:143:14)


> Build failed because of webpack errors
error: script "build" exited with code 1

[jantimon]

I have never seen this error but i'll take a look - thanks for sharing

[jantimon]

could you please share which file is causing this?

we noticed doing migration that styled component silently ignored errors but now that postcss processes them they break the build

[laem]

could you please share which file is causing this?

It's caused by my bun run build. Important note : I have still lots of errors that are plain clear in dev mode, but I need to check every route to correct them.

Probably linked to #224

[laem]

Cloning cartesapp/cartes, switching to the "yak" branch and doing bun install && bun run build should trigger the error.

The static/css/xxx files are not present anymore after the error is triggered, making it hard to find where it comes from in a large code base.

[jantimon]

@laem thank you so much - this is (probably) a bug in our parsing logic 🤯

in app/boussole/UI.tsx you are using background: url(...) but our parser can only handle urls inside quotes e.g. background: url("...")

[laem]

Thanks ! That was quite a peripheral unused page. How did you find out which one of the files was causing the build fail ?

[jantimon]

I modified the node_modules module which showed the "Unclosed Block" error message to get the full css code which caused the problem

btw we have a fix in #227

[laem]

https://cartes.app has switched fully to next-yak yesterday :)

Was quite a large set of changes. I've tried Aider to assist me, with Mistral, it's impressive but too difficult to know if the set of changes doesn't include an error. So, manually.

Prod works great. I have the impression that the app is faster in use. But it's very difficult to say. At least, the rehydratation errors have disappeared :)

[Mad-Kat]

Really nice to hear. Thank you for pushing through the migration. We're currently also busy to migrate a part of a huge application to get some real world performance comparisons between styled-components and next-yak.

[jantimon]

happy to hear that our yak is helping you