From 061bb87e8e2416c9bf4348e3fb75cc5a042fa680 Mon Sep 17 00:00:00 2001
From: Tsubasa Sakai <javascripter@tsukkun.net>
Date: Sat, 17 May 2025 00:13:36 +0900
Subject: [PATCH] [postcss-plugin] Implement custom importSources to skip
 compilation

---
 packages/@stylexjs/postcss-plugin/README.md          | 11 +++++++++++
 packages/@stylexjs/postcss-plugin/src/builder.js     |  5 +++--
 packages/@stylexjs/postcss-plugin/src/bundler.js     | 12 ++++++++++--
 packages/@stylexjs/postcss-plugin/src/index.js       |  2 ++
 .../docs/docs/api/configuration/postcss-plugin.mdx   | 11 +++++++++++
 5 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/packages/@stylexjs/postcss-plugin/README.md b/packages/@stylexjs/postcss-plugin/README.md
index 7ac907fee..f8743603d 100644
--- a/packages/@stylexjs/postcss-plugin/README.md
+++ b/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.
diff --git a/packages/@stylexjs/postcss-plugin/src/builder.js b/packages/@stylexjs/postcss-plugin/src/builder.js
index 5a7155ac6..b2eee9365 100644
--- a/packages/@stylexjs/postcss-plugin/src/builder.js
+++ b/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, {
diff --git a/packages/@stylexjs/postcss-plugin/src/bundler.js b/packages/@stylexjs/postcss-plugin/src/bundler.js
index d4d42ba2a..bfaff003c 100644
--- a/packages/@stylexjs/postcss-plugin/src/bundler.js
+++ b/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,
diff --git a/packages/@stylexjs/postcss-plugin/src/index.js b/packages/@stylexjs/postcss-plugin/src/index.js
index 76e131504..67c7f9315 100644
--- a/packages/@stylexjs/postcss-plugin/src/index.js
+++ b/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,
         });
 
diff --git a/packages/docs/docs/api/configuration/postcss-plugin.mdx b/packages/docs/docs/api/configuration/postcss-plugin.mdx
index a1ed815b0..aa2458e02 100644
--- a/packages/docs/docs/api/configuration/postcss-plugin.mdx
+++ b/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