fix: importSource should pass for babel plugin

.yarnrc.yml

@@ -2,22 +2,24 @@ yarnPath: .yarn/releases/yarn-3.6.3.cjs
 nodeLinker: pnpm
 packageExtensions:
   {
-    "@stylexjs/babel-plugin@*":
+    '@stylexjs/babel-plugin@*':
       {
         dependencies:
           {
-            "@babel/types": "^7.15.6",
-            "postcss-value-parser": "^4.2.0",
-            "invariant": "^2.2.4",
-            "styleq": "^0.1.3",
-            "@babel/traverse": "^7.0.0-0",
+            '@babel/types': '^7.15.6',
+            'postcss-value-parser': '^4.2.0',
+            'invariant': '^2.2.4',
+            'styleq': '^0.1.3',
+            '@babel/traverse': '^7.0.0-0',
           },
       },
-    "vite-imagetools@*": { dependencies: { "sharp": "0.32.6" } },
-    "@remix-run/dev@*": { dependencies: { "isbot": "^3.6.8" } },
-    "unplugin-vue-router@*":
-      { dependencies: { "@vue/compiler-sfc": "^3.3.13" } },
-    "@nuxt/vite-builder@*": { dependencies: { "ofetch": "^1.3.3" } },
-    "waku@*":
-      { dependencies: { "react-dom": "18.3.0-canary-1d5667a12-20240102" } },
+    'vite-imagetools@*': { dependencies: { 'sharp': '0.32.6' } },
+    '@remix-run/dev@*': { dependencies: { 'isbot': '^3.6.8' } },
+    'unplugin-vue-router@*':
+      { dependencies: { '@vue/compiler-sfc': '^3.3.13' } },
+    '@nuxt/vite-builder@*': { dependencies: { 'ofetch': '^1.3.3' } },
+    'waku@*':
+      { dependencies: { 'react-dom': '18.3.0-canary-1d5667a12-20240102' } },
+    'react-strict-dom@*':
+      { dependencies: { '@babel/helper-module-imports': '^7.22.15' } },
   }

examples/vite-react-demo/package.json

@@ -1,5 +1,6 @@
 {
   "name": "vite-react-demo",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -12,6 +13,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-strict-dom": "^0.0.4",
     "vite": "^5.0.10",
     "vite-plugin-stylex-dev": "workspace:*",
     "vite-tsconfig-paths": "^4.2.3"

examples/vite-react-demo/src/app.tsx

@@ -1,6 +1,33 @@
+import { css, html } from 'react-strict-dom'
+import { Fragment } from 'react'
 import Button from './button'
 
+const egStyles = css.create({
+  container: { borderTopWidth: 1 },
+  h1: { padding: 10, backgroundColor: '#eee' },
+  content: { padding: 10 },
+  div: {
+    paddingBottom: 50,
+    paddingTop: 50,
+    backgroundColor: 'white'
+  }
+})
+
+function ExampleBlock() {
+  return (
+    <html.div style={egStyles.container}>
+      <html.h1 style={egStyles.h1}>react-strict-dom</html.h1>
+      <html.div style={egStyles.content}>Hello World</html.div>
+    </html.div>
+  )
+}
+
 function App() {
-  return <Button>123</Button>
+  return (
+    <Fragment>
+      <Button>123</Button>
+      <ExampleBlock />
+    </Fragment>
+  )
 }
 export { App }

examples/vite-react-demo/vite.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tsconfigPaths from 'vite-tsconfig-paths'
 import { stylexPlugin } from 'vite-plugin-stylex-dev'
+import rsdPlugin from 'react-strict-dom/babel'
 
 export default defineConfig({
   // resolve: {
@@ -11,5 +12,17 @@ export default defineConfig({
   //     '~': path.join(__dirname, 'themes')
   //   }
   // },
-  plugins: [tsconfigPaths({ root: __dirname }), react(), stylexPlugin()]
+  plugins: [tsconfigPaths({ root: __dirname }), react(), 
+    stylexPlugin(
+      { babelConfig: {
+        plugins: [rsdPlugin]
+      },
+      importSources: [
+        '@stylexjs/stylex',
+        'stylex',
+        { from: 'react-strict-dom', as: 'css' }
+      ],
+      styleResolution: 'property-specificity'
+      }
+    )]
 })

src/index.ts

@@ -159,6 +159,9 @@ export function stylexPlugin(opts: StylexPluginOptions = {}): Plugin {
         options.unstable_moduleResolution = { type: 'commonJS', rootDir: searchForWorkspaceRoot(conf.root) }
       }
       isProd = conf.mode === 'production' || conf.env.mode === 'production'
+      if (Array.isArray(optimizedDeps)) {
+        optimizedDeps.push(...importSources.map(s => typeof s === 'object' ? s.from : s))
+      }
       if (!isProd) {
         conf.optimizeDeps.exclude = [...optimizedDeps, ...(conf.optimizeDeps.exclude ?? []), '@stylexjs/open-props']
       }
@@ -199,7 +202,7 @@ export function stylexPlugin(opts: StylexPluginOptions = {}): Plugin {
       id = patchOptmizeDepsExcludeId(id)
       inputCode = await patchAlias(inputCode, id, this)
       // stylex v0.5.0 respected dev
-      const result = await transformStylex(inputCode, id, { dev: !isProd, plugins, presets, ...options })
+      const result = await transformStylex(inputCode, id, { dev: !isProd, plugins, presets, importSources, ...options })
       if (!result) return
       if ('stylex' in result.metadata) {
         const rules = result.metadata.stylex as Rule[]

yarn.lock

@@ -5538,7 +5538,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-mediaquery@npm:^0.1.2":
+"css-mediaquery@npm:0.1.2, css-mediaquery@npm:^0.1.2":
   version: 0.1.2
   resolution: "css-mediaquery@npm:0.1.2"
   checksum: 8e26ae52d8aaaa71893f82fc485363ff0fab494b7d3b3464572aaed50714b8b538d33dbdaa69f0c02cf7f80d1f4d9a77519306c0492223ce91b3987475031a69
@@ -13098,6 +13098,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-strict-dom@npm:^0.0.4":
+  version: 0.0.4
+  resolution: "react-strict-dom@npm:0.0.4"
+  dependencies:
+    "@stylexjs/stylex": 0.5.1
+    css-mediaquery: 0.1.2
+    postcss-value-parser: ^4.1.0
+  peerDependencies:
+    react: ">=18.2.0"
+    react-dom: ">=18.2.0"
+    react-native: ">=0.71.0"
+  checksum: 20824d6ee94f31600224407858751b84f0038ce409b5b242994138d461d72a3d404e2f48d501f013ba014ab57faa18a81d794f4d6da5be839a4d0b77ef48eb1c
+  languageName: node
+  linkType: hard
+
 "react@npm:18.3.0-canary-c5b937576-20231219":
   version: 18.3.0-canary-c5b937576-20231219
   resolution: "react@npm:18.3.0-canary-c5b937576-20231219"
@@ -16121,6 +16136,7 @@ __metadata:
     "@vitejs/plugin-react": ^4.2.1
     react: ^18.2.0
     react-dom: ^18.2.0
+    react-strict-dom: ^0.0.4
     vite: ^5.0.10
     vite-plugin-stylex-dev: "workspace:*"
     vite-tsconfig-paths: ^4.2.3