@stylexjs/unplugin 0.17.0

package/README.md

@@ -0,0 +1,66 @@
+# @stylexjs/unplugin
+
+Universal bundler plugin for StyleX built on top of unplugin. It compiles StyleX at build time, aggregates CSS from all transformed modules, and appends the result into an existing CSS asset produced by your bundler.
+
+- Works with Vite/Rollup and Webpack/Rspack via unplugin.
+- Ensures a single CSS output for StyleX by injecting into one existing CSS file.
+
+## Install
+
+```
+npm i -D @stylexjs/unplugin
+```
+
+## Usage
+
+Vite:
+
+```js
+// vite.config.ts
+import { defineConfig } from 'vite'
+import stylex from '@stylexjs/unplugin'
+
+export default defineConfig({
+  plugins: [stylex()]
+})
+```
+
+Rollup:
+
+```js
+// rollup.config.mjs
+import stylex from '@stylexjs/unplugin'
+
+export default {
+  // ...
+  plugins: [stylex()],
+}
+```
+
+Webpack:
+
+```js
+// webpack.config.js
+const stylex = require('@stylexjs/unplugin').default
+
+module.exports = {
+  // ...
+  plugins: [stylex()],
+}
+```
+
+## Options
+
+- `dev`: boolean, defaults based on `NODE_ENV`.
+- `importSources`: array of import sources to scan, default `['stylex', '@stylexjs/stylex']`.
+- `useCSSLayers`: boolean, emit CSS layers.
+- `babelConfig`: `{ plugins, presets }` to merge.
+- `unstable_moduleResolution`: forward to StyleX Babel plugin.
+- `lightningcssOptions`: pass-through options for lightningcss.
+- `cssInjectionTarget`: optional `(fileName: string) => boolean` to pick a CSS asset to append to. If not provided, the plugin picks `index.css`, `style.css`, or the first `.css` asset.
+
+## Notes
+
+- The plugin always aggregates all StyleX CSS across modules in a compilation and injects it into one CSS asset. With multiple outputs (e.g. client/SSR), each output will get its own aggregated CSS.
+- If the bundler does not produce any CSS assets, the plugin logs a warning and skips injection.
+

package/lib/consts.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VIRTUAL_STYLEX_RUNTIME_SCRIPT = exports.VIRTUAL_STYLEX_CSS_ONLY_SCRIPT = exports.DEV_RUNTIME_SCRIPT = exports.DEV_RUNTIME_PATH = exports.DEV_CSS_PATH = exports.DEV_AFTER_UPDATE_DELAY = void 0;
+const DEV_CSS_PATH = exports.DEV_CSS_PATH = '/virtual:stylex.css';
+const DEV_RUNTIME_PATH = exports.DEV_RUNTIME_PATH = '/virtual:stylex.js';
+const DEV_AFTER_UPDATE_DELAY = exports.DEV_AFTER_UPDATE_DELAY = 180;
+const VIRTUAL_STYLEX_RUNTIME_SCRIPT = exports.VIRTUAL_STYLEX_RUNTIME_SCRIPT = `
+const STYLE_ID = '__stylex_virtual__';
+const DEV_CSS_PATH = '${DEV_CSS_PATH}';
+const AFTER_UPDATE_DELAY = ${DEV_AFTER_UPDATE_DELAY};
+let lastCSS = '';
+
+function ensure(){
+  let el=document.getElementById(STYLE_ID);
+  if (!el) { 
+    el=document.createElement('style');
+    el.id=STYLE_ID;document.head.appendChild(el);
+  }
+  return el;
+}
+
+function disableLink() {
+  try{
+    const links = [...document.querySelectorAll('link[rel="stylesheet"]')];
+    for (const l of links) {
+      if(typeof l.href==='string' && l.href.includes(DEV_CSS_PATH)) {
+        l.disabled=true;
+      }
+    }
+  } catch {}
+}
+
+async function fetchCSS() {
+  const t = Date.now();
+  const r = await fetch(DEV_CSS_PATH + '?t=' + t, {cache: 'no-store'});
+  return r.text();
+}
+
+async function update(){
+  try {
+    const css = await fetchCSS();
+    if (css!==lastCSS) {
+      ensure().textContent = css;
+      disableLink();
+      lastCSS = css;
+    }
+  } catch {}
+}
+
+update();
+
+if(import.meta.hot){
+  import.meta.hot.on('stylex:css-update', update);
+  import.meta.hot.on('vite:afterUpdate', () => setTimeout(update, AFTER_UPDATE_DELAY));
+  import.meta.hot.dispose(() => {
+    const el = document.getElementById(STYLE_ID);
+    if (el && el.parentNode) el.parentNode.removeChild(el);
+  });
+}
+
+export {};
+`;
+const VIRTUAL_STYLEX_CSS_ONLY_SCRIPT = exports.VIRTUAL_STYLEX_CSS_ONLY_SCRIPT = `
+const DEV_CSS_PATH='${DEV_CSS_PATH}';
+
+function bust() {
+  try {
+    const links = [...document.querySelectorAll('link[rel="stylesheet"]')];
+    for (const l of links) {
+      if (typeof l.href==='string' && l.href.includes(DEV_CSS_PATH)) {
+        const u = new URL(l.href, location.origin);
+        u.searchParams.set('t', String(Date.now()));
+        l.href=u.pathname+u.search;
+      }
+    }
+  } catch {}
+}
+
+// initial attempt to ensure we have a fresh version after client connects
+if (document.readyState !== 'loading') {
+  bust();
+} else {
+  document.addEventListener('DOMContentLoaded', bust);
+}
+
+if (import.meta.hot){
+  import.meta.hot.on('stylex:css-update', bust);
+}
+
+export {};
+`;
+const DEV_RUNTIME_SCRIPT = exports.DEV_RUNTIME_SCRIPT = `
+const STYLE_ID='__stylex_virtual__';
+const DEV_CSS_PATH = '${DEV_CSS_PATH}';
+const AFTER_UPDATE_DELAY = 180;
+const POLL_INTERVAL = 800;
+let lastCSS='';
+
+function ensure() {
+  let el = document.getElementById(STYLE_ID);
+  if(!el){
+    el = document.createElement('style');
+    el.id = STYLE_ID;
+    document.head.appendChild(el);
+  }
+  return el;
+}
+function disableLink() {
+  try {
+    const links = [ ...document.querySelectorAll('link[rel="stylesheet"]') ];
+    for(const l of links) {
+      if(typeof l.href==='string' && l.href.includes(DEV_CSS_PATH)) {
+        l.disabled=true;
+      }
+    }
+  } catch {
+    // ignore
+  }
+}
+async function fetchCSS(){
+  const t=Date.now();
+  const r=await fetch(DEV_CSS_PATH+'?t='+t,{cache:'no-store'});
+  return r.text();
+}
+async function update(){
+  try {
+    const css=await fetchCSS();
+    if(css!==lastCSS){
+      ensure().textContent = css;
+      disableLink();
+      lastCSS = css;
+    }
+  } catch {}
+}
+update();
+
+if(import.meta.hot){
+  import.meta.hot.on('stylex:css-update', update);
+  import.meta.hot.on('vite:afterUpdate',() => setTimeout(update, AFTER_UPDATE_DELAY));
+}
+`;

package/lib/dev-inject-middleware.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.devInjectMiddleware = void 0;
+var _consts = require("./consts");
+const devInjectMiddleware = (req, res, next) => {
+  if (!req.url) return next();
+  if (req.url.startsWith(_consts.DEV_RUNTIME_PATH)) {
+    res.statusCode = 200;
+    res.setHeader('Content-Type', 'application/javascript');
+    res.end(_consts.DEV_RUNTIME_SCRIPT);
+    return;
+  }
+  next();
+};
+exports.devInjectMiddleware = devInjectMiddleware;

package/lib/es/consts.mjs

@@ -0,0 +1,138 @@
+export const DEV_CSS_PATH = '/virtual:stylex.css';
+export const DEV_RUNTIME_PATH = '/virtual:stylex.js';
+export const DEV_AFTER_UPDATE_DELAY = 180;
+export const VIRTUAL_STYLEX_RUNTIME_SCRIPT = `
+const STYLE_ID = '__stylex_virtual__';
+const DEV_CSS_PATH = '${DEV_CSS_PATH}';
+const AFTER_UPDATE_DELAY = ${DEV_AFTER_UPDATE_DELAY};
+let lastCSS = '';
+
+function ensure(){
+  let el=document.getElementById(STYLE_ID);
+  if (!el) { 
+    el=document.createElement('style');
+    el.id=STYLE_ID;document.head.appendChild(el);
+  }
+  return el;
+}
+
+function disableLink() {
+  try{
+    const links = [...document.querySelectorAll('link[rel="stylesheet"]')];
+    for (const l of links) {
+      if(typeof l.href==='string' && l.href.includes(DEV_CSS_PATH)) {
+        l.disabled=true;
+      }
+    }
+  } catch {}
+}
+
+async function fetchCSS() {
+  const t = Date.now();
+  const r = await fetch(DEV_CSS_PATH + '?t=' + t, {cache: 'no-store'});
+  return r.text();
+}
+
+async function update(){
+  try {
+    const css = await fetchCSS();
+    if (css!==lastCSS) {
+      ensure().textContent = css;
+      disableLink();
+      lastCSS = css;
+    }
+  } catch {}
+}
+
+update();
+
+if(import.meta.hot){
+  import.meta.hot.on('stylex:css-update', update);
+  import.meta.hot.on('vite:afterUpdate', () => setTimeout(update, AFTER_UPDATE_DELAY));
+  import.meta.hot.dispose(() => {
+    const el = document.getElementById(STYLE_ID);
+    if (el && el.parentNode) el.parentNode.removeChild(el);
+  });
+}
+
+export {};
+`;
+export const VIRTUAL_STYLEX_CSS_ONLY_SCRIPT = `
+const DEV_CSS_PATH='${DEV_CSS_PATH}';
+
+function bust() {
+  try {
+    const links = [...document.querySelectorAll('link[rel="stylesheet"]')];
+    for (const l of links) {
+      if (typeof l.href==='string' && l.href.includes(DEV_CSS_PATH)) {
+        const u = new URL(l.href, location.origin);
+        u.searchParams.set('t', String(Date.now()));
+        l.href=u.pathname+u.search;
+      }
+    }
+  } catch {}
+}
+
+// initial attempt to ensure we have a fresh version after client connects
+if (document.readyState !== 'loading') {
+  bust();
+} else {
+  document.addEventListener('DOMContentLoaded', bust);
+}
+
+if (import.meta.hot){
+  import.meta.hot.on('stylex:css-update', bust);
+}
+
+export {};
+`;
+export const DEV_RUNTIME_SCRIPT = `
+const STYLE_ID='__stylex_virtual__';
+const DEV_CSS_PATH = '${DEV_CSS_PATH}';
+const AFTER_UPDATE_DELAY = 180;
+const POLL_INTERVAL = 800;
+let lastCSS='';
+
+function ensure() {
+  let el = document.getElementById(STYLE_ID);
+  if(!el){
+    el = document.createElement('style');
+    el.id = STYLE_ID;
+    document.head.appendChild(el);
+  }
+  return el;
+}
+function disableLink() {
+  try {
+    const links = [ ...document.querySelectorAll('link[rel="stylesheet"]') ];
+    for(const l of links) {
+      if(typeof l.href==='string' && l.href.includes(DEV_CSS_PATH)) {
+        l.disabled=true;
+      }
+    }
+  } catch {
+    // ignore
+  }
+}
+async function fetchCSS(){
+  const t=Date.now();
+  const r=await fetch(DEV_CSS_PATH+'?t='+t,{cache:'no-store'});
+  return r.text();
+}
+async function update(){
+  try {
+    const css=await fetchCSS();
+    if(css!==lastCSS){
+      ensure().textContent = css;
+      disableLink();
+      lastCSS = css;
+    }
+  } catch {}
+}
+update();
+
+if(import.meta.hot){
+  import.meta.hot.on('stylex:css-update', update);
+  import.meta.hot.on('vite:afterUpdate',() => setTimeout(update, AFTER_UPDATE_DELAY));
+}
+`;

package/lib/es/dev-inject-middleware.mjs

@@ -0,0 +1,11 @@
+import { DEV_RUNTIME_SCRIPT, DEV_RUNTIME_PATH } from "./consts.mjs";
+export const devInjectMiddleware = (req, res, next) => {
+  if (!req.url) return next();
+  if (req.url.startsWith(DEV_RUNTIME_PATH)) {
+    res.statusCode = 200;
+    res.setHeader('Content-Type', 'application/javascript');
+    res.end(DEV_RUNTIME_SCRIPT);
+    return;
+  }
+  next();
+};