unplugin-stylex 0.3.0 → 0.3.1

package/dist/rspack.d.cts

@@ -7,7 +7,7 @@ import { UnpluginStylexInstance } from './types.cjs';
  * @module
  */
 
-type RspackPluginType = UnpluginStylexInstance<RspackPluginInstance | RspackPluginInstance[]>;
+type RspackPluginType = UnpluginStylexInstance<RspackPluginInstance>;
 declare const rspackPlugin: RspackPluginType;
 
 export { rspackPlugin as default };

package/dist/rspack.d.ts

@@ -7,7 +7,7 @@ import { UnpluginStylexInstance } from './types.js';
  * @module
  */
 
-type RspackPluginType = UnpluginStylexInstance<RspackPluginInstance | RspackPluginInstance[]>;
+type RspackPluginType = UnpluginStylexInstance<RspackPluginInstance>;
 declare const rspackPlugin: RspackPluginType;
 
 export { rspackPlugin as default };

package/dist/types.d.cts

@@ -5,16 +5,18 @@ type BabelConfig = {
 };
 type StylexOptions = {
     filename?: string;
+    aliases?: string[];
     stylexImports?: string[];
     classNamePrefix?: string;
-    useCSSLayers?: boolean;
     unstable_moduleResolution?: {
         type: 'commonjs' | 'haste';
         rootDir: string;
     };
     babelConfig?: BabelConfig;
-    runtimeInjection: boolean;
-    aliases?: string[];
+    useCSSLayers?: boolean;
+    genConditionalClasses?: boolean;
+    treeshakeCompensation?: boolean;
+    runtimeInjection?: boolean;
 };
 type UnpluginStylexOptions = {
     compiler?: string;

package/dist/types.d.ts

@@ -5,16 +5,18 @@ type BabelConfig = {
 };
 type StylexOptions = {
     filename?: string;
+    aliases?: string[];
     stylexImports?: string[];
     classNamePrefix?: string;
-    useCSSLayers?: boolean;
     unstable_moduleResolution?: {
         type: 'commonjs' | 'haste';
         rootDir: string;
     };
     babelConfig?: BabelConfig;
-    runtimeInjection: boolean;
-    aliases?: string[];
+    useCSSLayers?: boolean;
+    genConditionalClasses?: boolean;
+    treeshakeCompensation?: boolean;
+    runtimeInjection?: boolean;
 };
 type UnpluginStylexOptions = {
     compiler?: string;

package/jsr.json

@@ -1,6 +1,6 @@
 {
   "name": "@eryue0220/unplugin-stylex",
-  "version": "0.0.3",
+  "version": "0.3.1",
   "exports": {
     "./index": "./src/index.ts",
     "./esbuild": "./src/esbuild.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unplugin-stylex",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "packageManager": "pnpm@8.11.0",
   "description": "Unplugin for stylex",
   "repository": "https://github.com/eryue0220/unplugin-stylex",
@@ -74,7 +74,7 @@
     "@stylexjs/stylex": "^0.5.1"
   },
   "dependencies": {
-    "@babel/core": "^7.24.4",
+    "@babel/core": "^7.24.5",
     "@babel/plugin-syntax-flow": "^7.24.1",
     "@babel/plugin-syntax-jsx": "^7.24.1",
     "@babel/plugin-syntax-typescript": "^7.24.1",
@@ -83,16 +83,16 @@
     "unplugin": "^1.10.1"
   },
   "devDependencies": {
-    "@stylistic/eslint-plugin-ts": "^1.7.2",
-    "@types/node": "^20.12.7",
+    "@stylistic/eslint-plugin-ts": "^1.8.1",
+    "@types/node": "^20.12.11",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "@vitest/coverage-v8": "^1.5.0",
+    "@vitest/coverage-v8": "^1.6.0",
     "babel-plugin-syntax-hermes-parser": "^0.19.2",
     "eslint": "^8.57.0",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5",
-    "vite": "^5.2.9",
-    "vitest": "^1.5.0"
+    "vite": "^5.2.11",
+    "vitest": "^1.6.0"
   }
 }

package/.eslintignore

@@ -1,4 +0,0 @@
-.github/
-dist/
-node_modules/
-examples/

package/.eslintrc.json

@@ -1,14 +0,0 @@
-{
-  "env": {
-    "node": true
-  },
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@stylistic/ts"],
-  "root": true,
-  "rules": {
-    "max-len": ["error", { "code": 120 }],
-    "semi": ["error", "never"],
-    "quotes": ["error", "single"],
-    "@typescript-eslint/no-explicit-any": "off"
-  }
-}

package/.github/actions/setup-and-cache/action.yml

@@ -1,18 +0,0 @@
-name: Setup and Cache
-description: Setup for node, pnpm and cache for browser testing binaries
-inputs:
-  node-version:
-    required: false
-    description: Node version for setup-node
-    default: 20.x
-
-runs:
-  using: composite
-
-  steps:
-    - name: install pnpm
-      uses: pnpm/action-setup@v2
-    - name: Set node version to ${{ inputs.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ inputs.node-version }}

package/.github/renovate.json

@@ -1,27 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:base"],
-  "lockFileMaintenance": {"enabled": true, "automerge": false},
-  "rangeStrategy": "replace",
-  "postUpdateOptions": ["pnpmDedupe"],
-  "packageRules": [
-    {
-      "matchPackageNames": ["@tsd/typescript", "typescript"],
-      "groupName": "typescript"
-    },
-    {
-      "matchPackageNames": [
-        "@babel/core",
-        "@babel/plugin-syntax-flow",
-        "@babel/plugin-syntax-jsx",
-        "@babel/plugin-syntax-typescript"
-      ],
-      "groupName": "babel"
-    },
-
-    {
-      "matchPackageNames": ["@stylexjs/stylex", "@stylexjs/babel-plugin"],
-      "groupName": "stylex"
-    }
-  ]
-}

package/.github/workflows/ci.yml

@@ -1,43 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: [main]
-
-  pull_request:
-    branches: [main]
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: ./.github/actions/setup-and-cache
-
-      - name: Install
-        run: pnpm i
-
-      - name: Lint
-        run: pnpm run check
-
-  test:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest, macos-latest, windows-latest]
-        node: [16, 18, 20]
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: ./.github/actions/setup-and-cache
-        with:
-          node-version: ${{ matrix.node }}
-
-      - name: Install
-        run: pnpm i
-
-      - name: Unit Test
-        run: pnpm run test

package/.github/workflows/release.yml

@@ -1,39 +0,0 @@
-name: Release
-
-permissions:
-  contents: write
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Set node
-        uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-
-      - run: npx changelogithub
-        env:
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-
-  publish-jsr:
-    runs-on: ubuntu-latest
-
-    permissions:
-      contents: read
-      id-token: write
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Publish package
-        run: npx jsr publish

package/.github/workflows/typos.yml

@@ -1,15 +0,0 @@
-name: Spell Check 
-on:
-  pull_request:
-  push:
-    branches:
-      - "main"
-jobs:
-  typos:
-    name: Spell Check with Typos
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Actions Repository
-        uses: actions/checkout@v4
-      - name: Check spelling
-        uses: crate-ci/typos@master

package/src/core/build.ts

@@ -1,9 +0,0 @@
-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/constants.ts

@@ -1,7 +0,0 @@
-export const PLUGIN_NAME = 'unplugin-stylex'
-
-export const isDevelopment = (
-  process.env.NODE_ENV !== 'production' ||
-  process.env.BABEL_ENV !== 'production'
-)
-

package/src/core/options.ts

@@ -1,26 +0,0 @@
-import type { StylexOptions, UnpluginStylexOptions } from '@/types'
-import { isDevelopment } from './constants'
-
-export function getOptions(options: UnpluginStylexOptions) {
-  const stylex = options.stylex || ({} as StylexOptions)
-  const isDev = options.dev || isDevelopment
-
-  return {
-    ...options,
-    dev: options.dev || isDev,
-    stylex: {
-      filename: stylex.filename || 'stylex.css',
-      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: {
-        babelrc: (stylex.babelConfig || {}).babelrc || false,
-        plugins: (stylex.babelConfig || {}).plugins || [],
-        presets: (stylex.babelConfig || {}).presets || [],
-      },
-      ...stylex,
-    },
-  }
-}

package/src/core/plugins.ts

@@ -1,12 +0,0 @@
-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,44 +0,0 @@
-import { extname as pathExtname } from 'node:path'
-import { transformAsync } from '@babel/core'
-import jsxSyntaxPlugin from '@babel/plugin-syntax-jsx'
-import stylexBabelPlugin from '@stylexjs/babel-plugin'
-
-import { getSyntaxPlugins } from './plugins'
-
-export async function transformer(context) {
-  const { id, inputCode, options } = context
-  const stylex = options.stylex
-  const extname = pathExtname(id)
-  const stylexRules = {}
-  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 (metadata.stylex && metadata.stylex.length > 0) {
-    stylexRules[id] = metadata.stylex
-  }
-
-  if (!stylex.babelConfig?.babelrc) {
-    return { code, map, stylexRules }
-  }
-
-  return { code, stylexRules }
-}

package/src/esbuild.ts

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

package/src/index.ts

@@ -1,141 +0,0 @@
-/**
- * This entry file is for main unplugin.
- * 
- * @module
- */
-
-import * as path from 'node:path'
-
-import { createUnplugin } from 'unplugin'
-import type { UnpluginFactory, UnpluginInstance } from 'unplugin'
-import type { BuildOptions } from 'vite'
-
-import { buildStylexRules } from './core/build'
-import { PLUGIN_NAME } from './core/constants'
-import { getOptions } from './core/options'
-import { transformer } from './core/transformer'
-import type { UnpluginStylexOptions } from './types'
-
-/**
- * The main unplugin factory.
- */
-export const unpluginFactory: UnpluginFactory<UnpluginStylexOptions | undefined> = (rawOptions = {}) => {
-  const options = getOptions(rawOptions)
-  const stylexRules = {}
-  let viteConfig: { build: BuildOptions | undefined; base: string | undefined; } | null = null
-
-  return {
-    name: PLUGIN_NAME,
-
-    transformInclude(id) {
-      // webpack will contain these files, which will occur errors
-      const invalidExts = ['.json', '.html', '.jade', '.json5']
-      const extname = path.extname(id)
-      // for handle vite
-      const questionMarkIndex = extname.indexOf('?')
-      const validExtName = questionMarkIndex > -1 ? extname.slice(0, questionMarkIndex) : extname
-      return !invalidExts.includes(validExtName)
-    },
-
-    async transform(code, id) {
-      const dir = path.dirname(id)
-      const basename = path.basename(id)
-      const file = path.join(dir, basename.includes('?') ? basename.split('?')[0] : basename)
-
-      if (!options.stylex.stylexImports.some((importName) => code.includes(importName))) {
-        return
-      }
-
-      const context = {
-        id: file,
-        inputCode: code,
-        pluginContext: this,
-        options,
-      }
-
-      try {
-        const result = await transformer(context)
-
-        if (result.stylexRules && result.stylexRules[id]) {
-          stylexRules[id] = result.stylexRules[id]
-        }
-
-        return result
-      } catch (error) {
-        console.error('transform::error::', error)
-        this.error(error)
-      }
-    },
-
-    buildEnd() {
-      const fileName = options.stylex.filename
-      const collectedCSS = buildStylexRules(stylexRules, options.stylex.useCSSLayers)
-
-      if (!collectedCSS) return
-
-      this.emitFile({
-        fileName,
-        source: collectedCSS,
-        type: 'asset',
-      })
-    },
-
-    vite: {
-      config(config) {
-        viteConfig = {
-          build: config.build,
-          base: config.base,
-        }
-      },
-
-      configResolved(config) {
-        config.optimizeDeps.exclude = config.optimizeDeps.exclude || []
-        config.optimizeDeps.exclude.push('@stylexjs/open-props')
-      },
-
-      buildEnd() {
-        const fileName = `${viteConfig!.build?.assetsDir ?? 'assets'}/${options.stylex.filename}`
-        const collectedCSS = buildStylexRules(stylexRules, options.stylex.useCSSLayers)
-
-        if (!collectedCSS) return
-
-        this.emitFile({
-          fileName,
-          source: collectedCSS,
-          type: 'asset',
-        })
-      },
-
-      transformIndexHtml(html, ctx) {
-        const fileName = `${viteConfig!.build?.assetsDir ?? 'assets'}/${options.stylex.filename}`
-        const css = ctx.bundle?.[fileName]
-
-        if (!css) {
-          return html
-        }
-
-        const publicPath = path.posix.join(
-          viteConfig!.base ?? '/',
-          fileName.replace(/\\/g, '/')
-        )
-
-        return [
-          {
-            tag: 'link',
-            attrs: {
-              rel: 'stylesheet',
-              href: publicPath,
-            },
-            injectTo: 'head',
-          },
-        ]
-      },
-    },
-  }
-}
-
-export const unplugin: UnpluginInstance<UnpluginStylexOptions | undefined, boolean> = createUnplugin(unpluginFactory)
-
-export * from './types'
-
-export default unplugin

package/src/rollup.ts

@@ -1,27 +0,0 @@
-/**
- * This entry file is for Rollup plugin.
- *
- * @module
- */
-
-import { createRollupPlugin } from 'unplugin'
-import type { RollupPlugin } from 'unplugin'
-import { unpluginFactory } from './index'
-import type { UnpluginStylexInstance } from './types'
-
-const rollupPlugin: UnpluginStylexInstance<RollupPlugin | RollupPlugin[]> = createRollupPlugin(unpluginFactory)
-
-/**
- * Rollup plugin
- *
- * @example
- *
- * import stylexPlugin from 'unplugin-stylex/rollup'
- *
- * export default {
- *   plugins: [
- *     stylexPlugin(),
- *   ],
- * }
- */
-export default rollupPlugin

package/src/rspack.ts

@@ -1,29 +0,0 @@
-/**
- * This entry file is for Rspac plugin.
- *
- * @module
- */
-
-import { createRspackPlugin } from 'unplugin'
-import type { RspackPluginInstance } from 'unplugin'
-import { unpluginFactory } from './index'
-import type { UnpluginStylexInstance } from './types'
-
-type RspackPluginType = UnpluginStylexInstance<RspackPluginInstance | RspackPluginInstance[]>
-
-const rspackPlugin: RspackPluginType = createRspackPlugin(unpluginFactory)
-
-/**
- * Rsapck plugin
- *
- * @example
- *
- * import stylexPlugin from 'unplugin-stylex/rspack'
- *
- * module.exports = {
- *   plugins: [
- *     stylexPlugin(),
- *   ],
- * }
- */
-export default rspackPlugin

package/src/types.ts

@@ -1,28 +0,0 @@
-export type BabelConfig = {
-  plugins: unknown[]
-  presets: unknown[]
-  babelrc: boolean
-}
-
-export type StylexOptions = {
-  filename?: string
-  stylexImports?: string[]
-  classNamePrefix?: string
-  useCSSLayers?:  boolean
-  unstable_moduleResolution?: {
-    type: 'commonjs' | 'haste'
-    rootDir: string
-  }
-  babelConfig?: BabelConfig
-  runtimeInjection: boolean
-  aliases?: string[]
-}
-
-export type UnpluginStylexOptions = {
-  compiler?: string
-  dev?: boolean
-  enforce?: 'post' | 'pre'
-  stylex?: StylexOptions
-}
-
-export type UnpluginStylexInstance<T> = (options?: UnpluginStylexOptions) => T

package/src/vite.ts

@@ -1,28 +0,0 @@
-/**
- * This entry file is for Vite plugin.
- *
- * @module
- */
-
-import { createVitePlugin } from 'unplugin'
-import type { VitePlugin } from 'unplugin'
-import { unpluginFactory } from './index'
-import type { UnpluginStylexInstance } from './types'
-
-const vitePlugin: UnpluginStylexInstance<VitePlugin | VitePlugin[]> = createVitePlugin(unpluginFactory)
-
-/**
- * Vite example
- *
- * @example
- *
- * import { defineConfig } from 'vite'
- * import stylexPlugin from 'unplugin-stylex/vite'
- *
- * export default defineConfig({
- *   plugins: [
- *     stylexPlugin(),
- *   ],
- * })
- */
-export default vitePlugin

package/src/webpack.ts

@@ -1,27 +0,0 @@
-/**
- * This entry file is for Webpack plugin.
- *
- * @module
- */
-
-import { createWebpackPlugin } from 'unplugin'
-import type { WebpackPluginInstance } from 'unplugin'
-import { unpluginFactory } from './index'
-import type { UnpluginStylexInstance } from './types'
-
-const webpackPlugin: UnpluginStylexInstance<WebpackPluginInstance> = createWebpackPlugin(unpluginFactory)
-
-/**
- * Webpack plugin
- *
- * @example
- *
- * import stylexPlugin from 'unplugin-stylex/webpack'
- *
- * module.exports = {
- *   plugins: [
- *     stylexPlugin(),
- *   ],
- * }
- */
-export default webpackPlugin

package/typos.toml

@@ -1,10 +0,0 @@
-[files]
-extend-exclude = [
-  "*.snap",
-  "examples/*",
-]
-
-[default.extend-words]
-# Ignore false-positives
-stylex = "stylex"
-unplugin = "unplugin"

package/vitest.config.ts

@@ -1,13 +0,0 @@
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  test: {
-    coverage: {
-      exclude: [
-        'examples/**',
-        'test/**'
-      ],
-      reporter: ['text', 'json', 'html'],
-    },
-  },
-})