[postcss-plugin] Implement custom importSources for React Strict DOM compatibility

packages/@stylexjs/postcss-plugin/README.md

@@ -135,3 +135,14 @@ useCSSLayers: boolean; // Default: false
 
 Enabling this option switches Stylex from using `:not(#\#)` to using `@layers`
 for handling CSS specificity.
+
+---
+
+### importSources
+
+```js
+importSources: Array<string | { from: string, as: string }>; // Default: ['@stylexjs/stylex', 'stylex']
+```
+
+Possible strings where you can import stylex from. Files that do not match the
+import sources may be skipped from being processed to speed up compilation.

packages/@stylexjs/postcss-plugin/src/builder.js

@@ -104,7 +104,8 @@ function createBuilder() {
 
   // Transforms the included files, bundles the CSS, and returns the result.
   async function build({ shouldSkipTransformError }) {
-    const { cwd, babelConfig, useCSSLayers, isDev } = getConfig();
+    const { cwd, babelConfig, useCSSLayers, importSources, isDev } =
+      getConfig();
 
     const files = getFiles();
     const filesToTransform = [];
@@ -140,7 +141,7 @@ function createBuilder() {
       filesToTransform.map((file) => {
         const filePath = path.resolve(cwd, file);
         const contents = fs.readFileSync(filePath, 'utf-8');
-        if (!bundler.shouldTransform(contents)) {
+        if (!bundler.shouldTransform(contents, { importSources })) {
           return;
         }
         return bundler.transform(filePath, contents, babelConfig, {

packages/@stylexjs/postcss-plugin/src/bundler.js

@@ -13,8 +13,15 @@ module.exports = function createBundler() {
   const styleXRulesMap = new Map();
 
   // Determines if the source code should be transformed based on the presence of StyleX imports.
-  function shouldTransform(sourceCode) {
-    return sourceCode.includes('stylex');
+  function shouldTransform(sourceCode, options) {
+    const { importSources } = options;
+
+    return importSources.some((importSource) => {
+      if (typeof importSource === 'string') {
+        return sourceCode.includes(importSource);
+      }
+      return importSource.includes(sourceCode.from);
+    });
   }
 
   // Transforms the source code using Babel, extracting StyleX rules and storing them.
@@ -25,6 +32,7 @@ module.exports = function createBundler() {
         filename: id,
         caller: {
           name: '@stylexjs/postcss-plugin',
+          platform: 'web',
           isDev,
         },
         ...babelConfig,

packages/@stylexjs/postcss-plugin/src/index.js

@@ -22,6 +22,7 @@ const plugin = ({
   include,
   exclude,
   useCSSLayers = false,
+  importSources = ['@stylexjs/stylex', 'stylex'],
 }) => {
   exclude = [
     // Exclude type declaration files by default because it never contains any CSS rules.
@@ -49,6 +50,7 @@ const plugin = ({
           cwd,
           babelConfig,
           useCSSLayers,
+          importSources,
           isDev,
         });
 

packages/docs/docs/api/configuration/postcss-plugin.mdx

@@ -41,6 +41,17 @@ Array of paths or glob patterns to exclude from compilation. Paths in `exclude`
 
 ---
 
+## importSources
+
+```js
+importSources: Array<string | { from: string, as: string }>; // Default: ['@stylexjs/stylex', 'stylex']
+```
+
+Possible strings where you can import stylex from. Files that do not match the
+import sources may be skipped from being processed to speed up compilation.
+
+---
+
 ### include
 
 ```js