[Updated Jun 3] Next.js codegen now imports project CSS from _app.tsx / app/layout.tsx

muhammad_asim · May 26, 2026, 9:27pm

Next.js codegen now imports project CSS from `_app.tsx` / `app/layout.tsx`

Update 2026-06-03

We’ve re-released the change where Next.js codegen imports your project’s global CSS directly from your root entry file (pages/_app.tsx or app/layout.tsx), available in @plasmicapp/cli 0.1.364 (or later).

A bit of context: we originally shipped this change a little while ago and temporarily reverted it (see the previous announcement) after some users reported that imported (hostless) dependency styles weren’t regenerating correctly. On further investigation this turned out to be a false positive; the change itself was working as intended. The dependency styles simply hadn’t been fully regenerated because the sync was run without the --force and --all-files flags. With those flags, everything regenerates correctly, so we’ve re-released the change.

Announcement

We have an important change rolling out in the next @plasmicapp/cli release that affects Next.js customers using the codegen scheme.

What’s changing

Previously, your project’s css lived in a file like:

components/plasmic/<project>/plasmic.module.css

That file was a CSS Module, scoped per-file. Going forward, that same file is emitted as a non-module global CSS:

components/plasmic/<project>/plasmic.css

Because the project CSS file is now global CSS, Next.js requires it to be imported from a single place; the app’s root entry file:

Pages Router → pages/_app.tsx
App Router → app/layout.tsx

On the next sync, the CLI will add this import for you automatically, but only if one of the root files above already exists in your project. If neither is present (e.g., you’ve renamed _app.tsx or moved app/layout.tsx), you’ll need to add the import yourself. The line looks like:

import "../components/plasmic/<project>/plasmic.css"; // plasmic-import: <projectId>/projectcss

Why Next.js requires this

Next.js enforces a strict rule that non-module global CSS imports are only allowed in the root entry file. Importing global CSS from any other component throws a build error.

This is why the import has to go in _app.tsx (Pages router) or app/layout.tsx (App router) specifically.

What you need to do

Update @plasmicapp/cli to the new version (0.1.364 or later)
Run plasmic sync --force --all-files
These flags are important: they ensure your project and all of its imported dependencies (e.g. hostless projects like antd5) regenerate with the correct styles. A plain plasmic sync may leave dependency CSS files stale.

The CLI will:

Rename plasmic.module.css → plasmic.css (and update plasmic.json).
Add the project global CSS import lines to your root entry file.

Edge cases

If your project doesn’t follow the default Next.js convention (e.g., you renamed pages/_app.tsx to something else, or your app/layout.tsx is missing or lives elsewhere), the CLI may not find your root file. You’ll need to add the import manually.

If you hit anything unexpected, drop a reply on this thread or open an issue. Thanks!

trey_rose · May 27, 2026, 6:27pm

Thank you for this message. We’re currently on ver0.1.362, when following these instructions, the style of our deck is off (sharp vs curved edges, black text vs. stylized/colored fonts, missing icons, etc.). Please advise

muhammad_asim · May 28, 2026, 12:58am

Update: we’ve reverted the Next.js project CSS import change

Following up on the above announcement about moving project CSS

We’ve reverted this change as of @plasmicapp/cli 0.1.363, after an unrelated issue surfaced during rollout.

For now, project CSS will continue to be emitted as before, as a CSS Module (plasmic.module.css).

If you already upgraded and synced (or added the import manually), please undo the migration:

Update @plasmicapp/cli to latest; 0.1.363 (or later).
Run plasmic sync as usual; this regenerates your project CSS as a CSS Module (plasmic.module.css) again and updates plasmic.json.
Manually remove the global CSS import line that was added to your root file (pages/_app.tsx or app/layout.tsx):
```
import "../components/plasmic/<project>/plasmic.css"; // plasmic-import: <projectId>/projectcss
```

You can also delete the leftover plasmic.css file if it’s still there.

If you have never upgraded and synced changes with @plasmicapp/cli@0.1.362 which included this change, no action is needed.

We’ll re-apply this change once the underlying issue is resolved, and we’ll post an update on this thread when it’s back.

Sorry for any inconvenience caused, and thanks for your patience!

Bona · May 28, 2026, 8:09am

Hi Plasmic team,

We followed the rollback instructions from this update, but the project is still broken after syncing with @plasmicapp/cli@0.1.363.

Context:

Next.js App Router project
Codegen setup
@plasmicapp/cli: 0.1.363
@plasmicapp/react-web: 0.2.422
We removed the global project CSS import from app/layout.tsx:
import "../../components/plasmic/supavenue/plasmic.css";
We ran plasmic sync
Project CSS is generated again as plasmic.module.css, as expected

However, the generated PlasmicStyleTokensProvider.tsx seems incorrect for imported projects / hostless packages.

It generates:

import projectcss from "./plasmic.module.css";
import plasmic_antd_5_hostless_css from "../antd_5_hostless/plasmic.module.css";
import plasmic_plasmic_rich_components_css from "../plasmic_rich_components/plasmic.module.css";

const data = {
  base: `${projectcss.plasmic_tokens} ${plasmic_antd_5_hostless_css.plasmic_tokens} ${plasmic_plasmic_rich_components_css.plasmic_tokens}`,
  varianted: []
};

But the imported CSS modules do not export plasmic_tokens. They export project-specific class names, for example:

.plasmic_tokens_ohDidvG9XsCeFumugENU3J
.plasmic_tokens_jkU633o1Cz7HrJdwdxhVHk

As a result, plasmic_antd_5_hostless_css.plasmic_tokens and plasmic_plasmic_rich_components_css.plasmic_tokens are undefined, token classes are not applied, and many styles break locally: colors, font sizes, icons, backgrounds, etc.

We confirmed this by temporarily changing the generated provider to use the actual CSS module exports:

const data = {
  base: `${projectcss.plasmic_tokens} ${plasmic_antd_5_hostless_css.plasmic_tokens_ohDidvG9XsCeFumugENU3J} ${plasmic_plasmic_rich_components_css.plasmic_tokens_jkU633o1Cz7HrJdwdxhVHk}`,
  varianted: []
};

After this change, most styles came back.

So it looks like the rollback to CSS Modules still has a codegen issue in PlasmicStyleTokensProvider.tsx when using imported projects / hostless packages.

Could you please advise on the correct fix or release a CLI patch?

Thanks!

muhammad_asim · May 28, 2026, 12:29pm

Hey @Bona

Can you try –-all-files flag with the sync command?

Bona · May 28, 2026, 12:36pm

Hey! Yes, I already tried running sync with --all-files.

Command used:

pnpm --filter supavenue exec plasmic sync --force --all-files

It regenerated the CSS Modules files, but the generated PlasmicStyleTokensProvider.tsx still contains:

const data = {
base: ${projectcss.plasmic_tokens} ${plasmic_antd_5_hostless_css.plasmic_tokens} ${plasmic_plasmic_rich_components_css.plasmic_tokens},
varianted:
};

The issue remains because the imported CSS modules export project-specific token class names like:

.plasmic_tokens_ohDidvG9XsCeFumugENU3J
.plasmic_tokens_jkU633o1Cz7HrJdwdxhVHk

So plasmic_antd_5_hostless_css.plasmic_tokens and plasmic_plasmic_rich_components_css.plasmic_tokens are still undefined.

muhammad_asim · May 28, 2026, 12:44pm

We are investigating why it didn’t update the imported hostless projects files.

In the meantime, can you try temporarily updating one of the antd_5 tokens in the Project Settings and then run the sync command to verify if it forces the update for antd_5_hostless/plasmic.module.css?

muhammad_asim · May 28, 2026, 1:08pm

I just tried with a sample project having imported antd5 dependency. After the first sync, I changed the antd_5_hostless/plasmic.module.css manually to have a different content. Then running the command npx plasmic sync --all-files --force does fix it by overwriting it to the actual content.

Can you share your Project ID and also the CLI sync command output?

Bona · May 28, 2026, 1:28pm

Project ID: u1Kkyt5iTW1A8uHXTfQ4K9

Imported antd5 hostless project ID: ohDidvG9XsCeFumugENU3J

I ran:

pnpm --filter supavenue exec plasmic sync --force --all-files

The command completed and regenerated the CSS module files. It also printed:

Syncing component: PlasmicGlobalContextsProvider@6.36.0 ['antd5 hostless' ohDidvG9XsCeFumugENU3J >0.0.0]
Syncing module: plasmic@6.36.0 ['antd5 hostless' ohDidvG9XsCeFumugENU3J >0.0.0]
Syncing module: PlasmicStyleTokensProvider@6.36.0 ['antd5 hostless' ohDidvG9XsCeFumugENU3J >0.0.0]
...
IMPORTANT: This project uses external packages and styles. Make sure to import the following global CSS: "slick-carousel/slick/slick-theme.css", "slick-carousel/slick/slick.css"

After sync, the generated provider is still:

import projectcss from "./plasmic.module.css";
import plasmic_antd_5_hostless_css from "../antd_5_hostless/plasmic.module.css";
import plasmic_plasmic_rich_components_css from "../plasmic_rich_components/plasmic.module.css";

const data = {
  base: `${projectcss.plasmic_tokens} ${plasmic_antd_5_hostless_css.plasmic_tokens} ${plasmic_plasmic_rich_components_css.plasmic_tokens}`,
  varianted: []
};

But antd_5_hostless/plasmic.module.css exports:

.plasmic_tokens_ohDidvG9XsCeFumugENU3J {
  ...
}

not plasmic_tokens.

So the command does regenerate antd_5_hostless/plasmic.module.css, but the generated supavenue/PlasmicStyleTokensProvider.tsx still references the wrong CSS module export key.

Bona · May 28, 2026, 1:29pm

The full sync output is 331 lines. I can paste it in a follow-up message if needed.

muhammad_asim · May 28, 2026, 1:34pm

The generated PlasmicStyleTokensProvider.tsx is correct; the imported project module.css antd_5_hostless/plasmic.module.css should generate tokens without the project id suffix like .plasmic_tokens { .. }

Bona · May 28, 2026, 1:47pm

Thanks, that helped.

After running pnpm --filter supavenue exec plasmic sync --force --all-files, the imported hostless CSS files were regenerated correctly.

For example, antd_5_hostless/plasmic.module.css now exports .plasmic_tokens without the project id suffix, so the generated PlasmicStyleTokensProvider.tsx resolves the token classes correctly.

We also removed the stale plasmic.css import from app/layout.tsx, as mentioned in the rollback instructions.

After that, the app builds again and the styles are restored.

Thanks a lot for the help!

muhammad_asim · June 4, 2026, 2:00am

Update: We have re-deployed this change. Please see the updates in the first post. ^