-
Notifications
You must be signed in to change notification settings - Fork 177
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
base: main
Are you sure you want to change the base?
Conversation
babelConfig, | ||
include, | ||
exclude, | ||
useCSSLayers: false, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useCSSLayers: false, | |
useCSSLayers: true, |
There was a problem hiding this comment.
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;}
There was a problem hiding this comment.
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 (Chrome treats this as valid AFAICT.)@property
inside @layer
in CSS.
Maybe it's a CSS validator in Expo that doesn't allow it within layers?
c15ca25
to
b455d43
Compare
#311 updates StyleX to 0.13 |
dcb862c
to
6f876b3
Compare
6f876b3
to
f68164a
Compare
Rebased from main and updated to use |
This PR aims to avoid the Expo warnings facebook/stylex#1087 |
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 addsreact-strict-dom/postcss-plugin
that re-exports the StyleX PostCSS Plugin with the required configuration for RSD consumers.How
packages/react-strict-dom/postcss/plugin.js
react-strict-dom/postcss-plugin
in package.jsonapps/examples
to use the official plugin and removed postcss-react-strict-dom dependencyTest Plan
cd apps/example && npm run dev:web
both from the original repo and this branch and compare side-by-side to make sure output matchesLeft is this branch, right is original
