unplugin-stylex 0.0.2 → 0.2.4

package/dist/rollup.js

@@ -5,7 +5,7 @@ import {
 // src/rollup.ts
 var rollup_default = (options) => {
   if (isDevelopment || (options == null ? void 0 : options.dev)) {
-    throw new Error(`If you want to use this plugin through rollup, please use "@stylexjs/rollup-plugin" instead`);
+    throw new Error('If you want to use this plugin through rollup, please use "@stylexjs/rollup-plugin" instead');
   }
 };
 export {

package/dist/rspack.cjs

@@ -1,11 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkD3OQCQYPcjs = require('./chunk-D3OQCQYP.cjs');
+var _chunkNVMQARFAcjs = require('./chunk-NVMQARFA.cjs');
+require('./chunk-ZBPRDZS4.cjs');
 require('./chunk-N4Z3Z2PU.cjs');
 
 // src/rspack.ts
 var _unplugin = require('unplugin');
-var rspack_default = _unplugin.createRspackPlugin.call(void 0, _chunkD3OQCQYPcjs.unpluginFactory);
+var rspackPlugin = _unplugin.createRspackPlugin.call(void 0, _chunkNVMQARFAcjs.unpluginFactory);
+var rspack_default = rspackPlugin;
 
 
 exports.default = rspack_default;

package/dist/rspack.d.cts

@@ -1,7 +1,13 @@
-import * as unplugin from 'unplugin';
-import { UnpluginStylexOptions } from './types.cjs';
-import '@rollup/pluginutils';
+import { RspackPluginInstance } from 'unplugin';
+import { UnpluginStylexInstance } from './types.cjs';
 
-declare const _default: (options?: UnpluginStylexOptions) => unplugin.RspackPluginInstance;
+/**
+ * This entry file is for Rspac plugin.
+ *
+ * @module
+ */
 
-export { _default as default };
+type RspackPluginType = UnpluginStylexInstance<RspackPluginInstance | RspackPluginInstance[]>;
+declare const rspackPlugin: RspackPluginType;
+
+export { rspackPlugin as default };

package/dist/rspack.d.ts

@@ -1,7 +1,13 @@
-import * as unplugin from 'unplugin';
-import { UnpluginStylexOptions } from './types.js';
-import '@rollup/pluginutils';
+import { RspackPluginInstance } from 'unplugin';
+import { UnpluginStylexInstance } from './types.js';
 
-declare const _default: (options?: UnpluginStylexOptions) => unplugin.RspackPluginInstance;
+/**
+ * This entry file is for Rspac plugin.
+ *
+ * @module
+ */
 
-export { _default as default };
+type RspackPluginType = UnpluginStylexInstance<RspackPluginInstance | RspackPluginInstance[]>;
+declare const rspackPlugin: RspackPluginType;
+
+export { rspackPlugin as default };

package/dist/rspack.js

@@ -1,11 +1,13 @@
 import {
   unpluginFactory
-} from "./chunk-XQ5JPTTJ.js";
+} from "./chunk-7MXMBS5H.js";
+import "./chunk-6F4PWJZI.js";
 import "./chunk-36ARBXVP.js";
 
 // src/rspack.ts
 import { createRspackPlugin } from "unplugin";
-var rspack_default = createRspackPlugin(unpluginFactory);
+var rspackPlugin = createRspackPlugin(unpluginFactory);
+var rspack_default = rspackPlugin;
 export {
   rspack_default as default
 };

package/dist/types.cjs

@@ -1 +1 @@
-"use strict";
+"use strict";require('./chunk-ZBPRDZS4.cjs');

package/dist/types.d.cts

@@ -1,5 +1,3 @@
-import { FilterPattern } from '@rollup/pluginutils';
-
 type BabelConfig = {
     plugins: unknown[];
     presets: unknown[];
@@ -11,17 +9,19 @@ type StylexOptions = {
     classNamePrefix?: string;
     useCSSLayers?: boolean;
     unstable_moduleResolution?: {
-        type: "commonjs" | "haste";
+        type: 'commonjs' | 'haste';
         rootDir: string;
     };
     babelConfig?: BabelConfig;
+    runtimeInjection: boolean;
+    aliases?: string[];
 };
 type UnpluginStylexOptions = {
+    compiler?: string;
     dev?: boolean;
-    include?: FilterPattern;
-    exclude?: FilterPattern;
-    enforce?: "post" | "pre";
+    enforce?: 'post' | 'pre';
     stylex?: StylexOptions;
 };
+type UnpluginStylexInstance<T> = (options?: UnpluginStylexOptions) => T;
 
-export type { BabelConfig, UnpluginStylexOptions };
+export type { BabelConfig, StylexOptions, UnpluginStylexInstance, UnpluginStylexOptions };

package/dist/types.d.ts

@@ -1,5 +1,3 @@
-import { FilterPattern } from '@rollup/pluginutils';
-
 type BabelConfig = {
     plugins: unknown[];
     presets: unknown[];
@@ -11,17 +9,19 @@ type StylexOptions = {
     classNamePrefix?: string;
     useCSSLayers?: boolean;
     unstable_moduleResolution?: {
-        type: "commonjs" | "haste";
+        type: 'commonjs' | 'haste';
         rootDir: string;
     };
     babelConfig?: BabelConfig;
+    runtimeInjection: boolean;
+    aliases?: string[];
 };
 type UnpluginStylexOptions = {
+    compiler?: string;
     dev?: boolean;
-    include?: FilterPattern;
-    exclude?: FilterPattern;
-    enforce?: "post" | "pre";
+    enforce?: 'post' | 'pre';
     stylex?: StylexOptions;
 };
+type UnpluginStylexInstance<T> = (options?: UnpluginStylexOptions) => T;
 
-export type { BabelConfig, UnpluginStylexOptions };
+export type { BabelConfig, StylexOptions, UnpluginStylexInstance, UnpluginStylexOptions };

package/dist/types.js

@@ -0,0 +1 @@
+import "./chunk-6F4PWJZI.js";

package/dist/vite.cjs

@@ -1,11 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkD3OQCQYPcjs = require('./chunk-D3OQCQYP.cjs');
+var _chunkNVMQARFAcjs = require('./chunk-NVMQARFA.cjs');
+require('./chunk-ZBPRDZS4.cjs');
 require('./chunk-N4Z3Z2PU.cjs');
 
 // src/vite.ts
 var _unplugin = require('unplugin');
-var vite_default = _unplugin.createVitePlugin.call(void 0, _chunkD3OQCQYPcjs.unpluginFactory);
+var vitePlugin = _unplugin.createVitePlugin.call(void 0, _chunkNVMQARFAcjs.unpluginFactory);
+var vite_default = vitePlugin;
 
 
 exports.default = vite_default;

package/dist/vite.d.cts

@@ -1,7 +1,12 @@
-import * as vite from 'vite';
-import { UnpluginStylexOptions } from './types.cjs';
-import '@rollup/pluginutils';
+import { VitePlugin } from 'unplugin';
+import { UnpluginStylexInstance } from './types.cjs';
 
-declare const _default: (options?: UnpluginStylexOptions) => vite.Plugin<any> | vite.Plugin<any>[];
+/**
+ * This entry file is for Vite plugin.
+ *
+ * @module
+ */
 
-export { _default as default };
+declare const vitePlugin: UnpluginStylexInstance<VitePlugin | VitePlugin[]>;
+
+export { vitePlugin as default };

package/dist/vite.d.ts

@@ -1,7 +1,12 @@
-import * as vite from 'vite';
-import { UnpluginStylexOptions } from './types.js';
-import '@rollup/pluginutils';
+import { VitePlugin } from 'unplugin';
+import { UnpluginStylexInstance } from './types.js';
 
-declare const _default: (options?: UnpluginStylexOptions) => vite.Plugin<any> | vite.Plugin<any>[];
+/**
+ * This entry file is for Vite plugin.
+ *
+ * @module
+ */
 
-export { _default as default };
+declare const vitePlugin: UnpluginStylexInstance<VitePlugin | VitePlugin[]>;
+
+export { vitePlugin as default };

package/dist/vite.js

@@ -1,11 +1,13 @@
 import {
   unpluginFactory
-} from "./chunk-XQ5JPTTJ.js";
+} from "./chunk-7MXMBS5H.js";
+import "./chunk-6F4PWJZI.js";
 import "./chunk-36ARBXVP.js";
 
 // src/vite.ts
 import { createVitePlugin } from "unplugin";
-var vite_default = createVitePlugin(unpluginFactory);
+var vitePlugin = createVitePlugin(unpluginFactory);
+var vite_default = vitePlugin;
 export {
   vite_default as default
 };

package/dist/webpack.cjs

@@ -5,7 +5,7 @@ var _chunkN4Z3Z2PUcjs = require('./chunk-N4Z3Z2PU.cjs');
 // src/webpack.ts
 var webpack_default = (options) => {
   if (_chunkN4Z3Z2PUcjs.isDevelopment || (options == null ? void 0 : options.dev)) {
-    throw new Error(`If you want to use this plugin through webpack, please use "@stylexjs/webpack-plugin" instead`);
+    throw new Error('If you want to use this plugin through webpack, please use "@stylexjs/webpack-plugin" instead');
   }
 };
 

package/dist/webpack.d.cts

@@ -1,3 +1,14 @@
-declare const _default: (options?: any) => void;
+import { UnpluginStylexOptions } from './types.cjs';
+
+/**
+ * This entry file is for Webpack plugin.
+ *
+ * @module
+ */
+
+/**
+ * Note: Current, please use @stylexjs/webpack-plugin
+ */
+declare const _default: (options?: UnpluginStylexOptions) => void;
 
 export { _default as default };

package/dist/webpack.d.ts

@@ -1,3 +1,14 @@
-declare const _default: (options?: any) => void;
+import { UnpluginStylexOptions } from './types.js';
+
+/**
+ * This entry file is for Webpack plugin.
+ *
+ * @module
+ */
+
+/**
+ * Note: Current, please use @stylexjs/webpack-plugin
+ */
+declare const _default: (options?: UnpluginStylexOptions) => void;
 
 export { _default as default };

package/dist/webpack.js

@@ -5,7 +5,7 @@ import {
 // src/webpack.ts
 var webpack_default = (options) => {
   if (isDevelopment || (options == null ? void 0 : options.dev)) {
-    throw new Error(`If you want to use this plugin through webpack, please use "@stylexjs/webpack-plugin" instead`);
+    throw new Error('If you want to use this plugin through webpack, please use "@stylexjs/webpack-plugin" instead');
   }
 };
 export {

package/jsr.json

@@ -0,0 +1,20 @@
+{
+  "name": "@eryue0220/unplugin-stylex",
+  "version": "0.2.4",
+  "exports": {
+    "./index": "./src/index.ts",
+    "./esbuild": "./src/esbuild.ts",
+    "./rollup": "./src/rollup.ts",
+    "./rspack": "./src/rspack.ts",
+    "./vite": "./src/vite.ts",
+    "./webpack": "./src/webpack.ts"
+  },
+  "exclude": [
+    ".eslintrc.json",
+    ".eslintignore",
+    "test",
+    "examples",
+    "pnpm-lock.yaml",
+    "pnpm-workspace.yaml"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unplugin-stylex",
-  "version": "0.0.2",
+  "version": "0.2.4",
   "packageManager": "pnpm@8.11.0",
   "description": "Unplugin for stylex",
   "repository": "https://github.com/eryue0220/unplugin-stylex",
@@ -59,20 +59,25 @@
   "engines": {
     "node": ">=16.14.0"
   },
+  "peerDependencies": {
+    "@stylexjs/stylex": "^0.5.1"
+  },
   "dependencies": {
     "@babel/core": "^7.23.6",
     "@babel/plugin-syntax-flow": "^7.23.3",
     "@babel/plugin-syntax-jsx": "^7.23.3",
     "@babel/plugin-syntax-typescript": "^7.23.3",
     "@rollup/pluginutils": "^5.1.0",
-    "@stylexjs/babel-plugin": "^0.3.0",
-    "unplugin": "^1.5.1"
+    "@stylexjs/babel-plugin": "^0.5.1",
+    "unplugin": "^1.7.1"
   },
   "devDependencies": {
+    "@stylistic/eslint-plugin-ts": "^1.6.2",
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",
     "@vitest/coverage-v8": "^1.1.1",
+    "babel-plugin-syntax-hermes-parser": "^0.19.1",
     "eslint": "^8.56.0",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",

package/src/core/build.ts

@@ -0,0 +1,9 @@
+import stylex from '@stylexjs/babel-plugin'
+import type { Rule } from '@stylexjs/babel-plugin'
+
+export function buildStylexRules(stylexRules: { [key: string]: Rule[] }, useCSSLayers: boolean): string {
+  const rules = Object.values(stylexRules).flat()
+  if (rules.length === 0) return ''
+
+  return stylex.processStylexRules(rules, useCSSLayers)
+}

package/src/core/{utils.ts → options.ts}

@@ -1,19 +1,18 @@
-import type { UnpluginStylexOptions } from '@/types'
+import type { StylexOptions, UnpluginStylexOptions } from '@/types'
 import { isDevelopment } from './constants'
 
-export function getOptions(options: UnpluginStylexOptions = ({} as UnpluginStylexOptions)) {
-  const stylex = options.stylex || {}
+export function getOptions(options: UnpluginStylexOptions) {
+  const stylex = options.stylex || ({} as StylexOptions)
+  const isDev = options.dev || isDevelopment
 
   return {
     ...options,
-    dev: options.dev || isDevelopment,
-    include: options.include || [/\.[jt]sx?$/],
-    exclude: options.exclude || [/node_modules/, /\.git/],
-    enforce: options.enforce || 'pre',
+    dev: options.dev || isDev,
     stylex: {
-      ...stylex,
       filename: stylex.filename || 'stylex.css',
-      stylexImports: stylex.stylexImports || ['stylex', '@stylexjs/stylex'],
+      stylexImports: stylex.stylexImports || ['@stylexjs/stylex'],
+      runtimeInjection: stylex.runtimeInjection ?? isDev,
+      aliases: stylex.aliases,
       useCSSLayers: stylex.useCSSLayers || false,
       unstable_moduleResolution: stylex.unstable_moduleResolution || { type: 'commonJS', rootDir: process.cwd() },
       babelConfig: {
@@ -21,6 +20,7 @@ export function getOptions(options: UnpluginStylexOptions = ({} as UnpluginStyle
         plugins: (stylex.babelConfig || {}).plugins || [],
         presets: (stylex.babelConfig || {}).presets || [],
       },
+      ...stylex,
     },
   }
 }

package/src/core/plugins.ts

@@ -0,0 +1,12 @@
+import typescriptSyntaxPlugin from '@babel/plugin-syntax-typescript'
+import flowSyntaxPlugin from '@babel/plugin-syntax-flow'
+
+export function getSyntaxPlugins(extname: string) {
+  const TSPlugin = extname === '.tsx'
+    ? [[typescriptSyntaxPlugin, { isTSX: true }]]
+    : [typescriptSyntaxPlugin]
+
+  return ['.js', '.jsx'].includes(extname)
+    ? [flowSyntaxPlugin]
+    : TSPlugin
+}

package/src/core/transformer.ts

@@ -1,61 +1,44 @@
-import * as fs from 'fs/promises'
-import * as path from 'path'
-
+import { extname as pathExtname } from 'node:path'
 import { transformAsync } from '@babel/core'
-import flowSyntaxPlugin from '@babel/plugin-syntax-flow'
 import jsxSyntaxPlugin from '@babel/plugin-syntax-jsx'
-import typescriptSyntaxPlugin from '@babel/plugin-syntax-typescript'
 import stylexBabelPlugin from '@stylexjs/babel-plugin'
 
+import { getSyntaxPlugins } from './plugins'
+
 export async function transformer(context) {
-  const { id, source, options } = context
+  const { id, inputCode, options } = context
   const stylex = options.stylex
-  const extname = path.extname(id)
+  const extname = pathExtname(id)
   const stylexRules = {}
-
-  if (stylex.stylexImports?.some?.((importName) => source.includes(importName))) {
-    const originSource = stylex.babelConfig.babelrc
-      ? await fs.readFile(id, 'utf-8')
-      : source
-
-    const { code, map, metadata } = await transformAsync(
-      originSource,
-      {
-        babelrc: stylex.babelConfig.babelrc,
-        filename: id,
-        plugins: [
-          ...(stylex.babelConfig.plugins || []),
-          extname === '.ts'
-            ? typescriptSyntaxPlugin
-            : extname === '.tsx'
-              ? [typescriptSyntaxPlugin, { isTSX: true }]
-              : flowSyntaxPlugin,
-
-          jsxSyntaxPlugin,
-          [
-            stylexBabelPlugin,
-            {
-              dev: options.dev,
-              unstable_moduleResolution: stylex.unstable_moduleResolution,
-              importSources: stylex.stylexImports,
-              ...stylex,
-            }
-          ],
-        ],
-        presets: stylex.babelConfig.presets,
-      }
-    )
-
-    if (metadata.stylex && metadata.stylex.length > 0) {
-      stylexRules[id] = metadata.stylex
+  const stylexBabelPluginOptions = {
+    dev: options.dev,
+    importSources: stylex.stylexImports,
+    ...stylex,
+  }
+  const plugins = [
+    ...(stylex.babelConfig?.plugins || []),
+    ...getSyntaxPlugins(extname),
+    jsxSyntaxPlugin,
+    stylexBabelPlugin.withOptions(stylexBabelPluginOptions),
+  ]
+
+  const { code, map, metadata } = await transformAsync(
+    inputCode,
+    {
+      babelrc: stylex.babelConfig?.babelrc,
+      filename: id,
+      presets: stylex.babelConfig?.presets,
+      plugins,
     }
+  )
 
-    if (!stylex.babelConfig.babelrc) {
-      return { code, map, stylexRules }
-    }
+  if (metadata.stylex && metadata.stylex.length > 0) {
+    stylexRules[id] = metadata.stylex
+  }
 
-    return { code, stylexRules }
+  if (!stylex.babelConfig?.babelrc) {
+    return { code, map, stylexRules }
   }
 
-  return { code: source }
+  return { code, stylexRules }
 }

package/src/esbuild.ts

@@ -1,4 +1,29 @@
+/**
+ * This entry file is for esbuild plugin. Requires esbuild >= 0.15
+ *
+ * @module
+ */
+
 import { createEsbuildPlugin } from 'unplugin'
-import { unpluginFactory } from '.'
+import type { EsbuildPlugin } from 'unplugin'
+import { unpluginFactory } from './index'
+import type { UnpluginStylexInstance } from './types'
+
+const esbuildPlugin: UnpluginStylexInstance<EsbuildPlugin | EsbuildPlugin[]> = createEsbuildPlugin(unpluginFactory)
+
 
-export default createEsbuildPlugin(unpluginFactory)
+/**
+ * Esbuild plugin
+ *
+ * @example
+ *
+ * import { build } from 'esbuild'
+ * import stylexPlugin from 'unplugin-stylex/esbuild'
+ *
+ * export default {
+ *   plugins: [
+ *     stylexPlugin(),
+ *   ],
+ * }
+ */
+export default esbuildPlugin