feat: add internal test plugin

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,21 @@ const A = defineComponent(() => {
 
 const color = 'purple'
 
+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,16 @@
+{
+    "name": "@stylex-extend/vite-plugin",
+    "type": "module",
+    "types": "dist/index.d.ts",
+    "module": "dist/index.js",
+    "scripts": {
+        "build": "yarn run -T tsup"
+    },
+    "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,40 @@
+import { transformAsync } from '@babel/core'
+import { type Plugin, searchForWorkspaceRoot } from 'vite'
+import stylexExtendBabelPlugin from '@stylex-extend/babel-plugin'
+import type { StylexExtendBabelPluginOptions } from '@stylex-extend/babel-plugin'
+
+export function stylexExtendPlugin(options: StylexExtendBabelPluginOptions = {}): Plugin {
+  let globalStyle = ''
+  return {
+    name: 'stylex-extend',
+    enforce: 'pre',
+    buildStart() {
+      globalStyle = ''
+    },
+    configResolved(config) {
+      if (!options.unstable_moduleResolution) {
+        options.unstable_moduleResolution = {
+          type: 'commonJS',
+          rootDir: searchForWorkspaceRoot(config.root)
+        }
+      }
+    },
+    async transform(code, id) {
+      if (!/\.(mjs|js|ts|vue|jsx|tsx)(\?.*|)$/.test(id)) 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
+      }
+      console.log(globalStyle)
+      return {
+        code: res.code!,
+        map: res.map!
+      }
+    }
+  }
+}

internal/vite-plugin/tsconfig.json

@@ -0,0 +1,6 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "baseUrl": ".",
+    }
+}

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

@@ -10,7 +10,8 @@
   },
   "workspaces": [
     "packages/*",
-    "examples/*"
+    "examples/*",
+    "internal/*"
   ],
   "keywords": [],
   "author": "kanno",

packages/babel-plugin/src/index.ts

@@ -59,12 +59,14 @@ function declare({ types: t }: typeof b): PluginObj {
           const anchor = body.findIndex(p => t.isImportDeclaration(p.node))
           ctx.setupOptions(pluginOptions, identifiers, anchor === -1 ? 0 : anchor)
           scanImportStmt(body, ctx)
-          path.traverse({
-            CallExpression(path) {
-              const CSS = transformInjectGlobalStyle(path, ctx)
-              Reflect.set(state.file.metadata, 'globalStyle', CSS)
-            }
-          })
+          if (ctx.options.enableInjectGlobalStyle) {
+            path.traverse({
+              CallExpression(path) {
+                const CSS = transformInjectGlobalStyle(path, ctx)
+                Reflect.set(state.file.metadata, 'globalStyle', CSS)
+              }
+            })
+          }
         },
         exit(path) {
           const body = path.get('body')
@@ -93,3 +95,5 @@ export type StylexExtendTransformObject = {
 }
 
 export default declare as unknown as StylexExtendTransformObject
+
+export type { StylexExtendBabelPluginOptions }

packages/babel-plugin/src/interface.ts

@@ -22,7 +22,7 @@ export interface ModuleResolutionExperimentalCrossFileParsing {
 export type ModuleResolution = ModuleResolutionCommonJS | MOduleResolutionHaste | ModuleResolutionExperimentalCrossFileParsing
 
 export interface StylexExtendBabelPluginOptions {
-  stylex: boolean | StylexBindingMeta
+  stylex?: boolean | StylexBindingMeta
   enableInjectGlobalStyle?: boolean
   /**
    * @default 'x'

packages/babel-plugin/src/state-context.ts

@@ -1,11 +1,14 @@
 import path from 'path'
+import { createRequire } from 'module'
 import { types } from '@babel/core'
 import type { StylexBindingMeta, StylexExtendBabelPluginOptions } from './interface'
 
 export type InternalPluginOptions = Required<Omit<StylexExtendBabelPluginOptions, 'stylex'>> & { stylex: StylexBindingMeta }
 
 export type ImportIdentifiers = Record<string, types.Identifier>
 
+const _require = createRequire(__filename)
+
 interface FileNamesForHashing {
   fileName: string
   exportName: string
@@ -28,11 +31,11 @@ function filePathResolver(relativePath: string, sourceFilePath: string) {
     const importPathStr = relativePath + ext
     if (importPathStr.startsWith('.')) {
       try {
-        return require.resolve(importPathStr, {
+        return _require.resolve(importPathStr, {
           paths: [path.dirname(sourceFilePath)]
         })
       } catch {
-        return null
+
       }
     }
   } 

packages/babel-plugin/src/visitor/import-stmt.ts

@@ -12,14 +12,15 @@ function isTopLevelCalled(p: NodePath) {
 }
 
 export function scanImportStmt(stmts: NodePath<types.Statement>[], ctx: Context) {
-  const matchers = matchesFileSuffix(ctx.options.unstable_moduleResolution.themeFileExtension!)
+  const matchers = matchesFileSuffix(ctx.options.unstable_moduleResolution.themeFileExtension ?? '.stylex')
   for (const stmt of stmts) {
     if (!stmt.isImportDeclaration()) continue
     if (stmt.node.source.value === STYLEX_EXTEND || matchers(stmt.node.source.value)) {
       const specs = stmt.node.specifiers.filter((s) => s.type === 'ImportSpecifier') as types.ImportSpecifier[] 
       if (stmt.node.source.value === STYLEX_EXTEND) {
         ctx.addImports(specs.map((s) => s.local.name))
       } else {
+        if (!ctx.options.enableInjectGlobalStyle) continue
         const [filePath, fileName] = ctx.importPathResolver(stmt.node.source.value)
         const codeContent = fs.readFileSync(filePath, 'utf-8')
         const ast = parseSync(codeContent, { babelrc: true })

yarn.lock

@@ -1085,6 +1085,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@stylex-extend/vite-plugin@workspace:*, @stylex-extend/vite-plugin@workspace:internal/vite-plugin":
+  version: 0.0.0-use.local
+  resolution: "@stylex-extend/vite-plugin@workspace:internal/vite-plugin"
+  dependencies:
+    "@babel/core": "npm:^7.23.9"
+    "@types/babel__core": "npm:^7.20.5"
+  languageName: unknown
+  linkType: soft
+
 "@stylex-extend/vue@workspace:*, @stylex-extend/vue@workspace:packages/vue":
   version: 0.0.0-use.local
   resolution: "@stylex-extend/vue@workspace:packages/vue"
@@ -5118,6 +5127,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "vite-vue-demo@workspace:examples/vite-vue-demo"
   dependencies:
+    "@stylex-extend/vite-plugin": "workspace:*"
     "@stylex-extend/vue": "workspace:*"
     "@vitejs/plugin-vue": "npm:^5.0.4"
     "@vitejs/plugin-vue-jsx": "npm:^3.1.0"