@stylexjs/rollup-plugin 0.7.4 → 0.8.0

package/README.md

@@ -30,4 +30,29 @@ const config = {
 };
 
 export default config;
-```
+```
+## Plugin Options
+It inherits all options from `@stylexjs/babel-plugin` and can be found [here 🔗](https://stylexjs.com/docs/api/configuration/babel-plugin/). Along with other options like <br/>
+
+### fileName
+```js
+fileName: string // Default: 'stylex.css'
+```
+The name of the output css file.
+
+---
+### useCSSLayers
+```js
+useCSSLayers: boolean // Default: false
+```
+Enabling this option switches Stylex from using `:not(#\#)` to using `@layers` for handling CSS specificity.
+
+---
+### babelConfig
+```js
+babelConfig: {
+  plugins: PluginItem[],
+  presets: PluginItem[]
+} // Default: { plugins: [], presets: [] }
+```
+List of custom babel plugins and presets which can be used during code transformation.

package/flow_modules/rollup/index.js

@@ -555,7 +555,7 @@ export type OutputPlugin = {
   // eslint-disable-next-line no-redeclare
   ...Partial<{ [K in OutputPluginHooks]: PluginHooks[K] }>,
   // eslint-disable-next-line no-redeclare
-  ...Partial<{ [K in AddonHooks]: ObjectHook<AddonHook> }>,
+  ...Partial<{ [_K in AddonHooks]: ObjectHook<AddonHook> }>,
   cacheKey?: string,
   name: string,
   version?: string,

package/lib/es/index.mjs

@@ -4,6 +4,9 @@ import flowSyntaxPlugin from '@babel/plugin-syntax-flow';
 import jsxSyntaxPlugin from '@babel/plugin-syntax-jsx';
 import typescriptSyntaxPlugin from '@babel/plugin-syntax-typescript';
 import path from 'path';
+import { transform } from 'lightningcss';
+import browserslist from 'browserslist';
+import { browserslistToTargets } from 'lightningcss';
 const IS_DEV_ENV = process.env.NODE_ENV === 'development' || process.env.BABEL_ENV === 'development';
 export default function stylexPlugin() {
   let {
@@ -19,6 +22,7 @@ export default function stylexPlugin() {
     } = {},
     importSources = ['stylex', '@stylexjs/stylex'],
     useCSSLayers = false,
+    lightningcssOptions,
     ...options
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let stylexRules = {};
@@ -31,9 +35,18 @@ export default function stylexPlugin() {
       const rules = Object.values(stylexRules).flat();
       if (rules.length > 0) {
         const collectedCSS = stylexBabelPlugin.processStylexRules(rules, useCSSLayers);
+        const {
+          code
+        } = transform({
+          targets: browserslistToTargets(browserslist('>= 1%')),
+          ...lightningcssOptions,
+          filename: fileName,
+          code: Buffer.from(collectedCSS)
+        });
+        const processedCSS = code.toString();
         this.emitFile({
           fileName,
-          source: collectedCSS,
+          source: processedCSS,
           type: 'asset'
         });
       }

package/lib/index.d.ts

@@ -9,6 +9,7 @@
 
 import { type PluginItem } from '@babel/core';
 import type { Options } from '@stylexjs/babel-plugin';
+import type { TransformOptions } from 'lightningcss';
 import type { Plugin } from 'rollup';
 export type PluginOptions = Readonly<
   Omit<
@@ -20,6 +21,10 @@ export type PluginOptions = Readonly<
         presets?: ReadonlyArray<PluginItem>;
       }>;
       useCSSLayers?: boolean;
+      lightningcssOptions?: Omit<
+        TransformOptions<{}>,
+        'code' | 'filename' | 'visitor'
+      >;
     })
   > & {
     fileName?: string;
@@ -28,6 +33,10 @@ export type PluginOptions = Readonly<
       presets?: ReadonlyArray<PluginItem>;
     }>;
     useCSSLayers?: boolean;
+    lightningcssOptions?: Omit<
+      TransformOptions<{}>,
+      'code' | 'filename' | 'visitor'
+    >;
   }
 >;
 declare function stylexPlugin($$PARAM_0$$: PluginOptions): Plugin;

package/lib/index.js

@@ -10,7 +10,9 @@ var _pluginSyntaxFlow = _interopRequireDefault(require("@babel/plugin-syntax-flo
 var _pluginSyntaxJsx = _interopRequireDefault(require("@babel/plugin-syntax-jsx"));
 var _pluginSyntaxTypescript = _interopRequireDefault(require("@babel/plugin-syntax-typescript"));
 var _path = _interopRequireDefault(require("path"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _lightningcss = require("lightningcss");
+var _browserslist = _interopRequireDefault(require("browserslist"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const IS_DEV_ENV = process.env.NODE_ENV === 'development' || process.env.BABEL_ENV === 'development';
 function stylexPlugin() {
   let {
@@ -26,6 +28,7 @@ function stylexPlugin() {
     } = {},
     importSources = ['stylex', '@stylexjs/stylex'],
     useCSSLayers = false,
+    lightningcssOptions,
     ...options
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let stylexRules = {};
@@ -38,9 +41,18 @@ function stylexPlugin() {
       const rules = Object.values(stylexRules).flat();
       if (rules.length > 0) {
         const collectedCSS = _babelPlugin.default.processStylexRules(rules, useCSSLayers);
+        const {
+          code
+        } = (0, _lightningcss.transform)({
+          targets: (0, _lightningcss.browserslistToTargets)((0, _browserslist.default)('>= 1%')),
+          ...lightningcssOptions,
+          filename: fileName,
+          code: Buffer.from(collectedCSS)
+        });
+        const processedCSS = code.toString();
         this.emitFile({
           fileName,
-          source: collectedCSS,
+          source: processedCSS,
           type: 'asset'
         });
       }

package/lib/index.js.flow

@@ -9,8 +9,8 @@
 
 import { type PluginItem } from '../flow_modules/@babel/core';
 import type { Options } from '@stylexjs/babel-plugin';
+import type { TransformOptions } from 'lightningcss';
 import type { Plugin } from '../flow_modules/rollup';
-
 export type PluginOptions = $ReadOnly<{
   ...Partial<Options>,
   fileName?: string,
@@ -19,6 +19,10 @@ export type PluginOptions = $ReadOnly<{
     presets?: $ReadOnlyArray<PluginItem>,
   }>,
   useCSSLayers?: boolean,
+  lightningcssOptions?: Omit<
+    TransformOptions<{}>,
+    'code' | 'filename' | 'visitor',
+  >,
   ...
 }>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/rollup-plugin",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "Rollup plugin for StyleX",
   "main": "./lib/index.js",
   "module": "./lib/es/index.mjs",
@@ -32,10 +32,11 @@
   },
   "dependencies": {
     "@babel/core": "^7.23.9",
-    "@stylexjs/babel-plugin": "0.7.4",
     "@babel/plugin-syntax-flow": "^7.23.3",
     "@babel/plugin-syntax-jsx": "^7.23.3",
-    "@babel/plugin-syntax-typescript": "^7.23.3"
+    "@babel/plugin-syntax-typescript": "^7.23.3",
+    "@stylexjs/babel-plugin": "0.8.0",
+    "lightningcss": "^1.27.0"
   },
   "files": [
     "flow_modules/*",