feat: add inectGlobalStyle (#7)

* fix(babel-plugin): esm pkg expose

* chore(babel-plugin): directory

* feat(babel-plugin): add new option

* feat: implmeent inject style

* feat: add internal test plugin

* fix(babel-plugin): injectGlobalStyle

* chore: switch to pnpm

* chore: ci

.github/workflows/tests.yaml

@@ -7,13 +7,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Install berry
+      - name: Install pnpm
         run: corepack enable
       - uses: actions/setup-node@v3
         with:
           node-version: 20.5.1
       - name: Install Dependices
-        run: yarn install
+        run: pnpm install
 
       - name: Run Test
-        run: yarn test
+        run: pnpm test

eslint.config.js

@@ -1,3 +1,3 @@
-module.exports = require('eslint-config-kagura').nonzzz({ ts: true, jsx: true }, {
+module.exports = require('eslint-config-kagura').nonzzz({ ts: true, jsx: true, unusedImports: false }, {
   ignores: ['packages/**/output.js']
 })

examples/vite-vue-demo/package.json

@@ -7,6 +7,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@stylex-extend/vite-plugin": "workspace:*",
     "@stylex-extend/vue": "workspace:*",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",

examples/vite-vue-demo/src/colors.stylex.ts

@@ -0,0 +1,5 @@
+import { defineVars } from '@stylexjs/stylex'
+
+export const colors = defineVars({
+  purple: 'purple'
+})

examples/vite-vue-demo/src/main.tsx

@@ -1,9 +1,11 @@
 import { createApp, defineComponent } from 'vue'
 import { keyframes } from '@stylexjs/stylex'
+import { injectGlobalStyle } from '@stylex-extend/core'
+import { colors } from './colors.stylex'
 
 const pulse = keyframes({
   '0%': { transform: 'scale(1)' },
-  '50%': { transform: 'scale(1.1)' },
+  '50%': { transform: 'scale(0.5)' },
   '100%': { transform: 'scale(1)' }
 })
 
@@ -13,13 +15,23 @@ const A = defineComponent(() => {
 
 const color = 'purple'
 
+export { colors }
+
+injectGlobalStyle({
+  p: {
+    color: colors.purple
+  }
+})
+
 const App = defineComponent({
+
   setup() {
     return () => (
       <>
         <div stylex={{ color: 'red' }}>
           456
         </div>
+        <p>text</p>
         <A stylex={{ 
           color,
           animationName: pulse,

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

@@ -2,9 +2,8 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import jsx from '@vitejs/plugin-vue-jsx'
 import { stylexPlugin } from 'vite-plugin-stylex-dev'
-import stylexBabelPlugin from '@stylex-extend/babel-plugin'
-import inspect from 'vite-plugin-inspect'
+import { stylexExtendPlugin } from '@stylex-extend/vite-plugin'
 
 export default defineConfig({
-  plugins: [vue(), jsx({ babelPlugins: [stylexBabelPlugin.default.withOptions({ stylex: { helper: 'attrs' } })] }), stylexPlugin(), inspect({ dev: true })]
+  plugins: [vue(), stylexExtendPlugin({ stylex: { helper: 'attrs' } }), jsx(), stylexPlugin()]
 })

internal/vite-plugin/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@stylex-extend/vite-plugin",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "@babel/core": "^7.23.9",
+    "@types/babel__core": "^7.20.5"
+  },
+  "exports": {
+    ".": "./dist/index.js"
+  }
+}

internal/vite-plugin/src/index.ts

@@ -0,0 +1,81 @@
+import { transformAsync } from '@babel/core'
+import { type Plugin, ViteDevServer, searchForWorkspaceRoot } from 'vite'
+import stylexExtendBabelPlugin from '@stylex-extend/babel-plugin'
+import type { StylexExtendBabelPluginOptions } from '@stylex-extend/babel-plugin'
+
+const DEFINE_CSS_EXTRA = '\0stylex-extend'
+
+const DEFINE_CSS_EXTRA_CSS = DEFINE_CSS_EXTRA + '.css'
+
+const VITE_INTERNAL_CSS_PLUGIN_NAMES = ['vite:css', 'vite:css-post']
+
+export function stylexExtendPlugin(options: StylexExtendBabelPluginOptions = {}): Plugin {
+  let globalStyle = ''
+  const viteCSSPlugins: Plugin[] = []
+  let viteServer: ViteDevServer
+  return {
+    name: 'stylex-extend',
+    enforce: 'pre',
+    buildStart() {
+      globalStyle = ''
+    },
+    configureServer(server) {
+      viteServer = server
+    },
+    resolveId(id) {
+      if (id === DEFINE_CSS_EXTRA_CSS) return DEFINE_CSS_EXTRA_CSS
+    },
+    load(id) {
+      if (id === DEFINE_CSS_EXTRA_CSS) {
+        return globalStyle
+      }
+    },
+    configResolved(config) {
+      if (!options.unstable_moduleResolution) {
+        options.unstable_moduleResolution = {
+          type: 'commonJS',
+          rootDir: searchForWorkspaceRoot(config.root)
+        }
+      }
+      viteCSSPlugins.push(...config.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)
+    },
+    async transform(code, id) {
+      if (!/\.(mjs|js|ts|vue|jsx|tsx)(\?.*|)$/.test(id) || !code.includes('@stylex-extend')) return
+      const res = await transformAsync(code, { babelrc: false,
+        plugins: [stylexExtendBabelPlugin.withOptions({
+          ...options
+        })],
+        filename: id })
+      if (!res) return
+      if ('globalStyle' in res.metadata!) {
+        globalStyle += res.metadata!.globalStyle
+      }
+      if (viteServer) {
+        const module = viteServer.moduleGraph.getModuleById(DEFINE_CSS_EXTRA_CSS)
+        if (module) {
+          viteServer.moduleGraph.invalidateModule(module, new Set())
+          module.lastHMRTimestamp = Date.now()
+        }
+      }
+      return {
+        code: `import ${JSON.stringify(DEFINE_CSS_EXTRA_CSS)};\n${res.code}`,
+        map: res.map!
+      }
+    },
+    async renderChunk(_, chunk) {
+      const [plugin_1, plugin_2] = viteCSSPlugins
+
+      for (const moudleId of chunk.moduleIds) {
+        if (moudleId.includes(DEFINE_CSS_EXTRA_CSS)) {
+          if (typeof plugin_1.transform === 'function' && typeof plugin_2.transform === 'function') {
+            // @ts-expect-error
+            const { code: css } = await plugin_1.transform.call(this, globalStyle, DEFINE_CSS_EXTRA_CSS)
+            // @ts-expect-error
+            await plugin_2.transform.call(this, css, DEFINE_CSS_EXTRA_CSS)
+          }
+        }
+      }
+    }
+  }
+}

packages/css/tsconfig.json → internal/vite-plugin/tsconfig.json

@@ -2,8 +2,5 @@
     "extends": "../../tsconfig.json",
     "compilerOptions": {
         "baseUrl": ".",
-        "paths": {
-            "@/*":["src/*"]
-        }
     }
 }

internal/vite-plugin/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  splitting: false,
+  shims: true,
+  dts: true,
+  format: ['esm'],
+  clean: true,
+  external: ['vite', '@stylex-extend/babel-plugin']
+})

package.json

@@ -2,23 +2,14 @@
   "name": "stylex-extend",
   "description": "An unofficial stylexjs extension",
   "scripts": {
-    "preinstall": "node ./scripts/yarn.js",
-    "test": "yarn workspaces foreach --all run test",
-    "build": "yarn build:babel-plugin && yarn build:shared",
-    "build:babel-plugin": "yarn workspace @stylex-extend/babel-plugin run build",
-    "build:shared": "yarn workspace @stylex-extend/shared run build"
+    "test": "pnpm -r run test"
   },
-  "workspaces": [
-    "packages/*",
-    "examples/*"
-  ],
   "keywords": [],
   "author": "kanno",
   "license": "MIT",
-  "packageManager": "[email protected]",
   "devDependencies": {
     "@stylex-extend/babel-plugin": "workspace:*",
-    "@stylex-extend/css": "workspace:*",
+    "@stylex-extend/core": "workspace:*",
     "@stylex-extend/shared": "workspace:*",
     "@stylexjs/babel-plugin": "^0.5.1",
     "@stylexjs/stylex": "^0.5.1",

packages/babel-plugin/PRINCIPLE.md

@@ -0,0 +1,38 @@
+# Principle
+
+Welcome to `@stylex-extend/babel-plugin`. This is an unofficial `@stylexjs` extension. We support using `JSXAttribute` syntax to define inline style and etc.
+
+All of features are based on the `@stylexjs` RFC or some interesting ideas.
+
+## Features
+
+> JSXAttribute
+
+```jsx
+
+// acceptable syntax
+
+const color = 'red'
+
+function font(unit) {
+    return ...
+}
+
+function Component(props) {
+
+return <div stylex={{
+    color,
+    font: font(1),
+    height: props.full ? '100px' : '50px', 
+
+    padding: `${props.padding}`,
+    ...(props.inline && {display:'inline'}),
+    margin: {
+        default: '10px'
+    }
+}}></div>
+}
+
+// We don't support overly complex syntax. don't write nested spreads syntax.
+
+```

packages/babel-plugin/__tests__/fixtures/inject-global-style/code.js

@@ -0,0 +1,8 @@
+import { injectGlobalStyle } from '@stylex-extend/core'
+import { expression } from './expression.stylex'
+
+export const styles = injectGlobalStyle({
+  html: {
+    fontSize: expression.font
+  }
+})

packages/babel-plugin/__tests__/fixtures/inject-global-style/expression.stylex.js

@@ -0,0 +1,5 @@
+import { defineVars } from '@stylexjs/stylex'
+
+export const expression = defineVars({
+  font: '13px'
+})

packages/babel-plugin/__tests__/fixtures/inject-global-style/output.js

@@ -0,0 +1,4 @@
+import { create as _create, props as _props } from "@stylexjs/stylex";
+import { injectGlobalStyle } from "@stylex-extend/core";
+import { expression } from "./expression.stylex";
+export const styles = "";

packages/babel-plugin/__tests__/stylex-macro.spec.ts

@@ -5,8 +5,8 @@ import plugin from '../src'
 
 pluginTester({
   plugin,
-  pluginName: 'stylex-macro',
-  fixtures: path.join(__dirname, 'fixtures', 'stylex-macro'),
+  pluginName: 'stylex-extend',
+  fixtures: path.join(__dirname, 'fixtures'),
   babelOptions: {
     parserOpts: {
       plugins: ['jsx']

packages/babel-plugin/package.json

@@ -6,18 +6,29 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "test": "yarn run -T vitest",
-    "dev": "yarn run -T tsup --watch",
-    "build": "yarn run -T tsup"
+    "test": "vitest",
+    "dev": "tsup --watch",
+    "build": "tsup"
   },
   "license": "MIT",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./*": "./*"
+  },
   "devDependencies": {
-    "@stylex-extend/react": "0.1.3",
+    "@stylex-extend/react": "workspace:*",
     "@types/babel__core": "^7.20.5",
+    "@types/stylis": "^4.2.5",
     "babel-plugin-tester": "^11.0.4"
   },
   "dependencies": {
-    "@babel/core": "^7.23.9"
+    "@babel/core": "^7.23.9",
+    "@stylexjs/shared": "^0.5.1",
+    "stylis": "^4.3.1"
   },
   "files": [
     "dist",