Skip to content

Add react-strict-dom/postcss-plugin#282

Closed
javascripter wants to merge 1 commit into
react:mainfrom
javascripter:postcss-plugin
Closed

Add react-strict-dom/postcss-plugin#282
javascripter wants to merge 1 commit into
react:mainfrom
javascripter:postcss-plugin

Conversation

@javascripter

@javascripter javascripter commented Mar 12, 2025

Copy link
Copy Markdown
Contributor

Update

Continuing on #308


Why

#281 (comment)

Based on the discussion, I'm moving postcss-react-strict-dom to the official repo to make it easier for maintainers to make changes.

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

I initially tried to re-export the postcss plugin as described here, but found that I needed to make modifications to the internals of the plugin, so I copied the source code from StyleX repository and made necessary modifications to make it work with RSD instead.

(Changes from StyleX PostCSS Plugin will be in PR comments)

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 original, right is this branch

Screenshot 2025-03-12 at 18 24 18

@javascripter javascripter force-pushed the postcss-plugin branch 2 times, most recently from af8ece6 to 0fb8332 Compare March 12, 2025 09:27
@@ -0,0 +1,182 @@
/**

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Unchanged from @stylexjs/postcss-plugin

// Determines if the source code should be transformed based on the presence of StyleX/RSD imports.
function shouldTransform(sourceCode) {
return (
sourceCode.includes('stylex') || sourceCode.includes('react-strict-dom')

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Added react-strict-dom check

*/

const babel = require('@babel/core');
const reactStrictBabelPreset = require('react-strict-dom/babel-preset');

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Replaced StyleX Plugin with RSD Babel Preset to match behaviors exactly as described in docs

filename: id,
caller: {
name: 'react-strict-dom/postcss-plugin',
platform: 'web',

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

platform: 'web' is necessary for RSD Preset to process source code with StyleX

function bundle({ useCSSLayers }) {
const rules = Array.from(styleXRulesMap.values()).flat();

const css = reactStrictBabelPreset.generateStyles(rules);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Uses RSD Babel Preset here as well

}) => {
include = [
// Include the React Strict DOM package's source files by default
require.resolve('react-strict-dom'),

@javascripter javascripter Mar 12, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Include react-strict-dom by default, same as postcss-react-strict-dom

@javascripter javascripter marked this pull request as ready for review March 12, 2025 09:32
@javascripter javascripter requested a review from necolas as a code owner March 12, 2025 09:32
@javascripter javascripter marked this pull request as draft May 17, 2025 08:22
@javascripter javascripter deleted the postcss-plugin branch May 17, 2025 08:33
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