@fastkit/plugboy-vanilla-extract-plugin 4.0.0-next.7 → 4.0.0-next.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,6 +5,21 @@ import { vanillaExtractPlugin as vanillaExtractPlugin$1 } from "@vanilla-extract
5
5
  const PLUGIN_NAME = "plugboy-vanilla-extract";
6
6
  //#endregion
7
7
  //#region src/plugin.ts
8
+ /**
9
+ * Temporary file name for the CSS that tsdown's own CSS pipeline emits.
10
+ *
11
+ * A package can have two independent sources of CSS:
12
+ * - tsdown's built-in CSS handling, for plain `.css` / `.scss` imports.
13
+ * - `@vanilla-extract/rollup-plugin`, for `.css.ts` files (extracted into a
14
+ * single bundle named after the package).
15
+ *
16
+ * If both are pointed at the same final file name they collide
17
+ * (`FILE_NAME_CONFLICT` — one silently overwrites the other, dropping all of
18
+ * the vanilla-extract component CSS). To avoid that we route tsdown's CSS to
19
+ * this temporary name and merge it into the vanilla-extract bundle in
20
+ * `generateBundle`.
21
+ */
22
+ const TSDOWN_CSS_FILE_NAME = "__ve-tsdown__.css";
8
23
  async function createVanillaExtractPlugin(options = {}) {
9
24
  return definePlugin({
10
25
  name: PLUGIN_NAME,
@@ -14,7 +29,7 @@ async function createVanillaExtractPlugin(options = {}) {
14
29
  const cssFileName = `${entryIds.includes(".") ? ctx.dir.basename : entryIds[0] ?? ctx.dir.basename}.css`;
15
30
  ctx.css = {
16
31
  splitting: false,
17
- fileName: cssFileName
32
+ fileName: TSDOWN_CSS_FILE_NAME
18
33
  };
19
34
  ctx.mergeExternals(/@vanilla-extract/);
20
35
  ctx.meta.hasVanillaExtract = !!await findFile(ctx.dirs.src.value, /\.css\.ts$/);
@@ -37,6 +52,19 @@ async function createVanillaExtractPlugin(options = {}) {
37
52
  return original ?? "assets/[name]-[hash][extname]";
38
53
  };
39
54
  return opts;
55
+ },
56
+ generateBundle(_opts, bundle) {
57
+ const tmp = bundle[TSDOWN_CSS_FILE_NAME];
58
+ const tmpCss = tmp && tmp.type === "asset" ? tmp.source.toString() : "";
59
+ if (tmp) delete bundle[TSDOWN_CSS_FILE_NAME];
60
+ if (!tmpCss) return;
61
+ const veAsset = bundle[cssFileName];
62
+ if (veAsset && veAsset.type === "asset") veAsset.source = `${tmpCss}\n${veAsset.source.toString()}`;
63
+ else this.emitFile({
64
+ type: "asset",
65
+ fileName: cssFileName,
66
+ source: tmpCss
67
+ });
40
68
  }
41
69
  });
42
70
  }
@@ -1 +1 @@
1
- {"version":3,"file":"plugboy-vanilla-extract-plugin.mjs","names":["vanillaExtractPlugin"],"sources":["../src/types.ts","../src/plugin.ts","../src/vite.ts"],"sourcesContent":["import { Plugin } from '@fastkit/plugboy';\nimport type { vanillaExtractPlugin as rollupPlugin } from '@vanilla-extract/rollup-plugin';\n\ntype VanillaExtractPluginOptions = Omit<\n NonNullable<Parameters<typeof rollupPlugin>[0]>,\n 'extract'\n>;\n\nexport type PrependFnResultValue = string | void;\n\nexport type PrependFn = (ctx: {\n cssFileName: string;\n}) => PrependFnResultValue | Promise<PrependFnResultValue>;\n\nexport interface PluginOptions extends Pick<\n VanillaExtractPluginOptions,\n 'identifiers' | 'esbuildOptions'\n> {\n /**\n * Inserts arbitrary code at the beginning of the generated CSS bundle.\n * This is useful for injecting global directives or comments.\n */\n prepend?: string | PrependFn;\n}\n\nexport const PLUGIN_NAME = 'plugboy-vanilla-extract';\n\nexport interface VanillaExtractPlugin extends Plugin {\n name: typeof PLUGIN_NAME;\n _options: PluginOptions;\n}\n","import { definePlugin, findFile, type Plugin } from '@fastkit/plugboy';\n// import { TSDOWN_CSS_FILE_NAME } from './_origin';\nimport { vanillaExtractPlugin } from '@vanilla-extract/rollup-plugin';\nimport { VanillaExtractPlugin, PluginOptions, PLUGIN_NAME } from './types';\n// import path from 'node:path';\n\ndeclare module '@fastkit/plugboy' {\n export interface WorkspaceMeta {\n hasVanillaExtract: boolean;\n }\n}\n\nexport async function createVanillaExtractPlugin(options: PluginOptions = {}) {\n return definePlugin<VanillaExtractPlugin>({\n name: PLUGIN_NAME,\n _options: options,\n hooks: {\n async setupWorkspace(ctx, getWorkspace) {\n // Derive the final CSS file name from the workspace entry, mirroring the\n // way plugboy names the JS output: the main entry (`.`) maps to the\n // package directory name (e.g. `vue-app-layout`), other entries keep\n // their id. Since `splitting: false` produces a single combined CSS for\n // the package, we base it on the main entry (falling back to the first).\n // Result: `dist/vue-app-layout.css` instead of `dist/__ve-tmp__.css`.\n const entryIds = Object.keys(ctx.config.entries);\n const cssBaseName = entryIds.includes('.')\n ? ctx.dir.basename\n : (entryIds[0] ?? ctx.dir.basename);\n const cssFileName = `${cssBaseName}.css`;\n\n ctx.css = {\n splitting: false,\n fileName: cssFileName,\n };\n\n ctx.mergeExternals(/@vanilla-extract/);\n\n ctx.meta.hasVanillaExtract = !!(await findFile(\n ctx.dirs.src.value,\n /\\.css\\.ts$/,\n ));\n\n if (ctx.meta.hasVanillaExtract) {\n const originalPlugin = vanillaExtractPlugin({\n ...options,\n extract: {\n name: cssFileName,\n sourcemap: false,\n },\n });\n\n // `@vanilla-extract/rollup-plugin` returns a rollup `Plugin`, but\n // plugboy's `ctx.plugins` expects a tsdown (rolldown) `Plugin`. The two\n // are structurally almost identical, but hooks like `outputOptions`\n // type `this` as rollup's `PluginContext` vs rolldown's\n // `MinimalPluginContext`, which makes them unassignable (the `this`\n // type is contravariant). rolldown accepts rollup plugins at runtime,\n // so this is harmless — cast to work around the type mismatch.\n ctx.plugins.push(originalPlugin as unknown as Plugin);\n\n // `@vanilla-extract/rollup-plugin` emits the extracted CSS via\n // `emitFile({ type: 'asset', name: cssFileName })`. Because it uses\n // `name` (a hint) rather than `fileName`, rolldown runs it through the\n // default `assetFileNames` pattern (`assets/[name]-[hash][extname]`),\n // producing e.g. `dist/assets/vue-app-layout-dry0z-1l.css`.\n //\n // We can't rename it in `generateBundle` because rolldown ignores\n // mutations to the bundle object. Instead, override `assetFileNames`\n // via the `outputOptions` hook so this single CSS asset keeps its\n // derived name verbatim (no hash, no `assets/` dir) while every other\n // asset keeps its original naming.\n ctx.plugins.push({\n name: `${PLUGIN_NAME}:rename-css`,\n outputOptions(opts) {\n const original = opts.assetFileNames;\n opts.assetFileNames = (assetInfo) => {\n if (assetInfo.names.includes(cssFileName)) {\n return cssFileName;\n }\n if (typeof original === 'function') return original(assetInfo);\n return original ?? 'assets/[name]-[hash][extname]';\n };\n return opts;\n },\n });\n }\n },\n },\n });\n}\n","import { findProjectPlugin } from '@fastkit/plugboy';\nimport { Plugin as VitePlugin } from 'vite';\nimport { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\nimport { PLUGIN_NAME, VanillaExtractPlugin } from './types';\n\ntype VanillaExtractVitePluginOptions = NonNullable<\n Parameters<typeof vanillaExtractPlugin>[0]\n>;\n\nexport interface ViteVanillaExtractPluginOptions extends VanillaExtractVitePluginOptions {}\n\nexport async function ViteVanillaExtractPlugin(\n options: ViteVanillaExtractPluginOptions = {},\n): Promise<VitePlugin[]> {\n const plugin = await findProjectPlugin<VanillaExtractPlugin>(PLUGIN_NAME);\n const { identifiers: baseIdentifiers } = plugin?._options || {};\n\n return [\n ...vanillaExtractPlugin({\n identifiers: baseIdentifiers,\n ...options,\n }),\n // @MEMO\n // Plugin to prevent file scope mismatches when utilities using vanilla-extract\n // functions are placed in external files\n {\n name: 'vanilla-extract-fix-file-scope',\n config(viteConfig) {\n viteConfig.resolve ??= {};\n viteConfig.resolve.dedupe ??= [];\n viteConfig.resolve.dedupe.push(\n '@vanilla-extract/css',\n '@vanilla-extract/css/fileScope',\n );\n },\n },\n ];\n}\n"],"mappings":";;;;AAyBA,MAAa,cAAc;;;ACb3B,eAAsB,2BAA2B,UAAyB,CAAC,GAAG;CAC5E,OAAO,aAAmC;EACxC,MAAM;EACN,UAAU;EACV,OAAO,EACL,MAAM,eAAe,KAAK,cAAc;GAOtC,MAAM,WAAW,OAAO,KAAK,IAAI,OAAO,OAAO;GAI/C,MAAM,cAAc,GAHA,SAAS,SAAS,GAAG,IACrC,IAAI,IAAI,WACP,SAAS,MAAM,IAAI,IAAI,SACO;GAEnC,IAAI,MAAM;IACR,WAAW;IACX,UAAU;GACZ;GAEA,IAAI,eAAe,kBAAkB;GAErC,IAAI,KAAK,oBAAoB,CAAC,CAAE,MAAM,SACpC,IAAI,KAAK,IAAI,OACb,YACF;GAEA,IAAI,IAAI,KAAK,mBAAmB;IAC9B,MAAM,iBAAiB,qBAAqB;KAC1C,GAAG;KACH,SAAS;MACP,MAAM;MACN,WAAW;KACb;IACF,CAAC;IASD,IAAI,QAAQ,KAAK,cAAmC;IAapD,IAAI,QAAQ,KAAK;KACf,MAAM,GAAG,YAAY;KACrB,cAAc,MAAM;MAClB,MAAM,WAAW,KAAK;MACtB,KAAK,kBAAkB,cAAc;OACnC,IAAI,UAAU,MAAM,SAAS,WAAW,GACtC,OAAO;OAET,IAAI,OAAO,aAAa,YAAY,OAAO,SAAS,SAAS;OAC7D,OAAO,YAAY;MACrB;MACA,OAAO;KACT;IACF,CAAC;GACH;EACF,EACF;CACF,CAAC;AACH;;;AC9EA,eAAsB,yBACpB,UAA2C,CAAC,GACrB;CAEvB,MAAM,EAAE,aAAa,qBAAoB,MADpB,kBAAA,yBAAmD,EAAA,EACvB,YAAY,CAAC;CAE9D,OAAO,CACL,GAAGA,uBAAqB;EACtB,aAAa;EACb,GAAG;CACL,CAAC,GAID;EACE,MAAM;EACN,OAAO,YAAY;GACjB,WAAW,YAAY,CAAC;GACxB,WAAW,QAAQ,WAAW,CAAC;GAC/B,WAAW,QAAQ,OAAO,KACxB,wBACA,gCACF;EACF;CACF,CACF;AACF"}
1
+ {"version":3,"file":"plugboy-vanilla-extract-plugin.mjs","names":["vanillaExtractPlugin"],"sources":["../src/types.ts","../src/plugin.ts","../src/vite.ts"],"sourcesContent":["import { Plugin } from '@fastkit/plugboy';\nimport type { vanillaExtractPlugin as rollupPlugin } from '@vanilla-extract/rollup-plugin';\n\ntype VanillaExtractPluginOptions = Omit<\n NonNullable<Parameters<typeof rollupPlugin>[0]>,\n 'extract'\n>;\n\nexport type PrependFnResultValue = string | void;\n\nexport type PrependFn = (ctx: {\n cssFileName: string;\n}) => PrependFnResultValue | Promise<PrependFnResultValue>;\n\nexport interface PluginOptions extends Pick<\n VanillaExtractPluginOptions,\n 'identifiers' | 'esbuildOptions'\n> {\n /**\n * Inserts arbitrary code at the beginning of the generated CSS bundle.\n * This is useful for injecting global directives or comments.\n */\n prepend?: string | PrependFn;\n}\n\nexport const PLUGIN_NAME = 'plugboy-vanilla-extract';\n\nexport interface VanillaExtractPlugin extends Plugin {\n name: typeof PLUGIN_NAME;\n _options: PluginOptions;\n}\n","import { definePlugin, findFile, type Plugin } from '@fastkit/plugboy';\nimport { vanillaExtractPlugin } from '@vanilla-extract/rollup-plugin';\nimport { VanillaExtractPlugin, PluginOptions, PLUGIN_NAME } from './types';\n\ndeclare module '@fastkit/plugboy' {\n export interface WorkspaceMeta {\n hasVanillaExtract: boolean;\n }\n}\n\n/**\n * Temporary file name for the CSS that tsdown's own CSS pipeline emits.\n *\n * A package can have two independent sources of CSS:\n * - tsdown's built-in CSS handling, for plain `.css` / `.scss` imports.\n * - `@vanilla-extract/rollup-plugin`, for `.css.ts` files (extracted into a\n * single bundle named after the package).\n *\n * If both are pointed at the same final file name they collide\n * (`FILE_NAME_CONFLICT` — one silently overwrites the other, dropping all of\n * the vanilla-extract component CSS). To avoid that we route tsdown's CSS to\n * this temporary name and merge it into the vanilla-extract bundle in\n * `generateBundle`.\n */\nconst TSDOWN_CSS_FILE_NAME = '__ve-tsdown__.css';\n\nexport async function createVanillaExtractPlugin(options: PluginOptions = {}) {\n return definePlugin<VanillaExtractPlugin>({\n name: PLUGIN_NAME,\n _options: options,\n hooks: {\n async setupWorkspace(ctx, getWorkspace) {\n // Derive the final CSS file name from the workspace entry, mirroring the\n // way plugboy names the JS output: the main entry (`.`) maps to the\n // package directory name (e.g. `vue-app-layout`), other entries keep\n // their id. Since `splitting: false` produces a single combined CSS for\n // the package, we base it on the main entry (falling back to the first).\n // Result: `dist/vue-app-layout.css` instead of `dist/__ve-tmp__.css`.\n const entryIds = Object.keys(ctx.config.entries);\n const cssBaseName = entryIds.includes('.')\n ? ctx.dir.basename\n : (entryIds[0] ?? ctx.dir.basename);\n const cssFileName = `${cssBaseName}.css`;\n\n // Keep tsdown's own CSS out of `cssFileName` so it doesn't collide with\n // the vanilla-extract bundle that also targets `cssFileName`. The two\n // are merged into a single `cssFileName` later (see the merge hook).\n ctx.css = {\n splitting: false,\n fileName: TSDOWN_CSS_FILE_NAME,\n };\n\n ctx.mergeExternals(/@vanilla-extract/);\n\n ctx.meta.hasVanillaExtract = !!(await findFile(\n ctx.dirs.src.value,\n /\\.css\\.ts$/,\n ));\n\n if (ctx.meta.hasVanillaExtract) {\n const originalPlugin = vanillaExtractPlugin({\n ...options,\n extract: {\n name: cssFileName,\n sourcemap: false,\n },\n });\n\n // `@vanilla-extract/rollup-plugin` returns a rollup `Plugin`, but\n // plugboy's `ctx.plugins` expects a tsdown (rolldown) `Plugin`. The two\n // are structurally almost identical, but hooks like `outputOptions`\n // type `this` as rollup's `PluginContext` vs rolldown's\n // `MinimalPluginContext`, which makes them unassignable (the `this`\n // type is contravariant). rolldown accepts rollup plugins at runtime,\n // so this is harmless — cast to work around the type mismatch.\n ctx.plugins.push(originalPlugin as unknown as Plugin);\n\n // `@vanilla-extract/rollup-plugin` emits the extracted CSS via\n // `emitFile({ type: 'asset', name: cssFileName })`. Because it uses\n // `name` (a hint) rather than `fileName`, rolldown runs it through the\n // default `assetFileNames` pattern (`assets/[name]-[hash][extname]`),\n // producing e.g. `dist/assets/vue-app-layout-dry0z-1l.css`.\n //\n // We can't *rename* an asset in `generateBundle` because rolldown\n // ignores mutations to a bundle entry's `fileName`. Instead, override\n // `assetFileNames` via the `outputOptions` hook so this single CSS\n // asset keeps its derived name verbatim (no hash, no `assets/` dir)\n // while every other asset keeps its original naming.\n ctx.plugins.push({\n name: `${PLUGIN_NAME}:rename-css`,\n outputOptions(opts) {\n const original = opts.assetFileNames;\n opts.assetFileNames = (assetInfo) => {\n if (assetInfo.names.includes(cssFileName)) {\n return cssFileName;\n }\n if (typeof original === 'function') return original(assetInfo);\n return original ?? 'assets/[name]-[hash][extname]';\n };\n return opts;\n },\n // Merge tsdown's own CSS (emitted to `TSDOWN_CSS_FILE_NAME`) into the\n // vanilla-extract bundle so the package ships a single `cssFileName`.\n // tsdown's CSS comes first so its `@layer` declarations / resets are\n // established before the extracted component styles. Unlike renaming,\n // mutating an asset's `source` IS honored by rolldown.\n generateBundle(_opts, bundle) {\n const tmp = bundle[TSDOWN_CSS_FILE_NAME];\n const tmpCss =\n tmp && tmp.type === 'asset' ? tmp.source.toString() : '';\n if (tmp) delete bundle[TSDOWN_CSS_FILE_NAME];\n if (!tmpCss) return;\n\n const veAsset = bundle[cssFileName];\n if (veAsset && veAsset.type === 'asset') {\n veAsset.source = `${tmpCss}\\n${veAsset.source.toString()}`;\n } else {\n // No vanilla-extract output (e.g. `.css.ts` produced no rules) —\n // promote tsdown's CSS to the final file name.\n this.emitFile({\n type: 'asset',\n fileName: cssFileName,\n source: tmpCss,\n });\n }\n },\n });\n }\n },\n },\n });\n}\n","import { findProjectPlugin } from '@fastkit/plugboy';\nimport { Plugin as VitePlugin } from 'vite';\nimport { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';\nimport { PLUGIN_NAME, VanillaExtractPlugin } from './types';\n\ntype VanillaExtractVitePluginOptions = NonNullable<\n Parameters<typeof vanillaExtractPlugin>[0]\n>;\n\nexport interface ViteVanillaExtractPluginOptions extends VanillaExtractVitePluginOptions {}\n\nexport async function ViteVanillaExtractPlugin(\n options: ViteVanillaExtractPluginOptions = {},\n): Promise<VitePlugin[]> {\n const plugin = await findProjectPlugin<VanillaExtractPlugin>(PLUGIN_NAME);\n const { identifiers: baseIdentifiers } = plugin?._options || {};\n\n return [\n ...vanillaExtractPlugin({\n identifiers: baseIdentifiers,\n ...options,\n }),\n // @MEMO\n // Plugin to prevent file scope mismatches when utilities using vanilla-extract\n // functions are placed in external files\n {\n name: 'vanilla-extract-fix-file-scope',\n config(viteConfig) {\n viteConfig.resolve ??= {};\n viteConfig.resolve.dedupe ??= [];\n viteConfig.resolve.dedupe.push(\n '@vanilla-extract/css',\n '@vanilla-extract/css/fileScope',\n );\n },\n },\n ];\n}\n"],"mappings":";;;;AAyBA,MAAa,cAAc;;;;;;;;;;;;;;;;;ACD3B,MAAM,uBAAuB;AAE7B,eAAsB,2BAA2B,UAAyB,CAAC,GAAG;CAC5E,OAAO,aAAmC;EACxC,MAAM;EACN,UAAU;EACV,OAAO,EACL,MAAM,eAAe,KAAK,cAAc;GAOtC,MAAM,WAAW,OAAO,KAAK,IAAI,OAAO,OAAO;GAI/C,MAAM,cAAc,GAHA,SAAS,SAAS,GAAG,IACrC,IAAI,IAAI,WACP,SAAS,MAAM,IAAI,IAAI,SACO;GAKnC,IAAI,MAAM;IACR,WAAW;IACX,UAAU;GACZ;GAEA,IAAI,eAAe,kBAAkB;GAErC,IAAI,KAAK,oBAAoB,CAAC,CAAE,MAAM,SACpC,IAAI,KAAK,IAAI,OACb,YACF;GAEA,IAAI,IAAI,KAAK,mBAAmB;IAC9B,MAAM,iBAAiB,qBAAqB;KAC1C,GAAG;KACH,SAAS;MACP,MAAM;MACN,WAAW;KACb;IACF,CAAC;IASD,IAAI,QAAQ,KAAK,cAAmC;IAapD,IAAI,QAAQ,KAAK;KACf,MAAM,GAAG,YAAY;KACrB,cAAc,MAAM;MAClB,MAAM,WAAW,KAAK;MACtB,KAAK,kBAAkB,cAAc;OACnC,IAAI,UAAU,MAAM,SAAS,WAAW,GACtC,OAAO;OAET,IAAI,OAAO,aAAa,YAAY,OAAO,SAAS,SAAS;OAC7D,OAAO,YAAY;MACrB;MACA,OAAO;KACT;KAMA,eAAe,OAAO,QAAQ;MAC5B,MAAM,MAAM,OAAO;MACnB,MAAM,SACJ,OAAO,IAAI,SAAS,UAAU,IAAI,OAAO,SAAS,IAAI;MACxD,IAAI,KAAK,OAAO,OAAO;MACvB,IAAI,CAAC,QAAQ;MAEb,MAAM,UAAU,OAAO;MACvB,IAAI,WAAW,QAAQ,SAAS,SAC9B,QAAQ,SAAS,GAAG,OAAO,IAAI,QAAQ,OAAO,SAAS;WAIvD,KAAK,SAAS;OACZ,MAAM;OACN,UAAU;OACV,QAAQ;MACV,CAAC;KAEL;IACF,CAAC;GACH;EACF,EACF;CACF,CAAC;AACH;;;ACxHA,eAAsB,yBACpB,UAA2C,CAAC,GACrB;CAEvB,MAAM,EAAE,aAAa,qBAAoB,MADpB,kBAAA,yBAAmD,EAAA,EACvB,YAAY,CAAC;CAE9D,OAAO,CACL,GAAGA,uBAAqB;EACtB,aAAa;EACb,GAAG;CACL,CAAC,GAID;EACE,MAAM;EACN,OAAO,YAAY;GACjB,WAAW,YAAY,CAAC;GACxB,WAAW,QAAQ,WAAW,CAAC;GAC/B,WAAW,QAAQ,OAAO,KACxB,wBACA,gCACF;EACF;CACF,CACF;AACF"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fastkit/plugboy-vanilla-extract-plugin",
3
- "version": "4.0.0-next.7",
3
+ "version": "4.0.0-next.8",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "repository": {