fix: create a temp soultion for open-props

nonzzz · Dec 25, 2023 · be97459 · be97459
1 parent 37ccab7
commit be97459
Show file tree

Hide file tree

Showing 15 changed files with 263 additions and 4 deletions.
diff --git a/e2e/e2e.spec.ts b/e2e/e2e.spec.ts
@@ -75,3 +75,20 @@ test('fixture vue ssr', async (t) => {
   }, [windowHandle, elementHandle])
   t.is(blue, 'rgb(0, 0, 255)', 'tap button and text color should be blue')
 })
+
+test('fixture open-props', async (t) => {
+  const { page } = await createE2EServer('open-props')
+  await page.waitForSelector('div[role="button"]')
+  const elementHandle = await page.$('div[role="button"]')
+  const windowHandle = await page.evaluateHandle(() => Promise.resolve(window))
+  const red = await page.evaluate(([window, el]) => {
+    return (window as Window).getComputedStyle(el as Element).color
+  }, [windowHandle, elementHandle])
+  t.is(red, 'rgb(255, 245, 245)', 'first load spa button text color should be red')
+  await elementHandle.click()
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+  const blue = await page.evaluate(([window, el]) => {
+    return (window as Window).getComputedStyle(el as Element).color
+  }, [windowHandle, elementHandle])
+  t.is(blue, 'rgb(231, 245, 255)', 'tap button and text color should be blue')
+})
diff --git a/e2e/fixtures/open-props/app.tsx b/e2e/fixtures/open-props/app.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { useState } from 'react'
+import * as stylex from '@stylexjs/stylex'
+
+import { colors } from '@stylexjs/open-props/lib/colors.stylex'
+
+const styles = stylex.create({
+  text: { fontSize: '20px', cursor: 'pointer' },
+  blue: {
+    color: colors.blue0
+  },
+  red: {
+    color: colors.red0
+  }
+})
+
+function App() {
+  const [color, setColor] = useState('red')
+
+  const handleClick = () => {
+    setColor(pre => pre === 'red' ? 'blue' : 'red')
+  }
+  return (
+    <div>
+      <div role="button" onClick={handleClick} className={stylex.props(styles.text, color === 'red' ? styles.red : styles.blue).className}>Action</div>
+    </div>
+  )
+}
+
+export { App }
diff --git a/e2e/fixtures/open-props/index.html b/e2e/fixtures/open-props/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="./main.tsx"></script>
+</body>
+</html>
diff --git a/e2e/fixtures/open-props/main.tsx b/e2e/fixtures/open-props/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { App } from './app'
+
+ReactDOM.createRoot(document.querySelector('#app')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/e2e/fixtures/open-props/package.json b/e2e/fixtures/open-props/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "vite-plugin-stylex-e2e-open-props",
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^5.0.10",
+    "vite-plugin-stylex-dev": "workspace:*"
+  },
+  "dependencies": {
+    "@stylexjs/open-props": "^0.3.0"
+  }
+}
diff --git a/e2e/fixtures/open-props/tsconfig.json b/e2e/fixtures/open-props/tsconfig.json
@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "esModuleInterop": true,
+    }
+}
diff --git a/e2e/fixtures/open-props/vite.config.mts b/e2e/fixtures/open-props/vite.config.mts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { stylexPlugin } from 'vite-plugin-stylex-dev'
+
+export default defineConfig({
+  plugins: [react(), stylexPlugin()]
+})
diff --git a/examples/vite-react-demo/index.html b/examples/vite-react-demo/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.tsx"></script>
+</body>
+</html>
diff --git a/examples/vite-react-demo/package.json b/examples/vite-react-demo/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "vite-react-demo",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^5.0.10",
+    "vite-plugin-stylex-dev": "workspace:*"
+  },
+  "dependencies": {
+    "@stylexjs/open-props": "^0.3.0"
+  }
+}
diff --git a/examples/vite-react-demo/src/app.tsx b/examples/vite-react-demo/src/app.tsx
@@ -0,0 +1,15 @@
+import * as stylex from '@stylexjs/stylex'
+
+import { colors } from '@stylexjs/open-props/lib/colors.stylex'
+
+const styles = stylex.create({
+  base: {
+    color: colors.gray0
+  }
+})
+
+function App() {
+  return <button type="button" {...stylex.props(styles.base)}>Click me!</button>
+}
+
+export { App }
diff --git a/examples/vite-react-demo/src/main.tsx b/examples/vite-react-demo/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { App } from './app'
+
+ReactDOM.createRoot(document.querySelector('#app')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/examples/vite-react-demo/tsconfig.json b/examples/vite-react-demo/tsconfig.json
@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "esModuleInterop": true,
+    }
+}
diff --git a/examples/vite-react-demo/vite.config.ts b/examples/vite-react-demo/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { stylexPlugin } from 'vite-plugin-stylex-dev'
+
+export default defineConfig({
+  plugins: [react(), stylexPlugin()]
+})
diff --git a/src/index.ts b/src/index.ts
@@ -82,6 +82,15 @@ function createSSRMiddleware(processStylexRules: () => string): NextHandleFuncti
   }
 }
 
+function patchOptmizeDepsExcludeId(id: string) {
+  const { ext, dir, name } = path.parse(id)
+  if (ext.includes('?')) {
+    const extension = ext.split('?')[0]
+    return path.join(dir, name + extension)
+  }
+  return id
+}
+
 // TODO
 export function stylexPlugin(opts: StylexPluginOptions = {}): Plugin {
   const {
@@ -138,6 +147,9 @@ export function stylexPlugin(opts: StylexPluginOptions = {}): Plugin {
     },
     configResolved(conf) {
       isProd = conf.mode === 'production' || conf.env.mode === 'production'
+      if (!isProd) {
+        conf.optimizeDeps.exclude = ['@stylexjs/open-props']
+      }
       viteCSSPlugins.push(...conf.plugins.filter(p => VITE_INTERNAL_CSS_PLUGIN_NAMES.includes(p.name)))
       viteCSSPlugins.sort((a, b) => a.name === 'vite:css' && b.name === 'vite:css-post' ? -1 : 1)
     },
@@ -152,6 +164,8 @@ export function stylexPlugin(opts: StylexPluginOptions = {}): Plugin {
     async transform(inputCode, id) {
       if (!filter(id)) return
       if (!stylexImports.some((importName) => inputCode.includes(importName))) return
+      // TODO
+      id = patchOptmizeDepsExcludeId(id)
       const result = await transformWithStylex(inputCode, id, { isProduction: isProd, presets, plugins, unstable_moduleResolution, ...options })
       if (!result) return
       if ('stylex' in result.metadata) {

diff --git a/yarn.lock b/yarn.lock
@@ -46,7 +46,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.15.5, @babel/core@npm:^7.20.7, @babel/core@npm:^7.21.8, @babel/core@npm:^7.22.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.3":
+"@babel/core@npm:^7.15.5, @babel/core@npm:^7.20.7, @babel/core@npm:^7.21.8, @babel/core@npm:^7.22.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.3, @babel/core@npm:^7.23.5":
   version: 7.23.6
   resolution: "@babel/core@npm:7.23.6"
   dependencies:
@@ -384,6 +384,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx-self@npm:^7.23.3":
+  version: 7.23.3
+  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.23.3"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 882bf56bc932d015c2d83214133939ddcf342e5bcafa21f1a93b19f2e052145115e1e0351730897fd66e5f67cad7875b8a8d81ceb12b6e2a886ad0102cb4eb1f
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-react-jsx-source@npm:^7.23.3":
+  version: 7.23.3
+  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.23.3"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 92287fb797e522d99bdc77eaa573ce79ff0ad9f1cf4e7df374645e28e51dce0adad129f6f075430b129b5bac8dad843f65021970e12e992d6d6671f0d65bb1e0
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-typescript@npm:^7.22.15, @babel/plugin-transform-typescript@npm:^7.23.3":
   version: 7.23.6
   resolution: "@babel/plugin-transform-typescript@npm:7.23.6"
@@ -2325,6 +2347,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@stylexjs/open-props@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "@stylexjs/open-props@npm:0.3.0"
+  dependencies:
+    css-mediaquery: ^0.1.2
+    invariant: ^2.2.4
+    styleq: 0.1.3
+    utility-types: ^3.10.0
+  checksum: a09a90a32c7a409e3dd242f11b04fee238d3adf40021555e264a96b3b1ab39e83836ba3691c7311b2cb0e04870d8085469d9863c196eeebd787f39576622e081
+  languageName: node
+  linkType: hard
+
 "@stylexjs/shared@npm:0.3.0":
   version: 0.3.0
   resolution: "@stylexjs/shared@npm:0.3.0"
@@ -2655,7 +2689,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.2.7":
+"@types/react-dom@npm:^18.2.18, @types/react-dom@npm:^18.2.7":
   version: 18.2.18
   resolution: "@types/react-dom@npm:18.2.18"
   dependencies:
@@ -2664,7 +2698,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:^18.2.20":
+"@types/react@npm:*, @types/react@npm:^18.2.20, @types/react@npm:^18.2.45":
   version: 18.2.45
   resolution: "@types/react@npm:18.2.45"
   dependencies:
@@ -2990,6 +3024,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitejs/plugin-react@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "@vitejs/plugin-react@npm:4.2.1"
+  dependencies:
+    "@babel/core": ^7.23.5
+    "@babel/plugin-transform-react-jsx-self": ^7.23.3
+    "@babel/plugin-transform-react-jsx-source": ^7.23.3
+    "@types/babel__core": ^7.20.5
+    react-refresh: ^0.14.0
+  peerDependencies:
+    vite: ^4.2.0 || ^5.0.0
+  checksum: 08d227d27ff2304e395e746bd2d4b5fee40587f69d7e2fcd6beb7d91163c1f1dc26d843bc48e2ffb8f38c6b8a1b9445fb07840e3dcc841f97b56bbb8205346aa
+  languageName: node
+  linkType: hard
+
 "@vitejs/plugin-vue-jsx@npm:^3.1.0":
   version: 3.1.0
   resolution: "@vitejs/plugin-vue-jsx@npm:3.1.0"
@@ -13649,6 +13698,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"vite-plugin-stylex-e2e-open-props@workspace:e2e/fixtures/open-props":
+  version: 0.0.0-use.local
+  resolution: "vite-plugin-stylex-e2e-open-props@workspace:e2e/fixtures/open-props"
+  dependencies:
+    "@stylexjs/open-props": ^0.3.0
+    "@types/react": ^18.2.45
+    "@types/react-dom": ^18.2.18
+    "@vitejs/plugin-react": ^4.2.1
+    react: ^18.2.0
+    react-dom: ^18.2.0
+    vite: ^5.0.10
+    vite-plugin-stylex-dev: "workspace:*"
+  languageName: unknown
+  linkType: soft
+
 "vite-plugin-stylex-e2e-qwik@workspace:e2e/fixtures/qwik":
   version: 0.0.0-use.local
   resolution: "vite-plugin-stylex-e2e-qwik@workspace:e2e/fixtures/qwik"
@@ -13726,6 +13790,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-react-demo@workspace:examples/vite-react-demo":
+  version: 0.0.0-use.local
+  resolution: "vite-react-demo@workspace:examples/vite-react-demo"
+  dependencies:
+    "@stylexjs/open-props": ^0.3.0
+    "@types/react": ^18.2.45
+    "@types/react-dom": ^18.2.18
+    "@vitejs/plugin-react": ^4.2.1
+    react: ^18.2.0
+    react-dom: ^18.2.0
+    vite: ^5.0.10
+    vite-plugin-stylex-dev: "workspace:*"
+  languageName: unknown
+  linkType: soft
+
 "vite-tsconfig-paths@npm:^4.2.1":
   version: 4.2.2
   resolution: "vite-tsconfig-paths@npm:4.2.2"
@@ -13782,7 +13861,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^5.0.0, vite@npm:^5.0.6":
+"vite@npm:^5.0.0, vite@npm:^5.0.10, vite@npm:^5.0.6":
   version: 5.0.10
   resolution: "vite@npm:5.0.10"
   dependencies: