unplugin-stylex 0.0.1 → 0.0.2

package/.eslintignore

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

package/.eslintrc.json

@@ -1,5 +1,16 @@
 {
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "root": true,
   "rules": {
-    "semi": ["error", "always"]
+    "semi": "off",
+    "@typescript-eslint/no-explicit-any": "off"
   }
 }

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

@@ -0,0 +1,18 @@
+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/workflows/ci.yml

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,26 @@
+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}}

package/dist/{chunk-5FLQNHMU.cjs → chunk-D3OQCQYP.cjs}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
 
 
 var _chunkN4Z3Z2PUcjs = require('./chunk-N4Z3Z2PU.cjs');
@@ -41,11 +41,12 @@ var _pluginsyntaxjsx = require('@babel/plugin-syntax-jsx'); var _pluginsyntaxjsx
 var _pluginsyntaxtypescript = require('@babel/plugin-syntax-typescript'); var _pluginsyntaxtypescript2 = _interopRequireDefault(_pluginsyntaxtypescript);
 
 async function transformer(context) {
+  var _a, _b;
   const { id, source, options } = context;
   const stylex = options.stylex;
   const extname2 = path.extname(id);
   const stylexRules = {};
-  if (stylex.stylexImports.some((importName) => source.includes(importName))) {
+  if ((_b = (_a = stylex.stylexImports) == null ? void 0 : _a.some) == null ? void 0 : _b.call(_a, (importName) => source.includes(importName))) {
     const originSource = stylex.babelConfig.babelrc ? await fs.readFile(id, "utf-8") : source;
     const { code, map, metadata } = await _core.transformAsync.call(void 0, 
       originSource,
@@ -81,10 +82,11 @@ async function transformer(context) {
 }
 
 // src/index.ts
-var unpluginFactory = (rawOptions = {}, meta) => {
+var unpluginFactory = (rawOptions = {}) => {
   const options = getOptions(rawOptions);
   const filter = _pluginutils.createFilter.call(void 0, options.include, options.exclude);
   const stylexRules = {};
+  let viteBuildConfig = null;
   return {
     name: _chunkN4Z3Z2PUcjs.PLUGIN_NAME,
     enforce: options.enforce,
@@ -110,10 +112,29 @@ var unpluginFactory = (rawOptions = {}, meta) => {
     },
     buildEnd() {
       const rules = Object.values(stylexRules).flat();
-      if (rules.length > 0) {
+      if (rules.length === 0)
+        return;
+      const collectedCSS = _babelplugin2.default.processStylexRules(rules, options.stylex.useCSSLayers);
+      const fileName = options.stylex.filename;
+      this.emitFile({
+        fileName,
+        source: collectedCSS,
+        type: "asset"
+      });
+    },
+    vite: {
+      config(config) {
+        viteBuildConfig = config.build;
+      },
+      buildEnd() {
+        var _a;
+        const rules = Object.values(stylexRules).flat();
+        if (!viteBuildConfig || rules.length === 0)
+          return;
         const collectedCSS = _babelplugin2.default.processStylexRules(rules, options.stylex.useCSSLayers);
+        const fileName = `${_nullishCoalesce(((_a = viteBuildConfig.build) == null ? void 0 : _a.assetsDir), () => ( "assets"))}/${options.stylex.filename}`;
         this.emitFile({
-          fileName: options.stylex.filename,
+          fileName,
           source: collectedCSS,
           type: "asset"
         });

package/dist/{chunk-R3ITJTXO.js → chunk-XQ5JPTTJ.js}

@@ -41,11 +41,12 @@ import jsxSyntaxPlugin from "@babel/plugin-syntax-jsx";
 import typescriptSyntaxPlugin from "@babel/plugin-syntax-typescript";
 import stylexBabelPlugin from "@stylexjs/babel-plugin";
 async function transformer(context) {
+  var _a, _b;
   const { id, source, options } = context;
   const stylex = options.stylex;
   const extname2 = path.extname(id);
   const stylexRules = {};
-  if (stylex.stylexImports.some((importName) => source.includes(importName))) {
+  if ((_b = (_a = stylex.stylexImports) == null ? void 0 : _a.some) == null ? void 0 : _b.call(_a, (importName) => source.includes(importName))) {
     const originSource = stylex.babelConfig.babelrc ? await fs.readFile(id, "utf-8") : source;
     const { code, map, metadata } = await transformAsync(
       originSource,
@@ -81,10 +82,11 @@ async function transformer(context) {
 }
 
 // src/index.ts
-var unpluginFactory = (rawOptions = {}, meta) => {
+var unpluginFactory = (rawOptions = {}) => {
   const options = getOptions(rawOptions);
   const filter = createFilter(options.include, options.exclude);
   const stylexRules = {};
+  let viteBuildConfig = null;
   return {
     name: PLUGIN_NAME,
     enforce: options.enforce,
@@ -110,10 +112,29 @@ var unpluginFactory = (rawOptions = {}, meta) => {
     },
     buildEnd() {
       const rules = Object.values(stylexRules).flat();
-      if (rules.length > 0) {
+      if (rules.length === 0)
+        return;
+      const collectedCSS = stylexBabelPlugin2.processStylexRules(rules, options.stylex.useCSSLayers);
+      const fileName = options.stylex.filename;
+      this.emitFile({
+        fileName,
+        source: collectedCSS,
+        type: "asset"
+      });
+    },
+    vite: {
+      config(config) {
+        viteBuildConfig = config.build;
+      },
+      buildEnd() {
+        var _a;
+        const rules = Object.values(stylexRules).flat();
+        if (!viteBuildConfig || rules.length === 0)
+          return;
         const collectedCSS = stylexBabelPlugin2.processStylexRules(rules, options.stylex.useCSSLayers);
+        const fileName = `${((_a = viteBuildConfig.build) == null ? void 0 : _a.assetsDir) ?? "assets"}/${options.stylex.filename}`;
         this.emitFile({
-          fileName: options.stylex.filename,
+          fileName,
           source: collectedCSS,
           type: "asset"
         });

package/dist/esbuild.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk5FLQNHMUcjs = require('./chunk-5FLQNHMU.cjs');
+var _chunkD3OQCQYPcjs = require('./chunk-D3OQCQYP.cjs');
 require('./chunk-N4Z3Z2PU.cjs');
 
 // src/esbuild.ts
 var _unplugin = require('unplugin');
-var esbuild_default = _unplugin.createEsbuildPlugin.call(void 0, _chunk5FLQNHMUcjs.unpluginFactory);
+var esbuild_default = _unplugin.createEsbuildPlugin.call(void 0, _chunkD3OQCQYPcjs.unpluginFactory);
 
 
 exports.default = esbuild_default;

package/dist/esbuild.js

@@ -1,6 +1,6 @@
 import {
   unpluginFactory
-} from "./chunk-R3ITJTXO.js";
+} from "./chunk-XQ5JPTTJ.js";
 import "./chunk-36ARBXVP.js";
 
 // src/esbuild.ts

package/dist/index.cjs

@@ -2,10 +2,10 @@
 
 
 
-var _chunk5FLQNHMUcjs = require('./chunk-5FLQNHMU.cjs');
+var _chunkD3OQCQYPcjs = require('./chunk-D3OQCQYP.cjs');
 require('./chunk-N4Z3Z2PU.cjs');
 
 
 
 
-exports.default = _chunk5FLQNHMUcjs.src_default; exports.unplugin = _chunk5FLQNHMUcjs.unplugin; exports.unpluginFactory = _chunk5FLQNHMUcjs.unpluginFactory;
+exports.default = _chunkD3OQCQYPcjs.src_default; exports.unplugin = _chunkD3OQCQYPcjs.unplugin; exports.unpluginFactory = _chunkD3OQCQYPcjs.unpluginFactory;

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   src_default,
   unplugin,
   unpluginFactory
-} from "./chunk-R3ITJTXO.js";
+} from "./chunk-XQ5JPTTJ.js";
 import "./chunk-36ARBXVP.js";
 export {
   src_default as default,

package/dist/rspack.cjs

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

package/dist/rspack.d.cts

@@ -1,3 +1,7 @@
-declare const _default: any;
+import * as unplugin from 'unplugin';
+import { UnpluginStylexOptions } from './types.cjs';
+import '@rollup/pluginutils';
+
+declare const _default: (options?: UnpluginStylexOptions) => unplugin.RspackPluginInstance;
 
 export { _default as default };

package/dist/rspack.d.ts

@@ -1,3 +1,7 @@
-declare const _default: any;
+import * as unplugin from 'unplugin';
+import { UnpluginStylexOptions } from './types.js';
+import '@rollup/pluginutils';
+
+declare const _default: (options?: UnpluginStylexOptions) => unplugin.RspackPluginInstance;
 
 export { _default as default };

package/dist/rspack.js

@@ -1,6 +1,6 @@
 import {
   unpluginFactory
-} from "./chunk-R3ITJTXO.js";
+} from "./chunk-XQ5JPTTJ.js";
 import "./chunk-36ARBXVP.js";
 
 // src/rspack.ts

package/dist/types.d.cts

@@ -1,8 +1,8 @@
 import { FilterPattern } from '@rollup/pluginutils';
 
 type BabelConfig = {
-    plugins: any[];
-    presets: any[];
+    plugins: unknown[];
+    presets: unknown[];
     babelrc: boolean;
 };
 type StylexOptions = {

package/dist/types.d.ts

@@ -1,8 +1,8 @@
 import { FilterPattern } from '@rollup/pluginutils';
 
 type BabelConfig = {
-    plugins: any[];
-    presets: any[];
+    plugins: unknown[];
+    presets: unknown[];
     babelrc: boolean;
 };
 type StylexOptions = {

package/dist/vite.cjs

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

package/dist/vite.d.cts

@@ -1,3 +1,7 @@
-declare const _default: any;
+import * as vite from 'vite';
+import { UnpluginStylexOptions } from './types.cjs';
+import '@rollup/pluginutils';
+
+declare const _default: (options?: UnpluginStylexOptions) => vite.Plugin<any> | vite.Plugin<any>[];
 
 export { _default as default };

package/dist/vite.d.ts

@@ -1,3 +1,7 @@
-declare const _default: any;
+import * as vite from 'vite';
+import { UnpluginStylexOptions } from './types.js';
+import '@rollup/pluginutils';
+
+declare const _default: (options?: UnpluginStylexOptions) => vite.Plugin<any> | vite.Plugin<any>[];
 
 export { _default as default };

package/dist/vite.js

@@ -1,6 +1,6 @@
 import {
   unpluginFactory
-} from "./chunk-R3ITJTXO.js";
+} from "./chunk-XQ5JPTTJ.js";
 import "./chunk-36ARBXVP.js";
 
 // src/vite.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unplugin-stylex",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "packageManager": "pnpm@8.11.0",
   "description": "Unplugin for stylex",
   "repository": "https://github.com/eryue0220/unplugin-stylex",
@@ -51,7 +51,10 @@
     "build": "tsup src/*.ts --format cjs,esm --dts --splitting --clean",
     "test": "vitest",
     "test:update": "vitest -u",
-    "test:coverage": "vitest --coverage"
+    "test:cov": "vitest --coverage",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "check": "pnpm run lint && pnpm run typecheck",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "engines": {
     "node": ">=16.14.0"
@@ -67,6 +70,10 @@
   },
   "devDependencies": {
     "@types/node": "^20.10.5",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "@vitest/coverage-v8": "^1.1.1",
+    "eslint": "^8.56.0",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.10",

package/src/core/transformer.ts

@@ -13,7 +13,7 @@ export async function transformer(context) {
   const extname = path.extname(id)
   const stylexRules = {}
 
-  if (stylex.stylexImports.some((importName) => source.includes(importName))) {
+  if (stylex.stylexImports?.some?.((importName) => source.includes(importName))) {
     const originSource = stylex.babelConfig.babelrc
       ? await fs.readFile(id, 'utf-8')
       : source

package/src/core/utils.ts

@@ -1,4 +1,4 @@
-import type { UnpluginStylexOptions, BabelConfig } from '@/types'
+import type { UnpluginStylexOptions } from '@/types'
 import { isDevelopment } from './constants'
 
 export function getOptions(options: UnpluginStylexOptions = ({} as UnpluginStylexOptions)) {

package/src/index.ts

@@ -8,10 +8,11 @@ import { getOptions } from './core/utils'
 import { transformer } from './core/transformer'
 import type { UnpluginStylexOptions } from './types'
 
-export const unpluginFactory: UnpluginFactory<UnpluginStylexOptions | undefined> = (rawOptions = {}, meta) => {
+export const unpluginFactory: UnpluginFactory<UnpluginStylexOptions | undefined> = (rawOptions = {}) => {
   const options = getOptions(rawOptions)
   const filter = createFilter(options.include, options.exclude)
   const stylexRules = {}
+  let viteBuildConfig = null
 
   return {
     name: PLUGIN_NAME,
@@ -44,10 +45,30 @@ export const unpluginFactory: UnpluginFactory<UnpluginStylexOptions | undefined>
 
     buildEnd() {
       const rules = Object.values(stylexRules).flat()
-      if (rules.length > 0) {
+      if (rules.length === 0) return
+
+      const collectedCSS = (stylexBabelPlugin as any).processStylexRules(rules, options.stylex.useCSSLayers)
+      const fileName = options.stylex.filename
+
+      this.emitFile({
+        fileName,
+        source: collectedCSS,
+        type: 'asset',
+      })
+    },
+    vite: {
+      config(config) {
+        viteBuildConfig = config.build;
+      },
+      buildEnd() {
+        const rules = Object.values(stylexRules).flat()
+        if (!viteBuildConfig || rules.length === 0) return
+
         const collectedCSS = (stylexBabelPlugin as any).processStylexRules(rules, options.stylex.useCSSLayers)
+        const fileName = `${viteBuildConfig.build?.assetsDir ?? 'assets'}/${options.stylex.filename}`
+
         this.emitFile({
-          fileName: options.stylex.filename,
+          fileName,
           source: collectedCSS,
           type: 'asset',
         })

package/src/rspack.ts

@@ -1,4 +1,4 @@
 import { createRspackPlugin } from 'unplugin'
 import { unpluginFactory } from '.'
 
-export default createRspackPlugin(unpluginFactory) as any
+export default createRspackPlugin(unpluginFactory)

package/src/types.ts

@@ -1,8 +1,8 @@
 import type { FilterPattern } from '@rollup/pluginutils'
 
 export type BabelConfig = {
-  plugins: any[]
-  presets: any[]
+  plugins: unknown[]
+  presets: unknown[]
   babelrc: boolean
 }
 

package/src/vite.ts

@@ -1,4 +1,4 @@
 import { createVitePlugin } from 'unplugin'
 import { unpluginFactory } from '.'
 
-export default createVitePlugin(unpluginFactory) as any
+export default createVitePlugin(unpluginFactory)

package/tsconfig.json

@@ -8,11 +8,16 @@
     "lib": ["ESNext"],
     "moduleResolution": "Node",
     "preserveSymlinks": true,
+    "module": "esnext",
+    "skipLibCheck": true,
     "paths": {
       "@/*": ["./src/*"]
     }
   },
   "include": [
     "src"
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }

package/vitest.config.ts

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