Skip to content

Add react-strict-dom/postcss-plugin based on @stylexjs/postcss-plugin #308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

javascripter
Copy link
Contributor

@javascripter javascripter commented May 17, 2025

Why

#281 (comment)

This PR upstreams postcss-react-strict-dom to the official repo to make it easier for maintainers to make changes.

I added RSD compatibility to @stylexjs/postcss-plugin in this PR, so this adds react-strict-dom/postcss-plugin that re-exports the StyleX PostCSS Plugin with the required configuration for RSD consumers.

How

  • Added PostCSS Plugin to packages/react-strict-dom/postcss/plugin.js
  • Export the plugin as react-strict-dom/postcss-plugin in package.json
  • Updated apps/examples to use the official plugin and removed postcss-react-strict-dom dependency
  • Updated docs to use the official plugin

Test Plan

  • Run cd apps/example && npm run dev:web both from the original repo and this branch and compare side-by-side to make sure output matches

Left is this branch, right is original
Screenshot 2025-05-20 at 15 12 39

babelConfig,
include,
exclude,
useCSSLayers: false,
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
useCSSLayers: false,
useCSSLayers: true,

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It seems Expo Web doesn't support CSS Layers. If we enable useCSS Layers and run npm run dev:web, it shows the below warning.
I disabled CSS layers for now:
b455d43

| Warning: Unknown at rule: @property (src/app/stylex.css:16:10):
|   14 |
|   15 |  @layer priority1{
| > 16 | @property --backgroundColor { syntax: "*"; inherits: false;}
|      |          ^
|   17 | @property --opacity { syntax: "*"; inherits: false;}
|   18 | @property --transform { syntax: "*"; inherits: false;}
|   19 | :root, .xxw3bu5{--primary100-x1ud21w4:black;--primary200-x19lv8z8:white;}
| Warning: Unknown at rule: @property (src/app/stylex.css:17:10):
|   15 |  @layer priority1{
|   16 | @property --backgroundColor { syntax: "*"; inherits: false;}
| > 17 | @property --opacity { syntax: "*"; inherits: false;}

Copy link
Contributor

@necolas necolas May 21, 2025

Choose a reason for hiding this comment

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

Looks like it might be a StyleX bug. Don't think you're allowed to nest @property inside @layer in CSS. (Chrome treats this as valid AFAICT.)

Maybe it's a CSS validator in Expo that doesn't allow it within layers?

@javascripter javascripter force-pushed the postcss-plugin-stylex branch from c15ca25 to b455d43 Compare May 20, 2025 06:11
@necolas
Copy link
Contributor

necolas commented May 21, 2025

#311 updates StyleX to 0.13

@javascripter javascripter force-pushed the postcss-plugin-stylex branch from 6f876b3 to f68164a Compare May 29, 2025 07:16
@javascripter
Copy link
Contributor Author

javascripter commented May 29, 2025

Rebased from main and updated to use useCSSLayers: true. Waiting for facebook/stylex#1071 to land so CSS layer warnings will disappear

@necolas
Copy link
Contributor

necolas commented May 30, 2025

This PR aims to avoid the Expo warnings facebook/stylex#1087

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.

3 participants