brijeshb42
commented
3 months ago Here's the config that worked for me in your repro -
import { withPigment } from "@pigment-css/nextjs-plugin";
import { createRequire } from "node:module";
const require = createRequire(import.meta.url);
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
/** @type {import('@pigment-css/nextjs-plugin').PigmentOptions} */
const pigmentConfig = {
theme: {
colors: {
primary: "#9542f5",
},
},
tagResolver(source, tag) {
if (source === "styled-components" && tag === "default") {
return require.resolve("@pigment-css/react/exports/styled");
}
return null;
},
};
export default withPigment(nextConfig, pigmentConfig);Note the tagResolver option.
Then I changed your pages/index.js to have this -
import { SomeStyledComponent } from "../styles";
const DestinationsSection = () => {
return (
<div>
test
<SomeStyledComponent>Hello</SomeStyledComponent>
</div>
);
};
aleksakojadinovic
danLDev
oliviertassinari
Steps to reproduce
Test by visiting the homepage of this minimal Next.js application https://github.com/aleksakojadinovic/pigment-sc-reproduction/
Current behavior
When using both pigment css and styled-components in a Next.js app with pages router, an error regarding the styled component you defined occurs in some scenarios. In my case I created a styled component from h3 and imported it into a component that uses pigment styling as well, and this is the error:
I would assume this has something to do with transpilation - pigment picks up components styled with styled-components as well and attempts to transpile their code, which inevitably fails.
Expected behavior
Ideally pigment should not interfere with components created with styled-components. This would enable incremental adoption.
Context
I apologize in advance if this is not supposed to be considered a bug. I have searched the docs and have not managed to find out whether incremental/gradual adoption of pigment alongside styled-components is something you wish to support at all. However that's the situation that I'm in - I have a huge Next.js app very strongly coupled with styled-components that I wish to migrate to pigment, and doing it all at once is impossible. I've managed to isolate the problematic code into a minimal example, but I suppose many more cases would fail.
Your environment
``` System: OS: macOS 14.3.1 Binaries: Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm pnpm: Not Found Browsers: Chrome: 126.0.6478.127 Edge: Not Found Safari: 17.3.1 npmPackages: @emotion/react: 11.11.4 @emotion/styled: 11.11.5 @mui/private-theming: 6.0.0-dev.20240529-082515-213b5e33ab @mui/styled-engine: 6.0.0-dev.20240529-082515-213b5e33ab @mui/system: 6.0.0-dev.240424162023-9968b4889d @mui/types: 7.2.15 @mui/utils: 6.0.0-dev.20240529-082515-213b5e33ab react: ^18 => 18.3.1 react-dom: ^18 => 18.3.1 styled-components: ^6.1.11 => 6.1.11 typescript: 5.5.3 ```npx @mui/envinfoSearch keywords: styled-components incremental-adoption