Skip to content

[Atoms][Experimental] Compile runtime Document classNames into CSS - #564

Open
MenKNas wants to merge 3 commits into
release/betas/atomsfrom
feature/JSS-9810-atoms-styling
Open

[Atoms][Experimental] Compile runtime Document classNames into CSS#564
MenKNas wants to merge 3 commits into
release/betas/atomsfrom
feature/JSS-9810-atoms-styling

Conversation

@MenKNas

@MenKNas MenKNas commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Description / Motivation

This PR implements runtime CSS compilation for Atoms Document classNames based on Nick’s POC (#558 / 5b48f34).

Tailwind can’t see classes that only exist in MMS Document JSON at build time, so styles never ship. This compiles those classes at runtime and injects the CSS for Design Library editing and production RSC rendering.

Defaults to Tailwind, with a pluggable compiler registry for custom setups.

What was added extra beyond the POC:

  • Fixed Tailwind build() candidate accumulation so only current Document classes are in the injected CSS (not stale ones from earlier updates)
  • Wired both App Router starters (instrumentation, compileCssAction, serverExternalPackages)
  • Added caching, clearer missing-compiler/CSS-file DX, and unit coverage for the accumulation fix

Testing Details

  • Unit Test Added
  • Manual Test/Other (Please elaborate)

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

@changeset-bot

changeset-bot Bot commented Jul 22, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 1894db7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@sitecore-content-sdk/core Minor
@sitecore-content-sdk/react Minor
@sitecore-content-sdk/nextjs Minor
create-content-sdk-app Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Comment thread packages/nextjs/tsconfig.json
Comment thread packages/react/src/components/DesignLibrary/StudioComponentServerWrapper.tsx Outdated
Comment thread packages/react/src/atoms/extract-document-classes.ts

@art-alexeyenko art-alexeyenko left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do like how we just keep finding barely-public APIs for these kinds of things. Let's refine some more and bring it to a close.

Comment thread packages/nextjs/src/instrumentation/tailwind-compiler.ts
Comment thread packages/nextjs/src/instrumentation/css-cache.test.ts
Comment thread packages/nextjs/src/instrumentation/css-layers.ts
@MenKNas
MenKNas requested a review from art-alexeyenko July 27, 2026 12:55

@art-alexeyenko art-alexeyenko left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving - let's just add some CSS compilation guides and pointers in Pages Router sample before merge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants