diff --git a/.gitignore b/.gitignore index 22da892..6939821 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ temp types .tmpl coverage +.DS_Store yarn-debug.log* yarn-error.log* diff --git a/__tests__/plugin.spec.ts b/__tests__/plugin.spec.ts index 3facc56..7e39b90 100644 --- a/__tests__/plugin.spec.ts +++ b/__tests__/plugin.spec.ts @@ -55,8 +55,8 @@ async function mockBuild(taskName: string, opts: BuildOptions = {}) { test('normal suit disable css minify', async (t) => { const { css, js } = await mockBuild('normal', { vite: { build: { cssMinify: false } } }) await sleep() - t.is(css, `.xju2f9n:not(#\\#){color:blue} -.x1e2nbdu:not(#\\#){color:red}`) + t.is(css, `.xju2f9n{color:blue} +.x1e2nbdu{color:red}`) t.is(js, `import * as s from "@stylexjs/stylex"; const e = { blue: { @@ -78,7 +78,7 @@ export { test('normal suite enable css minify', async (t) => { const { css } = await mockBuild('normal') await sleep() - t.is(css, '.xju2f9n:not(#\\#){color:#00f}.x1e2nbdu:not(#\\#){color:red}\n') + t.is(css, '.xju2f9n{color:#00f}.x1e2nbdu{color:red}\n') }) test('pxtorem suite should transform px to rem', async (t) => { @@ -90,5 +90,5 @@ test('pxtorem suite should transform px to rem', async (t) => { } } }) await sleep() - t.is(css, '.x1j61zf2:not(#\\#){font-size:1rem}\n') + t.is(css, '.x1j61zf2{font-size:1rem}\n') }) diff --git a/e2e/e2e.spec.ts b/e2e/e2e.spec.ts index b9026ea..5d2d6f2 100644 --- a/e2e/e2e.spec.ts +++ b/e2e/e2e.spec.ts @@ -92,3 +92,37 @@ test('fixture open-props', async (t) => { }, [windowHandle, elementHandle]) t.is(blue, 'rgb(231, 245, 255)', 'tap button and text color should be blue') }) + +test('fixture tsconfig-paths', async (t) => { + const { page } = await createE2EServer('tsconfig-paths') + 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, 0, 0)', '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(0, 0, 255)', 'tap button and text color should be blue') +}) + +test('fixture path-alias', async (t) => { + const { page } = await createE2EServer('path-alias') + 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, 0, 0)', '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(0, 0, 255)', 'tap button and text color should be blue') +}) diff --git a/e2e/fixtures/open-props/package.json b/e2e/fixtures/open-props/package.json index ef6298a..17e67cf 100644 --- a/e2e/fixtures/open-props/package.json +++ b/e2e/fixtures/open-props/package.json @@ -1,5 +1,8 @@ { "name": "vite-plugin-stylex-e2e-open-props", + "scripts": { + "dev": "vite" + }, "devDependencies": { "@types/react": "^18.2.45", "@types/react-dom": "^18.2.18", @@ -10,6 +13,6 @@ "vite-plugin-stylex-dev": "workspace:*" }, "dependencies": { - "@stylexjs/open-props": "^0.3.0" + "@stylexjs/open-props": "^0.4.1" } } diff --git a/e2e/fixtures/path-alias/index.html b/e2e/fixtures/path-alias/index.html new file mode 100644 index 0000000..5727caa --- /dev/null +++ b/e2e/fixtures/path-alias/index.html @@ -0,0 +1,12 @@ + + + + + + Document + + +
+ + + \ No newline at end of file diff --git a/e2e/fixtures/path-alias/package.json b/e2e/fixtures/path-alias/package.json new file mode 100644 index 0000000..a68e01f --- /dev/null +++ b/e2e/fixtures/path-alias/package.json @@ -0,0 +1,17 @@ +{ + "name": "vite-plugin-stylex-e2e-paths-alias", + "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:*" + } +} diff --git a/e2e/fixtures/path-alias/src/app.tsx b/e2e/fixtures/path-alias/src/app.tsx new file mode 100644 index 0000000..e724b2e --- /dev/null +++ b/e2e/fixtures/path-alias/src/app.tsx @@ -0,0 +1,28 @@ +/* eslint-disable jsx-a11y/interactive-supports-focus */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +import * as stylex from '@stylexjs/stylex' +import { useState } from 'react' + +const styles = stylex.create({ + text: { fontSize: '20px', cursor: 'pointer' }, + blue: { + color: 'blue' + }, + red: { + color: 'red' + } +}) + +export function App() { + const [color, setColor] = useState('red') + + const handleClick = () => { + setColor(pre => pre === 'red' ? 'blue' : 'red') + } + + return ( +
+
Action
+
+ ) +} diff --git a/e2e/fixtures/path-alias/src/main.tsx b/e2e/fixtures/path-alias/src/main.tsx new file mode 100644 index 0000000..1c2a3dd --- /dev/null +++ b/e2e/fixtures/path-alias/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( + + + +) diff --git a/e2e/fixtures/path-alias/tsconfig.json b/e2e/fixtures/path-alias/tsconfig.json new file mode 100644 index 0000000..84cacb1 --- /dev/null +++ b/e2e/fixtures/path-alias/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "jsx": "react-jsx", + "esModuleInterop": true, + "module": "ESNext", + "moduleResolution": "Bundler", + "paths": { + "@/*": ["src/*"], + "~/*":["themes/*"] + } + } +} \ No newline at end of file diff --git a/e2e/fixtures/path-alias/vite.config.mts b/e2e/fixtures/path-alias/vite.config.mts new file mode 100644 index 0000000..c6a264f --- /dev/null +++ b/e2e/fixtures/path-alias/vite.config.mts @@ -0,0 +1,13 @@ +import path from 'path' +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import { stylexPlugin } from 'vite-plugin-stylex-dev' + +export default defineConfig({ + resolve: { + alias: { + '@': path.join(__dirname, 'src') + } + }, + plugins: [react(), stylexPlugin()] +}) diff --git a/e2e/fixtures/tsconfig-paths/index.html b/e2e/fixtures/tsconfig-paths/index.html new file mode 100644 index 0000000..5727caa --- /dev/null +++ b/e2e/fixtures/tsconfig-paths/index.html @@ -0,0 +1,12 @@ + + + + + + Document + + +
+ + + \ No newline at end of file diff --git a/e2e/fixtures/tsconfig-paths/package.json b/e2e/fixtures/tsconfig-paths/package.json new file mode 100644 index 0000000..8557cd0 --- /dev/null +++ b/e2e/fixtures/tsconfig-paths/package.json @@ -0,0 +1,18 @@ +{ + "name": "vite-plugin-stylex-e2e-tsconfig-paths", + "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:*", + "vite-tsconfig-paths": "^4.2.3" + } +} diff --git a/e2e/fixtures/tsconfig-paths/src/app.tsx b/e2e/fixtures/tsconfig-paths/src/app.tsx new file mode 100644 index 0000000..e724b2e --- /dev/null +++ b/e2e/fixtures/tsconfig-paths/src/app.tsx @@ -0,0 +1,28 @@ +/* eslint-disable jsx-a11y/interactive-supports-focus */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +import * as stylex from '@stylexjs/stylex' +import { useState } from 'react' + +const styles = stylex.create({ + text: { fontSize: '20px', cursor: 'pointer' }, + blue: { + color: 'blue' + }, + red: { + color: 'red' + } +}) + +export function App() { + const [color, setColor] = useState('red') + + const handleClick = () => { + setColor(pre => pre === 'red' ? 'blue' : 'red') + } + + return ( +
+
Action
+
+ ) +} diff --git a/e2e/fixtures/tsconfig-paths/src/main.tsx b/e2e/fixtures/tsconfig-paths/src/main.tsx new file mode 100644 index 0000000..1c2a3dd --- /dev/null +++ b/e2e/fixtures/tsconfig-paths/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( + + + +) diff --git a/e2e/fixtures/tsconfig-paths/tsconfig.json b/e2e/fixtures/tsconfig-paths/tsconfig.json new file mode 100644 index 0000000..84cacb1 --- /dev/null +++ b/e2e/fixtures/tsconfig-paths/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "jsx": "react-jsx", + "esModuleInterop": true, + "module": "ESNext", + "moduleResolution": "Bundler", + "paths": { + "@/*": ["src/*"], + "~/*":["themes/*"] + } + } +} \ No newline at end of file diff --git a/e2e/fixtures/tsconfig-paths/vite.config.mts b/e2e/fixtures/tsconfig-paths/vite.config.mts new file mode 100644 index 0000000..e58e4d2 --- /dev/null +++ b/e2e/fixtures/tsconfig-paths/vite.config.mts @@ -0,0 +1,9 @@ +// import path from 'path' +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import tsconfigPaths from 'vite-tsconfig-paths' +import { stylexPlugin } from 'vite-plugin-stylex-dev' + +export default defineConfig({ + plugins: [tsconfigPaths({ root: __dirname }), react(), stylexPlugin()] +}) diff --git a/e2e/fixtures/vue-ssr/server.ts b/e2e/fixtures/vue-ssr/server.ts index dbe2051..26918b1 100644 --- a/e2e/fixtures/vue-ssr/server.ts +++ b/e2e/fixtures/vue-ssr/server.ts @@ -28,9 +28,9 @@ export async function createSSRServer(configFile = path.join(__dirname, 'vite.co const port = genRandomPort() app.listen(port) const { page } = await createChromeBrowser(port) - return { app, page } + return { app, page, port } } if (require.main === module) { - createSSRServer() + createSSRServer().then(({ port }) => console.log(`server listen on: http://127.0.0.1:${port}`)) } diff --git a/examples/nuxt-demo/components/btn2.vue b/examples/nuxt-demo/components/btn2.vue index 52e78f0..7e5f653 100644 --- a/examples/nuxt-demo/components/btn2.vue +++ b/examples/nuxt-demo/components/btn2.vue @@ -8,7 +8,7 @@ import stylex from '@stylexjs/stylex' const btns = stylex.create({ button: { transition: '.150s all', - border: '3px solid red', + border: '3px solid green', backgroundColor: 'HotPink' }, diff --git a/examples/qwik-demo/src/components/starter/hero/hero.tsx b/examples/qwik-demo/src/components/starter/hero/hero.tsx index 20f27ef..7a70228 100644 --- a/examples/qwik-demo/src/components/starter/hero/hero.tsx +++ b/examples/qwik-demo/src/components/starter/hero/hero.tsx @@ -11,8 +11,8 @@ const s = stylex.create({ export default component$(() => { return ( -
-

+
+

So {' '} fantastic @@ -23,7 +23,7 @@ export default component$(() => { {' '} here

-

Have fun building your App with Qwik.

+

Have fun building your App with Qwik.

) }) diff --git a/examples/qwik-demo/vite.config.ts b/examples/qwik-demo/vite.config.ts index c3388d5..2e8a0b3 100644 --- a/examples/qwik-demo/vite.config.ts +++ b/examples/qwik-demo/vite.config.ts @@ -6,7 +6,7 @@ import { stylexPlugin } from 'vite-plugin-stylex-dev' export default defineConfig(() => { return { - plugins: [qwikCity(), qwikVite(), tsconfigPaths(), stylexPlugin()], + plugins: [qwikCity(), qwikVite(), tsconfigPaths({ root: __dirname }), stylexPlugin()], dev: { headers: { 'Cache-Control': 'public, max-age=0' diff --git a/examples/vite-demo/src/card.vue b/examples/vite-demo/src/card.vue index 7b983b4..d22afaf 100644 --- a/examples/vite-demo/src/card.vue +++ b/examples/vite-demo/src/card.vue @@ -11,7 +11,8 @@ import * as stylex from '@stylexjs/stylex' const styles = stylex.create({ card: { border: '1px solid red', - color: 'red' + color: 'red', + fontSize: '30px' } }) diff --git a/examples/vite-react-demo/package.json b/examples/vite-react-demo/package.json index bb08594..59f5ecd 100644 --- a/examples/vite-react-demo/package.json +++ b/examples/vite-react-demo/package.json @@ -12,7 +12,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "vite": "^5.0.10", - "vite-plugin-stylex-dev": "workspace:*" + "vite-plugin-stylex-dev": "workspace:*", + "vite-tsconfig-paths": "^4.2.3" }, "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 index a6ab11f..9949d63 100644 --- a/examples/vite-react-demo/src/app.tsx +++ b/examples/vite-react-demo/src/app.tsx @@ -1,15 +1,6 @@ -import * as stylex from '@stylexjs/stylex' - -import { colors } from '@stylexjs/open-props/lib/colors.stylex' - -const styles = stylex.create({ - base: { - color: colors.gray0 - } -}) +import Button from './button' function App() { - return + return } - export { App } diff --git a/examples/vite-react-demo/src/button.tsx b/examples/vite-react-demo/src/button.tsx new file mode 100644 index 0000000..81f6442 --- /dev/null +++ b/examples/vite-react-demo/src/button.tsx @@ -0,0 +1,45 @@ +import * as stylex from '@stylexjs/stylex' +import { ComponentProps } from 'react' +import { colors } from '@/tokens.stylex' +import { fonts } from '@/tokens/nested.stylex' +import { others } from '~/other.stylex' + +type ButtonProps = { + variant?: 'primary', + children?: React.ReactNode, + styles?: stylex.StyleXStyles, +} & ComponentProps<'button'> + +const baseStyle = { + borderWidth: '1px', + borderStyle: 'solid', + color: colors.primary, + borderRadius: others.borderRadius, + cursor: 'pointer', + padding: '10px 15px', + fontSize: fonts.font +} + +const s = stylex.create({ + base: baseStyle, + primary: { + borderColor: { + default: colors.primary + }, + color: { + default: colors.black + }, + backgroundColor: { + default: colors.primary, + ':hover': colors.primaryDark, + ':focus': colors.primaryDark, + ':active': colors.primaryDark + } + } +}) + +const Button = ({ variant = 'primary', styles, ...props }: ButtonProps) => ( +