From bf363e04869807b40eda33dfb740fdac4e84e089 Mon Sep 17 00:00:00 2001
From: kanno <812137533@qq.com>
Date: Fri, 29 Mar 2024 16:48:23 +0800
Subject: [PATCH] fix: importSource should pass for babel plugin
---
.yarnrc.yml | 28 +++++++++++++-----------
examples/vite-react-demo/package.json | 2 ++
examples/vite-react-demo/src/app.tsx | 29 ++++++++++++++++++++++++-
examples/vite-react-demo/vite.config.ts | 15 ++++++++++++-
src/index.ts | 5 ++++-
yarn.lock | 18 ++++++++++++++-
6 files changed, 80 insertions(+), 17 deletions(-)
diff --git a/.yarnrc.yml b/.yarnrc.yml
index 9b72238..0f563b9 100644
--- a/.yarnrc.yml
+++ b/.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' } },
}
diff --git a/examples/vite-react-demo/package.json b/examples/vite-react-demo/package.json
index fa87610..0b6ef84 100644
--- a/examples/vite-react-demo/package.json
+++ b/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"
diff --git a/examples/vite-react-demo/src/app.tsx b/examples/vite-react-demo/src/app.tsx
index 9949d63..a8e13ac 100644
--- a/examples/vite-react-demo/src/app.tsx
+++ b/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 (
+
+ react-strict-dom
+ Hello World
+
+ )
+}
+
function App() {
- return
+ return (
+
+
+
+
+ )
}
export { App }
diff --git a/examples/vite-react-demo/vite.config.ts b/examples/vite-react-demo/vite.config.ts
index a4bcdf7..d0942c2 100644
--- a/examples/vite-react-demo/vite.config.ts
+++ b/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'
+ }
+ )]
})
diff --git a/src/index.ts b/src/index.ts
index 40ae6ac..bb609b3 100644
--- a/src/index.ts
+++ b/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[]
diff --git a/yarn.lock b/yarn.lock
index 6733466..664d2a4 100644
--- a/yarn.lock
+++ b/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