@fastkit/plugboy-vanilla-extract-plugin 4.2.2 → 4.2.3
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.
package/README.md
CHANGED
|
@@ -86,29 +86,19 @@ The main options accepted by `createVanillaExtractPlugin(options)` / `ViteVanill
|
|
|
86
86
|
| `identifiers` | `'short' \| 'debug' \| ((meta) => string)` | Format of generated identifiers such as class names. Use `'short'` for production builds and `'debug'` while debugging. |
|
|
87
87
|
| `esbuildOptions` | `EsbuildOptions` | Options forwarded to esbuild when compiling `.css.ts` files. |
|
|
88
88
|
|
|
89
|
-
###
|
|
89
|
+
### `css` options
|
|
90
90
|
|
|
91
|
-
|
|
92
|
-
it is registered in, so the emitted stylesheets match the CSS exports plugboy
|
|
93
|
-
declares — `./<entry>.css` for every entry with `css: true`:
|
|
94
|
-
|
|
95
|
-
- One such entry (the common case): `splitting: false` and
|
|
96
|
-
`fileName: '<package>.css'` — a single stylesheet for the package.
|
|
97
|
-
- Several: `splitting: true`, so tsdown emits one stylesheet per output chunk,
|
|
98
|
-
named after it. `splitting: false` would collect the package into one file and
|
|
99
|
-
keep only one chunk's CSS, silently dropping the rest.
|
|
100
|
-
|
|
101
|
-
Configuration wins over plugin defaults, so declaring either key is applied as
|
|
102
|
-
written, and the emitted file names may then no longer match those exports. Every
|
|
103
|
-
other `css` option (`target`, `transformer`, `minify`, `preprocessorOptions`,
|
|
91
|
+
Every `css` option (`target`, `transformer`, `minify`, `preprocessorOptions`,
|
|
104
92
|
`lightningcss`, `postcss`, `modules`, …) is free to use and applies to the
|
|
105
|
-
extracted CSS as well.
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
93
|
+
extracted CSS as well. The plugin reserves none of them.
|
|
94
|
+
|
|
95
|
+
Which stylesheets the package emits, and in what order their rules come, is
|
|
96
|
+
plugboy's job rather than this plugin's: every `./<entry>.css` is built in
|
|
97
|
+
dependency order, so a style composed with `style([base, { … }])` always comes
|
|
98
|
+
after `base`, even when `base` is in a `.css.ts` that lands in a chunk of its own
|
|
99
|
+
— see
|
|
100
|
+
[Stylesheets of the CSS entries](https://github.com/dadajam4/fastkit/blob/main/packages/plugboy/README.md#stylesheets-of-the-css-entries).
|
|
101
|
+
Leave `css.splitting` unset for that to hold.
|
|
112
102
|
|
|
113
103
|
### How the CSS reaches the output
|
|
114
104
|
|
|
@@ -9,18 +9,8 @@ async function createVanillaExtractPlugin(options = {}) {
|
|
|
9
9
|
name: PLUGIN_NAME,
|
|
10
10
|
_options: options,
|
|
11
11
|
hooks: { async setupWorkspace(ctx) {
|
|
12
|
-
const entryIds = Object.keys(ctx.config.entries);
|
|
13
|
-
const cssEntryIds = Object.entries(ctx.config.entries).filter(([, entry]) => entry.css).map(([id]) => id);
|
|
14
|
-
const normalizeEntryId = (id) => id === "." ? ctx.dir.basename : id;
|
|
15
|
-
const cssFileName = `${cssEntryIds.length === 1 ? normalizeEntryId(cssEntryIds[0]) : entryIds.includes(".") ? ctx.dir.basename : entryIds[0] ?? ctx.dir.basename}.css`;
|
|
16
|
-
const cssEntryCount = cssEntryIds.length;
|
|
17
12
|
ctx.mergeExternals(/@vanilla-extract/);
|
|
18
13
|
ctx.meta.hasVanillaExtract = !!await findFile(ctx.dirs.src.value, /\.css\.ts$/);
|
|
19
|
-
ctx.css = {
|
|
20
|
-
splitting: cssEntryCount > 1,
|
|
21
|
-
fileName: cssFileName,
|
|
22
|
-
...ctx.css
|
|
23
|
-
};
|
|
24
14
|
if (!ctx.meta.hasVanillaExtract) return;
|
|
25
15
|
const virtualCss = /* @__PURE__ */ new Map();
|
|
26
16
|
ctx.plugins.push({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugboy-vanilla-extract-plugin.mjs","names":[],"sources":["../src/plugin.ts"],"sourcesContent":["import path from 'node:path';\nimport { definePlugin, findFile, type Plugin } from '@fastkit/plugboy';\nimport { vanillaExtractPlugin } from '@vanilla-extract/rollup-plugin';\nimport {\n virtualCssFileFilter,\n getSourceFromVirtualCssFile,\n} from '@vanilla-extract/integration';\nimport { VanillaExtractPlugin, PluginOptions, PLUGIN_NAME } from './types';\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) {\n
|
|
1
|
+
{"version":3,"file":"plugboy-vanilla-extract-plugin.mjs","names":[],"sources":["../src/plugin.ts"],"sourcesContent":["import path from 'node:path';\nimport { definePlugin, findFile, type Plugin } from '@fastkit/plugboy';\nimport { vanillaExtractPlugin } from '@vanilla-extract/rollup-plugin';\nimport {\n virtualCssFileFilter,\n getSourceFromVirtualCssFile,\n} from '@vanilla-extract/integration';\nimport { VanillaExtractPlugin, PluginOptions, PLUGIN_NAME } from './types';\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) {\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) return;\n\n // Hand vanilla-extract's extracted CSS to tsdown's own CSS pipeline.\n //\n // `@vanilla-extract/rollup-plugin` resolves its virtual stylesheets\n // (`<file>.vanilla.css?source=<serialized>`) to `{ external: true }` and,\n // in `extract` mode, emits the collected CSS itself as a rolldown asset.\n // Either way tsdown never sees the CSS, so none of the `css` options\n // apply to it — `css.target` in particular, which is why extracted CSS\n // used to ship a bare `user-select` while `.scss` in the same repo got\n // its `-webkit-` prefix.\n //\n // Resolving the virtual id to a real module instead — the approach the\n // official `@vanilla-extract/vite-plugin` takes — puts the CSS in the\n // module graph as an ordinary `.css` module. tsdown then owns it: the\n // configured `transformer` (lightningcss *or* postcss), `target`,\n // `minify` and preprocessor options all apply, and its CSS pipeline\n // collects and emits it under `css.fileName`. plugboy's `optimizeCSS`\n // runs afterwards, on the written file.\n //\n // Two details are load-bearing:\n // - The `?source=` query MUST be stripped. `@tsdown/css` skips any CSS id\n // carrying a non-`?inline` query (`shouldSkipTransform`), in both its\n // compile and its collect plugin — an id with the query intact is\n // dropped from the CSS output entirely.\n // - This plugin must be registered *before* the vanilla-extract plugin so\n // its `resolveId` wins; otherwise the module is marked external again.\n const virtualCss = new Map<string, string>();\n\n ctx.plugins.push({\n name: `${PLUGIN_NAME}:virtual-css`,\n buildStart() {\n virtualCss.clear();\n },\n async resolveId(source) {\n if (!virtualCssFileFilter.test(source)) return null;\n const { fileName, source: css } =\n await getSourceFromVirtualCssFile(source);\n // `fileName` is `<package-relative path>.vanilla.css`; resolving it\n // against the package gives a stable, unique module id that still\n // ends in `.css`. No file exists there — `load` below supplies the\n // content — so the path only has to be unique.\n const id = path.resolve(ctx.dir.value, fileName);\n virtualCss.set(id, css);\n return id;\n },\n load(id) {\n return virtualCss.get(id) ?? null;\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` type\n // `this` as rollup's `PluginContext` vs rolldown's\n // `MinimalPluginContext`, which makes them unassignable (the `this` type\n // is contravariant). rolldown accepts rollup plugins at runtime, so this\n // is harmless — cast to work around the type mismatch.\n //\n // Only its `transform` hook is used here (compiling `.css.ts` to JS).\n // `extract` stays off: its asset emission is what this plugin replaces.\n ctx.plugins.push(vanillaExtractPlugin(options) as unknown as Plugin);\n },\n },\n });\n}\n"],"mappings":";;;;;;AAeA,eAAsB,2BAA2B,UAAyB,CAAC,GAAG;CAC5E,OAAO,aAAmC;EACxC,MAAM;EACN,UAAU;EACV,OAAO,EACL,MAAM,eAAe,KAAK;GACxB,IAAI,eAAe,kBAAkB;GAErC,IAAI,KAAK,oBAAoB,CAAC,CAAE,MAAM,SACpC,IAAI,KAAK,IAAI,OACb,YACF;GAEA,IAAI,CAAC,IAAI,KAAK,mBAAmB;GA2BjC,MAAM,6BAAa,IAAI,IAAoB;GAE3C,IAAI,QAAQ,KAAK;IACf,MAAM,GAAG,YAAY;IACrB,aAAa;KACX,WAAW,MAAM;IACnB;IACA,MAAM,UAAU,QAAQ;KACtB,IAAI,CAAC,qBAAqB,KAAK,MAAM,GAAG,OAAO;KAC/C,MAAM,EAAE,UAAU,QAAQ,QACxB,MAAM,4BAA4B,MAAM;KAK1C,MAAM,KAAK,KAAK,QAAQ,IAAI,IAAI,OAAO,QAAQ;KAC/C,WAAW,IAAI,IAAI,GAAG;KACtB,OAAO;IACT;IACA,KAAK,IAAI;KACP,OAAO,WAAW,IAAI,EAAE,KAAK;IAC/B;GACF,CAAC;GAYD,IAAI,QAAQ,KAAK,qBAAqB,OAAO,CAAsB;EACrE,EACF;CACF,CAAC;AACH"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fastkit/plugboy-vanilla-extract-plugin",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"repository": {
|
|
@@ -48,12 +48,12 @@
|
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@vanilla-extract/vite-plugin": "^5.2.5",
|
|
50
50
|
"vite": "^8.1.5",
|
|
51
|
-
"@fastkit/plugboy": "^1.
|
|
51
|
+
"@fastkit/plugboy": "^1.6.0"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"@vanilla-extract/vite-plugin": "^5.0.0",
|
|
55
55
|
"vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
|
|
56
|
-
"@fastkit/plugboy": "^1.
|
|
56
|
+
"@fastkit/plugboy": "^1.6.0"
|
|
57
57
|
},
|
|
58
58
|
"peerDependenciesMeta": {
|
|
59
59
|
"@vanilla-extract/vite-plugin": {
|