@vanilla-extract/vite-plugin 0.0.0-inline-prototype-2023326232811 → 0.0.0-vite-plugin-next-20231117055826
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.
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { Plugin } from 'vite';
|
|
2
|
-
import { IdentifierOption
|
|
2
|
+
import { IdentifierOption } from '@vanilla-extract/integration';
|
|
3
3
|
|
|
4
4
|
interface Options {
|
|
5
5
|
identifiers?: IdentifierOption;
|
|
6
6
|
emitCssInSsr?: boolean;
|
|
7
|
-
esbuildOptions?: CompileOptions['esbuildOptions'];
|
|
8
7
|
}
|
|
9
|
-
declare function vanillaExtractPlugin({ identifiers, emitCssInSsr,
|
|
8
|
+
declare function vanillaExtractPlugin({ identifiers, emitCssInSsr, }?: Options): Plugin;
|
|
10
9
|
|
|
11
10
|
export { vanillaExtractPlugin };
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
require('path');
|
|
6
6
|
var vite = require('vite');
|
|
7
7
|
var outdent = require('outdent');
|
|
8
8
|
var integration = require('@vanilla-extract/integration');
|
|
@@ -27,7 +27,6 @@ function _interopNamespace(e) {
|
|
|
27
27
|
return Object.freeze(n);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
var path__default = /*#__PURE__*/_interopDefault(path);
|
|
31
30
|
var outdent__default = /*#__PURE__*/_interopDefault(outdent);
|
|
32
31
|
|
|
33
32
|
// Mostly copied from vite's implementation
|
|
@@ -69,22 +68,22 @@ const virtualExtCss = '.vanilla.css';
|
|
|
69
68
|
const virtualExtJs = '.vanilla.js';
|
|
70
69
|
function vanillaExtractPlugin({
|
|
71
70
|
identifiers,
|
|
72
|
-
emitCssInSsr
|
|
73
|
-
esbuildOptions
|
|
71
|
+
emitCssInSsr
|
|
74
72
|
} = {}) {
|
|
75
73
|
let config;
|
|
76
|
-
let
|
|
77
|
-
|
|
78
|
-
|
|
74
|
+
let compiler;
|
|
75
|
+
// const cssMap = new Map<string, string>();
|
|
76
|
+
|
|
79
77
|
const hasEmitCssOverride = typeof emitCssInSsr === 'boolean';
|
|
80
78
|
let resolvedEmitCssInSsr = hasEmitCssOverride ? emitCssInSsr : !!process.env.VITE_RSC_BUILD;
|
|
81
79
|
let packageName;
|
|
82
|
-
const getAbsoluteVirtualFileId = source => vite.normalizePath(path__default["default"].join(config.root, source));
|
|
83
80
|
return {
|
|
84
81
|
name: 'vanilla-extract',
|
|
85
82
|
enforce: 'pre',
|
|
86
83
|
configureServer(_server) {
|
|
87
|
-
|
|
84
|
+
},
|
|
85
|
+
async buildEnd() {
|
|
86
|
+
await compiler.close();
|
|
88
87
|
},
|
|
89
88
|
config(_userConfig, env) {
|
|
90
89
|
const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
|
|
@@ -100,8 +99,19 @@ function vanillaExtractPlugin({
|
|
|
100
99
|
async configResolved(resolvedConfig) {
|
|
101
100
|
config = resolvedConfig;
|
|
102
101
|
packageName = integration.getPackageInfo(config.root).name;
|
|
102
|
+
compiler = integration.createCompiler({
|
|
103
|
+
root: resolvedConfig.root,
|
|
104
|
+
identifiers,
|
|
105
|
+
cssImportSpecifier: filePath =>
|
|
106
|
+
// not sure about the config.build.ssr
|
|
107
|
+
`${filePath}${config.command === 'build' || config.build.ssr && resolvedEmitCssInSsr ? virtualExtCss : virtualExtJs}`
|
|
108
|
+
|
|
109
|
+
// TODO: Eventually pass through vite plugins, but filter out VE plugin so we don't
|
|
110
|
+
// infinitely recurse
|
|
111
|
+
});
|
|
112
|
+
|
|
103
113
|
if (config.command === 'serve') {
|
|
104
|
-
|
|
114
|
+
await resolvePostcssConfig(config);
|
|
105
115
|
}
|
|
106
116
|
if (!hasEmitCssOverride && config.plugins.some(plugin => ['astro:build', 'solid-start-server', 'vite-plugin-qwik', 'vite-plugin-svelte'].includes(plugin.name))) {
|
|
107
117
|
resolvedEmitCssInSsr = true;
|
|
@@ -115,22 +125,41 @@ function vanillaExtractPlugin({
|
|
|
115
125
|
|
|
116
126
|
// Absolute paths seem to occur often in monorepos, where files are
|
|
117
127
|
// imported from outside the config root.
|
|
118
|
-
const absoluteId = source.startsWith(config.root)
|
|
128
|
+
// const absoluteId = source.startsWith(config.root)
|
|
129
|
+
// ? source
|
|
130
|
+
// : getAbsoluteVirtualFileId(validId);
|
|
131
|
+
//
|
|
119
132
|
|
|
133
|
+
console.log({
|
|
134
|
+
validId
|
|
135
|
+
});
|
|
136
|
+
const moduleId = validId.split(/(\.vanilla\.js|\.vanilla\.css)/)[0];
|
|
120
137
|
// There should always be an entry in the `cssMap` here.
|
|
121
138
|
// The only valid scenario for a missing one is if someone had written
|
|
122
139
|
// a file in their app using the .vanilla.js/.vanilla.css extension
|
|
123
|
-
|
|
140
|
+
console.log({
|
|
141
|
+
moduleId
|
|
142
|
+
});
|
|
143
|
+
try {
|
|
144
|
+
compiler.getCssForFile(moduleId);
|
|
145
|
+
console.log({
|
|
146
|
+
loaded: moduleId
|
|
147
|
+
});
|
|
124
148
|
// Keep the original query string for HMR.
|
|
125
|
-
return
|
|
149
|
+
return validId + (query ? `?${query}` : '');
|
|
150
|
+
} catch {
|
|
151
|
+
//ignore
|
|
126
152
|
}
|
|
127
153
|
},
|
|
128
154
|
load(id) {
|
|
129
155
|
const [validId] = id.split('?');
|
|
130
|
-
|
|
156
|
+
const moduleId = validId.split(/(\.vanilla\.js|\.vanilla\.css)/)[0];
|
|
157
|
+
let css;
|
|
158
|
+
try {
|
|
159
|
+
css = compiler.getCssForFile(moduleId).css;
|
|
160
|
+
} catch {
|
|
131
161
|
return;
|
|
132
162
|
}
|
|
133
|
-
const css = cssMap.get(validId);
|
|
134
163
|
if (typeof css !== 'string') {
|
|
135
164
|
return;
|
|
136
165
|
}
|
|
@@ -161,7 +190,7 @@ function vanillaExtractPlugin({
|
|
|
161
190
|
if (!integration.cssFileFilter.test(validId)) {
|
|
162
191
|
return null;
|
|
163
192
|
}
|
|
164
|
-
const identOption = identifiers
|
|
193
|
+
const identOption = identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug';
|
|
165
194
|
let ssr;
|
|
166
195
|
if (typeof ssrParam === 'boolean') {
|
|
167
196
|
ssr = ssrParam;
|
|
@@ -180,66 +209,117 @@ function vanillaExtractPlugin({
|
|
|
180
209
|
const {
|
|
181
210
|
source,
|
|
182
211
|
watchFiles
|
|
183
|
-
} = await
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
esbuildOptions,
|
|
187
|
-
identOption
|
|
188
|
-
});
|
|
212
|
+
} = await compiler.processVanillaFile(validId);
|
|
213
|
+
// const absoluteId = getAbsoluteVirtualFileId(config.root);
|
|
214
|
+
|
|
189
215
|
for (const file of watchFiles) {
|
|
190
216
|
// In start mode, we need to prevent the file from rewatching itself.
|
|
191
217
|
// If it's a `build --watch`, it needs to watch everything.
|
|
192
|
-
if (config.command === 'build' || file !== validId) {
|
|
218
|
+
if (config.command === 'build' || vite.normalizePath(file) !== validId) {
|
|
193
219
|
this.addWatchFile(file);
|
|
194
220
|
}
|
|
195
221
|
}
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
222
|
+
|
|
223
|
+
// let cssSource = compiler.getCssForFile(validId).css;
|
|
224
|
+
|
|
225
|
+
// if (postCssConfig) {
|
|
226
|
+
// const postCssResult = await (await import('postcss'))
|
|
227
|
+
// .default(postCssConfig.plugins)
|
|
228
|
+
// .process(source, {
|
|
229
|
+
// ...postCssConfig.options,
|
|
230
|
+
// from: undefined,
|
|
231
|
+
// map: false,
|
|
232
|
+
// });
|
|
233
|
+
//
|
|
234
|
+
// cssSource = postCssResult.css;
|
|
235
|
+
// }
|
|
236
|
+
|
|
237
|
+
// if (server && cssMap.has(validId) && cssMap.get(validId) !== source) {
|
|
238
|
+
// const { moduleGraph } = server;
|
|
239
|
+
// const modules = Array.from(moduleGraph.getModulesByFile(validId) || []);
|
|
240
|
+
//
|
|
241
|
+
// for (const module of modules) {
|
|
242
|
+
// if (module) {
|
|
243
|
+
// moduleGraph.invalidateModule(module);
|
|
244
|
+
//
|
|
245
|
+
// // Vite uses this timestamp to add `?t=` query string automatically for HMR.
|
|
246
|
+
// module.lastHMRTimestamp =
|
|
247
|
+
// (module as any).lastInvalidationTimestamp || Date.now();
|
|
248
|
+
// }
|
|
249
|
+
// }
|
|
250
|
+
//
|
|
251
|
+
// server.ws.send({
|
|
252
|
+
// type: 'custom',
|
|
253
|
+
// event: styleUpdateEvent(validId),
|
|
254
|
+
// data: cssSource,
|
|
255
|
+
// });
|
|
256
|
+
// }
|
|
257
|
+
|
|
258
|
+
// cssMap.set(absoluteId, cssSource);
|
|
259
|
+
|
|
260
|
+
// const output = await compiler.processVanillaFile({
|
|
261
|
+
// source,
|
|
262
|
+
// filePath: validId,
|
|
263
|
+
// identOption,
|
|
264
|
+
// serializeVirtualCssPath: async ({ fileScope, source }) => {
|
|
265
|
+
// const rootRelativeId = `${fileScope.filePath}${
|
|
266
|
+
// config.command === 'build' || (ssr && resolvedEmitCssInSsr)
|
|
267
|
+
// ? virtualExtCss
|
|
268
|
+
// : virtualExtJs
|
|
269
|
+
// }`;
|
|
270
|
+
// const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
|
|
271
|
+
//
|
|
272
|
+
// let cssSource = source;
|
|
273
|
+
//
|
|
274
|
+
// if (postCssConfig) {
|
|
275
|
+
// const postCssResult = await (await import('postcss'))
|
|
276
|
+
// .default(postCssConfig.plugins)
|
|
277
|
+
// .process(source, {
|
|
278
|
+
// ...postCssConfig.options,
|
|
279
|
+
// from: undefined,
|
|
280
|
+
// map: false,
|
|
281
|
+
// });
|
|
282
|
+
//
|
|
283
|
+
// cssSource = postCssResult.css;
|
|
284
|
+
// }
|
|
285
|
+
//
|
|
286
|
+
// if (
|
|
287
|
+
// server &&
|
|
288
|
+
// cssMap.has(absoluteId) &&
|
|
289
|
+
// cssMap.get(absoluteId) !== source
|
|
290
|
+
// ) {
|
|
291
|
+
// const { moduleGraph } = server;
|
|
292
|
+
// const modules = Array.from(
|
|
293
|
+
// moduleGraph.getModulesByFile(absoluteId) || [],
|
|
294
|
+
// );
|
|
295
|
+
//
|
|
296
|
+
// for (const module of modules) {
|
|
297
|
+
// if (module) {
|
|
298
|
+
// moduleGraph.invalidateModule(module);
|
|
299
|
+
//
|
|
300
|
+
// // Vite uses this timestamp to add `?t=` query string automatically for HMR.
|
|
301
|
+
// module.lastHMRTimestamp =
|
|
302
|
+
// (module as any).lastInvalidationTimestamp || Date.now();
|
|
303
|
+
// }
|
|
304
|
+
// }
|
|
305
|
+
//
|
|
306
|
+
// server.ws.send({
|
|
307
|
+
// type: 'custom',
|
|
308
|
+
// event: styleUpdateEvent(absoluteId),
|
|
309
|
+
// data: cssSource,
|
|
310
|
+
// });
|
|
311
|
+
// }
|
|
312
|
+
//
|
|
313
|
+
// cssMap.set(absoluteId, cssSource);
|
|
314
|
+
//
|
|
315
|
+
// // We use the root relative id here to ensure file contents (content-hashes)
|
|
316
|
+
// // are consistent across build machines
|
|
317
|
+
// return `import "${rootRelativeId}";`;
|
|
318
|
+
// },
|
|
319
|
+
// });
|
|
320
|
+
|
|
241
321
|
return {
|
|
242
|
-
code:
|
|
322
|
+
code: source,
|
|
243
323
|
map: {
|
|
244
324
|
mappings: ''
|
|
245
325
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
require('path');
|
|
6
6
|
var vite = require('vite');
|
|
7
7
|
var outdent = require('outdent');
|
|
8
8
|
var integration = require('@vanilla-extract/integration');
|
|
@@ -27,7 +27,6 @@ function _interopNamespace(e) {
|
|
|
27
27
|
return Object.freeze(n);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
var path__default = /*#__PURE__*/_interopDefault(path);
|
|
31
30
|
var outdent__default = /*#__PURE__*/_interopDefault(outdent);
|
|
32
31
|
|
|
33
32
|
// Mostly copied from vite's implementation
|
|
@@ -69,22 +68,22 @@ const virtualExtCss = '.vanilla.css';
|
|
|
69
68
|
const virtualExtJs = '.vanilla.js';
|
|
70
69
|
function vanillaExtractPlugin({
|
|
71
70
|
identifiers,
|
|
72
|
-
emitCssInSsr
|
|
73
|
-
esbuildOptions
|
|
71
|
+
emitCssInSsr
|
|
74
72
|
} = {}) {
|
|
75
73
|
let config;
|
|
76
|
-
let
|
|
77
|
-
|
|
78
|
-
|
|
74
|
+
let compiler;
|
|
75
|
+
// const cssMap = new Map<string, string>();
|
|
76
|
+
|
|
79
77
|
const hasEmitCssOverride = typeof emitCssInSsr === 'boolean';
|
|
80
78
|
let resolvedEmitCssInSsr = hasEmitCssOverride ? emitCssInSsr : !!process.env.VITE_RSC_BUILD;
|
|
81
79
|
let packageName;
|
|
82
|
-
const getAbsoluteVirtualFileId = source => vite.normalizePath(path__default["default"].join(config.root, source));
|
|
83
80
|
return {
|
|
84
81
|
name: 'vanilla-extract',
|
|
85
82
|
enforce: 'pre',
|
|
86
83
|
configureServer(_server) {
|
|
87
|
-
|
|
84
|
+
},
|
|
85
|
+
async buildEnd() {
|
|
86
|
+
await compiler.close();
|
|
88
87
|
},
|
|
89
88
|
config(_userConfig, env) {
|
|
90
89
|
const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
|
|
@@ -100,8 +99,19 @@ function vanillaExtractPlugin({
|
|
|
100
99
|
async configResolved(resolvedConfig) {
|
|
101
100
|
config = resolvedConfig;
|
|
102
101
|
packageName = integration.getPackageInfo(config.root).name;
|
|
102
|
+
compiler = integration.createCompiler({
|
|
103
|
+
root: resolvedConfig.root,
|
|
104
|
+
identifiers,
|
|
105
|
+
cssImportSpecifier: filePath =>
|
|
106
|
+
// not sure about the config.build.ssr
|
|
107
|
+
`${filePath}${config.command === 'build' || config.build.ssr && resolvedEmitCssInSsr ? virtualExtCss : virtualExtJs}`
|
|
108
|
+
|
|
109
|
+
// TODO: Eventually pass through vite plugins, but filter out VE plugin so we don't
|
|
110
|
+
// infinitely recurse
|
|
111
|
+
});
|
|
112
|
+
|
|
103
113
|
if (config.command === 'serve') {
|
|
104
|
-
|
|
114
|
+
await resolvePostcssConfig(config);
|
|
105
115
|
}
|
|
106
116
|
if (!hasEmitCssOverride && config.plugins.some(plugin => ['astro:build', 'solid-start-server', 'vite-plugin-qwik', 'vite-plugin-svelte'].includes(plugin.name))) {
|
|
107
117
|
resolvedEmitCssInSsr = true;
|
|
@@ -115,22 +125,41 @@ function vanillaExtractPlugin({
|
|
|
115
125
|
|
|
116
126
|
// Absolute paths seem to occur often in monorepos, where files are
|
|
117
127
|
// imported from outside the config root.
|
|
118
|
-
const absoluteId = source.startsWith(config.root)
|
|
128
|
+
// const absoluteId = source.startsWith(config.root)
|
|
129
|
+
// ? source
|
|
130
|
+
// : getAbsoluteVirtualFileId(validId);
|
|
131
|
+
//
|
|
119
132
|
|
|
133
|
+
console.log({
|
|
134
|
+
validId
|
|
135
|
+
});
|
|
136
|
+
const moduleId = validId.split(/(\.vanilla\.js|\.vanilla\.css)/)[0];
|
|
120
137
|
// There should always be an entry in the `cssMap` here.
|
|
121
138
|
// The only valid scenario for a missing one is if someone had written
|
|
122
139
|
// a file in their app using the .vanilla.js/.vanilla.css extension
|
|
123
|
-
|
|
140
|
+
console.log({
|
|
141
|
+
moduleId
|
|
142
|
+
});
|
|
143
|
+
try {
|
|
144
|
+
compiler.getCssForFile(moduleId);
|
|
145
|
+
console.log({
|
|
146
|
+
loaded: moduleId
|
|
147
|
+
});
|
|
124
148
|
// Keep the original query string for HMR.
|
|
125
|
-
return
|
|
149
|
+
return validId + (query ? `?${query}` : '');
|
|
150
|
+
} catch {
|
|
151
|
+
//ignore
|
|
126
152
|
}
|
|
127
153
|
},
|
|
128
154
|
load(id) {
|
|
129
155
|
const [validId] = id.split('?');
|
|
130
|
-
|
|
156
|
+
const moduleId = validId.split(/(\.vanilla\.js|\.vanilla\.css)/)[0];
|
|
157
|
+
let css;
|
|
158
|
+
try {
|
|
159
|
+
css = compiler.getCssForFile(moduleId).css;
|
|
160
|
+
} catch {
|
|
131
161
|
return;
|
|
132
162
|
}
|
|
133
|
-
const css = cssMap.get(validId);
|
|
134
163
|
if (typeof css !== 'string') {
|
|
135
164
|
return;
|
|
136
165
|
}
|
|
@@ -161,7 +190,7 @@ function vanillaExtractPlugin({
|
|
|
161
190
|
if (!integration.cssFileFilter.test(validId)) {
|
|
162
191
|
return null;
|
|
163
192
|
}
|
|
164
|
-
const identOption = identifiers
|
|
193
|
+
const identOption = identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug';
|
|
165
194
|
let ssr;
|
|
166
195
|
if (typeof ssrParam === 'boolean') {
|
|
167
196
|
ssr = ssrParam;
|
|
@@ -180,66 +209,117 @@ function vanillaExtractPlugin({
|
|
|
180
209
|
const {
|
|
181
210
|
source,
|
|
182
211
|
watchFiles
|
|
183
|
-
} = await
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
esbuildOptions,
|
|
187
|
-
identOption
|
|
188
|
-
});
|
|
212
|
+
} = await compiler.processVanillaFile(validId);
|
|
213
|
+
// const absoluteId = getAbsoluteVirtualFileId(config.root);
|
|
214
|
+
|
|
189
215
|
for (const file of watchFiles) {
|
|
190
216
|
// In start mode, we need to prevent the file from rewatching itself.
|
|
191
217
|
// If it's a `build --watch`, it needs to watch everything.
|
|
192
|
-
if (config.command === 'build' || file !== validId) {
|
|
218
|
+
if (config.command === 'build' || vite.normalizePath(file) !== validId) {
|
|
193
219
|
this.addWatchFile(file);
|
|
194
220
|
}
|
|
195
221
|
}
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
222
|
+
|
|
223
|
+
// let cssSource = compiler.getCssForFile(validId).css;
|
|
224
|
+
|
|
225
|
+
// if (postCssConfig) {
|
|
226
|
+
// const postCssResult = await (await import('postcss'))
|
|
227
|
+
// .default(postCssConfig.plugins)
|
|
228
|
+
// .process(source, {
|
|
229
|
+
// ...postCssConfig.options,
|
|
230
|
+
// from: undefined,
|
|
231
|
+
// map: false,
|
|
232
|
+
// });
|
|
233
|
+
//
|
|
234
|
+
// cssSource = postCssResult.css;
|
|
235
|
+
// }
|
|
236
|
+
|
|
237
|
+
// if (server && cssMap.has(validId) && cssMap.get(validId) !== source) {
|
|
238
|
+
// const { moduleGraph } = server;
|
|
239
|
+
// const modules = Array.from(moduleGraph.getModulesByFile(validId) || []);
|
|
240
|
+
//
|
|
241
|
+
// for (const module of modules) {
|
|
242
|
+
// if (module) {
|
|
243
|
+
// moduleGraph.invalidateModule(module);
|
|
244
|
+
//
|
|
245
|
+
// // Vite uses this timestamp to add `?t=` query string automatically for HMR.
|
|
246
|
+
// module.lastHMRTimestamp =
|
|
247
|
+
// (module as any).lastInvalidationTimestamp || Date.now();
|
|
248
|
+
// }
|
|
249
|
+
// }
|
|
250
|
+
//
|
|
251
|
+
// server.ws.send({
|
|
252
|
+
// type: 'custom',
|
|
253
|
+
// event: styleUpdateEvent(validId),
|
|
254
|
+
// data: cssSource,
|
|
255
|
+
// });
|
|
256
|
+
// }
|
|
257
|
+
|
|
258
|
+
// cssMap.set(absoluteId, cssSource);
|
|
259
|
+
|
|
260
|
+
// const output = await compiler.processVanillaFile({
|
|
261
|
+
// source,
|
|
262
|
+
// filePath: validId,
|
|
263
|
+
// identOption,
|
|
264
|
+
// serializeVirtualCssPath: async ({ fileScope, source }) => {
|
|
265
|
+
// const rootRelativeId = `${fileScope.filePath}${
|
|
266
|
+
// config.command === 'build' || (ssr && resolvedEmitCssInSsr)
|
|
267
|
+
// ? virtualExtCss
|
|
268
|
+
// : virtualExtJs
|
|
269
|
+
// }`;
|
|
270
|
+
// const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
|
|
271
|
+
//
|
|
272
|
+
// let cssSource = source;
|
|
273
|
+
//
|
|
274
|
+
// if (postCssConfig) {
|
|
275
|
+
// const postCssResult = await (await import('postcss'))
|
|
276
|
+
// .default(postCssConfig.plugins)
|
|
277
|
+
// .process(source, {
|
|
278
|
+
// ...postCssConfig.options,
|
|
279
|
+
// from: undefined,
|
|
280
|
+
// map: false,
|
|
281
|
+
// });
|
|
282
|
+
//
|
|
283
|
+
// cssSource = postCssResult.css;
|
|
284
|
+
// }
|
|
285
|
+
//
|
|
286
|
+
// if (
|
|
287
|
+
// server &&
|
|
288
|
+
// cssMap.has(absoluteId) &&
|
|
289
|
+
// cssMap.get(absoluteId) !== source
|
|
290
|
+
// ) {
|
|
291
|
+
// const { moduleGraph } = server;
|
|
292
|
+
// const modules = Array.from(
|
|
293
|
+
// moduleGraph.getModulesByFile(absoluteId) || [],
|
|
294
|
+
// );
|
|
295
|
+
//
|
|
296
|
+
// for (const module of modules) {
|
|
297
|
+
// if (module) {
|
|
298
|
+
// moduleGraph.invalidateModule(module);
|
|
299
|
+
//
|
|
300
|
+
// // Vite uses this timestamp to add `?t=` query string automatically for HMR.
|
|
301
|
+
// module.lastHMRTimestamp =
|
|
302
|
+
// (module as any).lastInvalidationTimestamp || Date.now();
|
|
303
|
+
// }
|
|
304
|
+
// }
|
|
305
|
+
//
|
|
306
|
+
// server.ws.send({
|
|
307
|
+
// type: 'custom',
|
|
308
|
+
// event: styleUpdateEvent(absoluteId),
|
|
309
|
+
// data: cssSource,
|
|
310
|
+
// });
|
|
311
|
+
// }
|
|
312
|
+
//
|
|
313
|
+
// cssMap.set(absoluteId, cssSource);
|
|
314
|
+
//
|
|
315
|
+
// // We use the root relative id here to ensure file contents (content-hashes)
|
|
316
|
+
// // are consistent across build machines
|
|
317
|
+
// return `import "${rootRelativeId}";`;
|
|
318
|
+
// },
|
|
319
|
+
// });
|
|
320
|
+
|
|
241
321
|
return {
|
|
242
|
-
code:
|
|
322
|
+
code: source,
|
|
243
323
|
map: {
|
|
244
324
|
mappings: ''
|
|
245
325
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import 'path';
|
|
2
2
|
import { normalizePath } from 'vite';
|
|
3
3
|
import outdent from 'outdent';
|
|
4
|
-
import { getPackageInfo, cssFileFilter, transform
|
|
4
|
+
import { getPackageInfo, createCompiler, cssFileFilter, transform } from '@vanilla-extract/integration';
|
|
5
5
|
|
|
6
6
|
// Mostly copied from vite's implementation
|
|
7
7
|
// https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
|
|
@@ -42,22 +42,22 @@ const virtualExtCss = '.vanilla.css';
|
|
|
42
42
|
const virtualExtJs = '.vanilla.js';
|
|
43
43
|
function vanillaExtractPlugin({
|
|
44
44
|
identifiers,
|
|
45
|
-
emitCssInSsr
|
|
46
|
-
esbuildOptions
|
|
45
|
+
emitCssInSsr
|
|
47
46
|
} = {}) {
|
|
48
47
|
let config;
|
|
49
|
-
let
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
let compiler;
|
|
49
|
+
// const cssMap = new Map<string, string>();
|
|
50
|
+
|
|
52
51
|
const hasEmitCssOverride = typeof emitCssInSsr === 'boolean';
|
|
53
52
|
let resolvedEmitCssInSsr = hasEmitCssOverride ? emitCssInSsr : !!process.env.VITE_RSC_BUILD;
|
|
54
53
|
let packageName;
|
|
55
|
-
const getAbsoluteVirtualFileId = source => normalizePath(path.join(config.root, source));
|
|
56
54
|
return {
|
|
57
55
|
name: 'vanilla-extract',
|
|
58
56
|
enforce: 'pre',
|
|
59
57
|
configureServer(_server) {
|
|
60
|
-
|
|
58
|
+
},
|
|
59
|
+
async buildEnd() {
|
|
60
|
+
await compiler.close();
|
|
61
61
|
},
|
|
62
62
|
config(_userConfig, env) {
|
|
63
63
|
const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
|
|
@@ -73,8 +73,19 @@ function vanillaExtractPlugin({
|
|
|
73
73
|
async configResolved(resolvedConfig) {
|
|
74
74
|
config = resolvedConfig;
|
|
75
75
|
packageName = getPackageInfo(config.root).name;
|
|
76
|
+
compiler = createCompiler({
|
|
77
|
+
root: resolvedConfig.root,
|
|
78
|
+
identifiers,
|
|
79
|
+
cssImportSpecifier: filePath =>
|
|
80
|
+
// not sure about the config.build.ssr
|
|
81
|
+
`${filePath}${config.command === 'build' || config.build.ssr && resolvedEmitCssInSsr ? virtualExtCss : virtualExtJs}`
|
|
82
|
+
|
|
83
|
+
// TODO: Eventually pass through vite plugins, but filter out VE plugin so we don't
|
|
84
|
+
// infinitely recurse
|
|
85
|
+
});
|
|
86
|
+
|
|
76
87
|
if (config.command === 'serve') {
|
|
77
|
-
|
|
88
|
+
await resolvePostcssConfig(config);
|
|
78
89
|
}
|
|
79
90
|
if (!hasEmitCssOverride && config.plugins.some(plugin => ['astro:build', 'solid-start-server', 'vite-plugin-qwik', 'vite-plugin-svelte'].includes(plugin.name))) {
|
|
80
91
|
resolvedEmitCssInSsr = true;
|
|
@@ -88,22 +99,41 @@ function vanillaExtractPlugin({
|
|
|
88
99
|
|
|
89
100
|
// Absolute paths seem to occur often in monorepos, where files are
|
|
90
101
|
// imported from outside the config root.
|
|
91
|
-
const absoluteId = source.startsWith(config.root)
|
|
102
|
+
// const absoluteId = source.startsWith(config.root)
|
|
103
|
+
// ? source
|
|
104
|
+
// : getAbsoluteVirtualFileId(validId);
|
|
105
|
+
//
|
|
92
106
|
|
|
107
|
+
console.log({
|
|
108
|
+
validId
|
|
109
|
+
});
|
|
110
|
+
const moduleId = validId.split(/(\.vanilla\.js|\.vanilla\.css)/)[0];
|
|
93
111
|
// There should always be an entry in the `cssMap` here.
|
|
94
112
|
// The only valid scenario for a missing one is if someone had written
|
|
95
113
|
// a file in their app using the .vanilla.js/.vanilla.css extension
|
|
96
|
-
|
|
114
|
+
console.log({
|
|
115
|
+
moduleId
|
|
116
|
+
});
|
|
117
|
+
try {
|
|
118
|
+
compiler.getCssForFile(moduleId);
|
|
119
|
+
console.log({
|
|
120
|
+
loaded: moduleId
|
|
121
|
+
});
|
|
97
122
|
// Keep the original query string for HMR.
|
|
98
|
-
return
|
|
123
|
+
return validId + (query ? `?${query}` : '');
|
|
124
|
+
} catch {
|
|
125
|
+
//ignore
|
|
99
126
|
}
|
|
100
127
|
},
|
|
101
128
|
load(id) {
|
|
102
129
|
const [validId] = id.split('?');
|
|
103
|
-
|
|
130
|
+
const moduleId = validId.split(/(\.vanilla\.js|\.vanilla\.css)/)[0];
|
|
131
|
+
let css;
|
|
132
|
+
try {
|
|
133
|
+
css = compiler.getCssForFile(moduleId).css;
|
|
134
|
+
} catch {
|
|
104
135
|
return;
|
|
105
136
|
}
|
|
106
|
-
const css = cssMap.get(validId);
|
|
107
137
|
if (typeof css !== 'string') {
|
|
108
138
|
return;
|
|
109
139
|
}
|
|
@@ -134,7 +164,7 @@ function vanillaExtractPlugin({
|
|
|
134
164
|
if (!cssFileFilter.test(validId)) {
|
|
135
165
|
return null;
|
|
136
166
|
}
|
|
137
|
-
const identOption = identifiers
|
|
167
|
+
const identOption = identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug';
|
|
138
168
|
let ssr;
|
|
139
169
|
if (typeof ssrParam === 'boolean') {
|
|
140
170
|
ssr = ssrParam;
|
|
@@ -153,66 +183,117 @@ function vanillaExtractPlugin({
|
|
|
153
183
|
const {
|
|
154
184
|
source,
|
|
155
185
|
watchFiles
|
|
156
|
-
} = await
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
esbuildOptions,
|
|
160
|
-
identOption
|
|
161
|
-
});
|
|
186
|
+
} = await compiler.processVanillaFile(validId);
|
|
187
|
+
// const absoluteId = getAbsoluteVirtualFileId(config.root);
|
|
188
|
+
|
|
162
189
|
for (const file of watchFiles) {
|
|
163
190
|
// In start mode, we need to prevent the file from rewatching itself.
|
|
164
191
|
// If it's a `build --watch`, it needs to watch everything.
|
|
165
|
-
if (config.command === 'build' || file !== validId) {
|
|
192
|
+
if (config.command === 'build' || normalizePath(file) !== validId) {
|
|
166
193
|
this.addWatchFile(file);
|
|
167
194
|
}
|
|
168
195
|
}
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
196
|
+
|
|
197
|
+
// let cssSource = compiler.getCssForFile(validId).css;
|
|
198
|
+
|
|
199
|
+
// if (postCssConfig) {
|
|
200
|
+
// const postCssResult = await (await import('postcss'))
|
|
201
|
+
// .default(postCssConfig.plugins)
|
|
202
|
+
// .process(source, {
|
|
203
|
+
// ...postCssConfig.options,
|
|
204
|
+
// from: undefined,
|
|
205
|
+
// map: false,
|
|
206
|
+
// });
|
|
207
|
+
//
|
|
208
|
+
// cssSource = postCssResult.css;
|
|
209
|
+
// }
|
|
210
|
+
|
|
211
|
+
// if (server && cssMap.has(validId) && cssMap.get(validId) !== source) {
|
|
212
|
+
// const { moduleGraph } = server;
|
|
213
|
+
// const modules = Array.from(moduleGraph.getModulesByFile(validId) || []);
|
|
214
|
+
//
|
|
215
|
+
// for (const module of modules) {
|
|
216
|
+
// if (module) {
|
|
217
|
+
// moduleGraph.invalidateModule(module);
|
|
218
|
+
//
|
|
219
|
+
// // Vite uses this timestamp to add `?t=` query string automatically for HMR.
|
|
220
|
+
// module.lastHMRTimestamp =
|
|
221
|
+
// (module as any).lastInvalidationTimestamp || Date.now();
|
|
222
|
+
// }
|
|
223
|
+
// }
|
|
224
|
+
//
|
|
225
|
+
// server.ws.send({
|
|
226
|
+
// type: 'custom',
|
|
227
|
+
// event: styleUpdateEvent(validId),
|
|
228
|
+
// data: cssSource,
|
|
229
|
+
// });
|
|
230
|
+
// }
|
|
231
|
+
|
|
232
|
+
// cssMap.set(absoluteId, cssSource);
|
|
233
|
+
|
|
234
|
+
// const output = await compiler.processVanillaFile({
|
|
235
|
+
// source,
|
|
236
|
+
// filePath: validId,
|
|
237
|
+
// identOption,
|
|
238
|
+
// serializeVirtualCssPath: async ({ fileScope, source }) => {
|
|
239
|
+
// const rootRelativeId = `${fileScope.filePath}${
|
|
240
|
+
// config.command === 'build' || (ssr && resolvedEmitCssInSsr)
|
|
241
|
+
// ? virtualExtCss
|
|
242
|
+
// : virtualExtJs
|
|
243
|
+
// }`;
|
|
244
|
+
// const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
|
|
245
|
+
//
|
|
246
|
+
// let cssSource = source;
|
|
247
|
+
//
|
|
248
|
+
// if (postCssConfig) {
|
|
249
|
+
// const postCssResult = await (await import('postcss'))
|
|
250
|
+
// .default(postCssConfig.plugins)
|
|
251
|
+
// .process(source, {
|
|
252
|
+
// ...postCssConfig.options,
|
|
253
|
+
// from: undefined,
|
|
254
|
+
// map: false,
|
|
255
|
+
// });
|
|
256
|
+
//
|
|
257
|
+
// cssSource = postCssResult.css;
|
|
258
|
+
// }
|
|
259
|
+
//
|
|
260
|
+
// if (
|
|
261
|
+
// server &&
|
|
262
|
+
// cssMap.has(absoluteId) &&
|
|
263
|
+
// cssMap.get(absoluteId) !== source
|
|
264
|
+
// ) {
|
|
265
|
+
// const { moduleGraph } = server;
|
|
266
|
+
// const modules = Array.from(
|
|
267
|
+
// moduleGraph.getModulesByFile(absoluteId) || [],
|
|
268
|
+
// );
|
|
269
|
+
//
|
|
270
|
+
// for (const module of modules) {
|
|
271
|
+
// if (module) {
|
|
272
|
+
// moduleGraph.invalidateModule(module);
|
|
273
|
+
//
|
|
274
|
+
// // Vite uses this timestamp to add `?t=` query string automatically for HMR.
|
|
275
|
+
// module.lastHMRTimestamp =
|
|
276
|
+
// (module as any).lastInvalidationTimestamp || Date.now();
|
|
277
|
+
// }
|
|
278
|
+
// }
|
|
279
|
+
//
|
|
280
|
+
// server.ws.send({
|
|
281
|
+
// type: 'custom',
|
|
282
|
+
// event: styleUpdateEvent(absoluteId),
|
|
283
|
+
// data: cssSource,
|
|
284
|
+
// });
|
|
285
|
+
// }
|
|
286
|
+
//
|
|
287
|
+
// cssMap.set(absoluteId, cssSource);
|
|
288
|
+
//
|
|
289
|
+
// // We use the root relative id here to ensure file contents (content-hashes)
|
|
290
|
+
// // are consistent across build machines
|
|
291
|
+
// return `import "${rootRelativeId}";`;
|
|
292
|
+
// },
|
|
293
|
+
// });
|
|
294
|
+
|
|
214
295
|
return {
|
|
215
|
-
code:
|
|
296
|
+
code: source,
|
|
216
297
|
map: {
|
|
217
298
|
mappings: ''
|
|
218
299
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vanilla-extract/vite-plugin",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-vite-plugin-next-20231117055826",
|
|
4
4
|
"description": "Zero-runtime Stylesheets-in-TypeScript",
|
|
5
5
|
"main": "dist/vanilla-extract-vite-plugin.cjs.js",
|
|
6
6
|
"module": "dist/vanilla-extract-vite-plugin.esm.js",
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
"author": "SEEK",
|
|
16
16
|
"license": "MIT",
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@vanilla-extract/integration": "^
|
|
18
|
+
"@vanilla-extract/integration": "^6.0.2",
|
|
19
19
|
"outdent": "^0.8.0",
|
|
20
20
|
"postcss": "^8.3.6",
|
|
21
|
-
"postcss-load-config": "^
|
|
21
|
+
"postcss-load-config": "^4.0.1"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"vite": "npm:vite@^2.7.0"
|