@vanilla-extract/vite-plugin 3.6.1 → 3.7.1
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/dist/vanilla-extract-vite-plugin.cjs.d.ts +10 -1
- package/dist/vanilla-extract-vite-plugin.cjs.dev.js +14 -42
- package/dist/vanilla-extract-vite-plugin.cjs.prod.js +14 -42
- package/dist/vanilla-extract-vite-plugin.esm.js +14 -42
- package/package.json +3 -3
- package/dist/declarations/src/index.d.ts +0 -8
- package/dist/declarations/src/postcss.d.ts +0 -7
|
@@ -1 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import { Plugin } from 'vite';
|
|
2
|
+
import { IdentifierOption, CompileOptions } from '@vanilla-extract/integration';
|
|
3
|
+
|
|
4
|
+
interface Options {
|
|
5
|
+
identifiers?: IdentifierOption;
|
|
6
|
+
esbuildOptions?: CompileOptions['esbuildOptions'];
|
|
7
|
+
}
|
|
8
|
+
declare function vanillaExtractPlugin({ identifiers, esbuildOptions, }?: Options): Plugin;
|
|
9
|
+
|
|
10
|
+
export { vanillaExtractPlugin };
|
|
@@ -34,13 +34,12 @@ var outdent__default = /*#__PURE__*/_interopDefault(outdent);
|
|
|
34
34
|
// https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
|
|
35
35
|
const resolvePostcssConfig = async config => {
|
|
36
36
|
var _config$css;
|
|
37
|
-
|
|
38
37
|
// inline postcss config via vite config
|
|
39
38
|
const inlineOptions = (_config$css = config.css) === null || _config$css === void 0 ? void 0 : _config$css.postcss;
|
|
40
39
|
const inlineOptionsIsString = typeof inlineOptions === 'string';
|
|
41
|
-
|
|
42
40
|
if (inlineOptions && !inlineOptionsIsString) {
|
|
43
|
-
const options = {
|
|
41
|
+
const options = {
|
|
42
|
+
...inlineOptions
|
|
44
43
|
};
|
|
45
44
|
delete options.plugins;
|
|
46
45
|
return {
|
|
@@ -60,14 +59,12 @@ const resolvePostcssConfig = async config => {
|
|
|
60
59
|
if (!/No PostCSS Config found/.test(e.message)) {
|
|
61
60
|
throw e;
|
|
62
61
|
}
|
|
63
|
-
|
|
64
62
|
return null;
|
|
65
63
|
}
|
|
66
64
|
}
|
|
67
65
|
};
|
|
68
66
|
|
|
69
67
|
const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
|
|
70
|
-
|
|
71
68
|
const virtualExtCss = '.vanilla.css';
|
|
72
69
|
const virtualExtJs = '.vanilla.js';
|
|
73
70
|
function vanillaExtractPlugin({
|
|
@@ -80,17 +77,13 @@ function vanillaExtractPlugin({
|
|
|
80
77
|
const cssMap = new Map();
|
|
81
78
|
let forceEmitCssInSsrBuild = !!process.env.VITE_RSC_BUILD;
|
|
82
79
|
let packageName;
|
|
83
|
-
|
|
84
80
|
const getAbsoluteVirtualFileId = source => vite.normalizePath(path__default["default"].join(config.root, source));
|
|
85
|
-
|
|
86
81
|
return {
|
|
87
82
|
name: 'vanilla-extract',
|
|
88
83
|
enforce: 'pre',
|
|
89
|
-
|
|
90
84
|
configureServer(_server) {
|
|
91
85
|
server = _server;
|
|
92
86
|
},
|
|
93
|
-
|
|
94
87
|
config(_userConfig, env) {
|
|
95
88
|
const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
|
|
96
89
|
return {
|
|
@@ -102,56 +95,46 @@ function vanillaExtractPlugin({
|
|
|
102
95
|
}
|
|
103
96
|
};
|
|
104
97
|
},
|
|
105
|
-
|
|
106
98
|
async configResolved(resolvedConfig) {
|
|
107
99
|
config = resolvedConfig;
|
|
108
100
|
packageName = integration.getPackageInfo(config.root).name;
|
|
109
|
-
|
|
110
101
|
if (config.command === 'serve') {
|
|
111
102
|
postCssConfig = await resolvePostcssConfig(config);
|
|
112
103
|
}
|
|
113
|
-
|
|
114
|
-
if (config.plugins.some(plugin => ['astro:build', 'solid-start-server'].includes(plugin.name))) {
|
|
104
|
+
if (config.plugins.some(plugin => ['astro:build', 'solid-start-server', 'vite-plugin-qwik', 'vite-plugin-svelte'].includes(plugin.name))) {
|
|
115
105
|
forceEmitCssInSsrBuild = true;
|
|
116
106
|
}
|
|
117
107
|
},
|
|
118
|
-
|
|
119
108
|
resolveId(source) {
|
|
120
109
|
const [validId, query] = source.split('?');
|
|
121
|
-
|
|
122
110
|
if (!validId.endsWith(virtualExtCss) && !validId.endsWith(virtualExtJs)) {
|
|
123
111
|
return;
|
|
124
|
-
}
|
|
125
|
-
// imported from outside the config root.
|
|
112
|
+
}
|
|
126
113
|
|
|
114
|
+
// Absolute paths seem to occur often in monorepos, where files are
|
|
115
|
+
// imported from outside the config root.
|
|
116
|
+
const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(validId);
|
|
127
117
|
|
|
128
|
-
|
|
118
|
+
// There should always be an entry in the `cssMap` here.
|
|
129
119
|
// The only valid scenario for a missing one is if someone had written
|
|
130
120
|
// a file in their app using the .vanilla.js/.vanilla.css extension
|
|
131
|
-
|
|
132
121
|
if (cssMap.has(absoluteId)) {
|
|
133
122
|
// Keep the original query string for HMR.
|
|
134
123
|
return absoluteId + (query ? `?${query}` : '');
|
|
135
124
|
}
|
|
136
125
|
},
|
|
137
|
-
|
|
138
126
|
load(id) {
|
|
139
127
|
const [validId] = id.split('?');
|
|
140
|
-
|
|
141
128
|
if (!cssMap.has(validId)) {
|
|
142
129
|
return;
|
|
143
130
|
}
|
|
144
|
-
|
|
145
131
|
const css = cssMap.get(validId);
|
|
146
|
-
|
|
147
132
|
if (typeof css !== 'string') {
|
|
148
133
|
return;
|
|
149
134
|
}
|
|
150
|
-
|
|
151
135
|
if (validId.endsWith(virtualExtCss)) {
|
|
152
136
|
return css;
|
|
153
137
|
}
|
|
154
|
-
|
|
155
138
|
return outdent__default["default"]`
|
|
156
139
|
import { injectStyles } from '@vanilla-extract/css/injectStyles';
|
|
157
140
|
|
|
@@ -171,23 +154,18 @@ function vanillaExtractPlugin({
|
|
|
171
154
|
}
|
|
172
155
|
`;
|
|
173
156
|
},
|
|
174
|
-
|
|
175
157
|
async transform(code, id, ssrParam) {
|
|
176
158
|
const [validId] = id.split('?');
|
|
177
|
-
|
|
178
159
|
if (!integration.cssFileFilter.test(validId)) {
|
|
179
160
|
return null;
|
|
180
161
|
}
|
|
181
|
-
|
|
182
162
|
const identOption = identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug';
|
|
183
163
|
let ssr;
|
|
184
|
-
|
|
185
164
|
if (typeof ssrParam === 'boolean') {
|
|
186
165
|
ssr = ssrParam;
|
|
187
166
|
} else {
|
|
188
167
|
ssr = ssrParam === null || ssrParam === void 0 ? void 0 : ssrParam.ssr;
|
|
189
168
|
}
|
|
190
|
-
|
|
191
169
|
if (ssr && !forceEmitCssInSsrBuild) {
|
|
192
170
|
return integration.transform({
|
|
193
171
|
source: code,
|
|
@@ -197,7 +175,6 @@ function vanillaExtractPlugin({
|
|
|
197
175
|
identOption
|
|
198
176
|
});
|
|
199
177
|
}
|
|
200
|
-
|
|
201
178
|
const {
|
|
202
179
|
source,
|
|
203
180
|
watchFiles
|
|
@@ -207,7 +184,6 @@ function vanillaExtractPlugin({
|
|
|
207
184
|
esbuildOptions,
|
|
208
185
|
identOption
|
|
209
186
|
});
|
|
210
|
-
|
|
211
187
|
for (const file of watchFiles) {
|
|
212
188
|
// In start mode, we need to prevent the file from rewatching itself.
|
|
213
189
|
// If it's a `build --watch`, it needs to watch everything.
|
|
@@ -215,7 +191,6 @@ function vanillaExtractPlugin({
|
|
|
215
191
|
this.addWatchFile(file);
|
|
216
192
|
}
|
|
217
193
|
}
|
|
218
|
-
|
|
219
194
|
const output = await integration.processVanillaFile({
|
|
220
195
|
source,
|
|
221
196
|
filePath: validId,
|
|
@@ -227,37 +202,35 @@ function vanillaExtractPlugin({
|
|
|
227
202
|
const rootRelativeId = `${fileScope.filePath}${config.command === 'build' || ssr && forceEmitCssInSsrBuild ? virtualExtCss : virtualExtJs}`;
|
|
228
203
|
const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
|
|
229
204
|
let cssSource = source;
|
|
230
|
-
|
|
231
205
|
if (postCssConfig) {
|
|
232
|
-
const postCssResult = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss')); })).default(postCssConfig.plugins).process(source, {
|
|
206
|
+
const postCssResult = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss')); })).default(postCssConfig.plugins).process(source, {
|
|
207
|
+
...postCssConfig.options,
|
|
233
208
|
from: undefined,
|
|
234
209
|
map: false
|
|
235
210
|
});
|
|
236
211
|
cssSource = postCssResult.css;
|
|
237
212
|
}
|
|
238
|
-
|
|
239
213
|
if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
|
|
240
214
|
const {
|
|
241
215
|
moduleGraph
|
|
242
216
|
} = server;
|
|
243
217
|
const [module] = Array.from(moduleGraph.getModulesByFile(absoluteId) || []);
|
|
244
|
-
|
|
245
218
|
if (module) {
|
|
246
|
-
moduleGraph.invalidateModule(module);
|
|
219
|
+
moduleGraph.invalidateModule(module);
|
|
247
220
|
|
|
221
|
+
// Vite uses this timestamp to add `?t=` query string automatically for HMR.
|
|
248
222
|
module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
|
|
249
223
|
}
|
|
250
|
-
|
|
251
224
|
server.ws.send({
|
|
252
225
|
type: 'custom',
|
|
253
226
|
event: styleUpdateEvent(absoluteId),
|
|
254
227
|
data: cssSource
|
|
255
228
|
});
|
|
256
229
|
}
|
|
230
|
+
cssMap.set(absoluteId, cssSource);
|
|
257
231
|
|
|
258
|
-
|
|
232
|
+
// We use the root relative id here to ensure file contents (content-hashes)
|
|
259
233
|
// are consistent across build machines
|
|
260
|
-
|
|
261
234
|
return `import "${rootRelativeId}";`;
|
|
262
235
|
}
|
|
263
236
|
});
|
|
@@ -268,7 +241,6 @@ function vanillaExtractPlugin({
|
|
|
268
241
|
}
|
|
269
242
|
};
|
|
270
243
|
}
|
|
271
|
-
|
|
272
244
|
};
|
|
273
245
|
}
|
|
274
246
|
|
|
@@ -34,13 +34,12 @@ var outdent__default = /*#__PURE__*/_interopDefault(outdent);
|
|
|
34
34
|
// https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
|
|
35
35
|
const resolvePostcssConfig = async config => {
|
|
36
36
|
var _config$css;
|
|
37
|
-
|
|
38
37
|
// inline postcss config via vite config
|
|
39
38
|
const inlineOptions = (_config$css = config.css) === null || _config$css === void 0 ? void 0 : _config$css.postcss;
|
|
40
39
|
const inlineOptionsIsString = typeof inlineOptions === 'string';
|
|
41
|
-
|
|
42
40
|
if (inlineOptions && !inlineOptionsIsString) {
|
|
43
|
-
const options = {
|
|
41
|
+
const options = {
|
|
42
|
+
...inlineOptions
|
|
44
43
|
};
|
|
45
44
|
delete options.plugins;
|
|
46
45
|
return {
|
|
@@ -60,14 +59,12 @@ const resolvePostcssConfig = async config => {
|
|
|
60
59
|
if (!/No PostCSS Config found/.test(e.message)) {
|
|
61
60
|
throw e;
|
|
62
61
|
}
|
|
63
|
-
|
|
64
62
|
return null;
|
|
65
63
|
}
|
|
66
64
|
}
|
|
67
65
|
};
|
|
68
66
|
|
|
69
67
|
const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
|
|
70
|
-
|
|
71
68
|
const virtualExtCss = '.vanilla.css';
|
|
72
69
|
const virtualExtJs = '.vanilla.js';
|
|
73
70
|
function vanillaExtractPlugin({
|
|
@@ -80,17 +77,13 @@ function vanillaExtractPlugin({
|
|
|
80
77
|
const cssMap = new Map();
|
|
81
78
|
let forceEmitCssInSsrBuild = !!process.env.VITE_RSC_BUILD;
|
|
82
79
|
let packageName;
|
|
83
|
-
|
|
84
80
|
const getAbsoluteVirtualFileId = source => vite.normalizePath(path__default["default"].join(config.root, source));
|
|
85
|
-
|
|
86
81
|
return {
|
|
87
82
|
name: 'vanilla-extract',
|
|
88
83
|
enforce: 'pre',
|
|
89
|
-
|
|
90
84
|
configureServer(_server) {
|
|
91
85
|
server = _server;
|
|
92
86
|
},
|
|
93
|
-
|
|
94
87
|
config(_userConfig, env) {
|
|
95
88
|
const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
|
|
96
89
|
return {
|
|
@@ -102,56 +95,46 @@ function vanillaExtractPlugin({
|
|
|
102
95
|
}
|
|
103
96
|
};
|
|
104
97
|
},
|
|
105
|
-
|
|
106
98
|
async configResolved(resolvedConfig) {
|
|
107
99
|
config = resolvedConfig;
|
|
108
100
|
packageName = integration.getPackageInfo(config.root).name;
|
|
109
|
-
|
|
110
101
|
if (config.command === 'serve') {
|
|
111
102
|
postCssConfig = await resolvePostcssConfig(config);
|
|
112
103
|
}
|
|
113
|
-
|
|
114
|
-
if (config.plugins.some(plugin => ['astro:build', 'solid-start-server'].includes(plugin.name))) {
|
|
104
|
+
if (config.plugins.some(plugin => ['astro:build', 'solid-start-server', 'vite-plugin-qwik', 'vite-plugin-svelte'].includes(plugin.name))) {
|
|
115
105
|
forceEmitCssInSsrBuild = true;
|
|
116
106
|
}
|
|
117
107
|
},
|
|
118
|
-
|
|
119
108
|
resolveId(source) {
|
|
120
109
|
const [validId, query] = source.split('?');
|
|
121
|
-
|
|
122
110
|
if (!validId.endsWith(virtualExtCss) && !validId.endsWith(virtualExtJs)) {
|
|
123
111
|
return;
|
|
124
|
-
}
|
|
125
|
-
// imported from outside the config root.
|
|
112
|
+
}
|
|
126
113
|
|
|
114
|
+
// Absolute paths seem to occur often in monorepos, where files are
|
|
115
|
+
// imported from outside the config root.
|
|
116
|
+
const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(validId);
|
|
127
117
|
|
|
128
|
-
|
|
118
|
+
// There should always be an entry in the `cssMap` here.
|
|
129
119
|
// The only valid scenario for a missing one is if someone had written
|
|
130
120
|
// a file in their app using the .vanilla.js/.vanilla.css extension
|
|
131
|
-
|
|
132
121
|
if (cssMap.has(absoluteId)) {
|
|
133
122
|
// Keep the original query string for HMR.
|
|
134
123
|
return absoluteId + (query ? `?${query}` : '');
|
|
135
124
|
}
|
|
136
125
|
},
|
|
137
|
-
|
|
138
126
|
load(id) {
|
|
139
127
|
const [validId] = id.split('?');
|
|
140
|
-
|
|
141
128
|
if (!cssMap.has(validId)) {
|
|
142
129
|
return;
|
|
143
130
|
}
|
|
144
|
-
|
|
145
131
|
const css = cssMap.get(validId);
|
|
146
|
-
|
|
147
132
|
if (typeof css !== 'string') {
|
|
148
133
|
return;
|
|
149
134
|
}
|
|
150
|
-
|
|
151
135
|
if (validId.endsWith(virtualExtCss)) {
|
|
152
136
|
return css;
|
|
153
137
|
}
|
|
154
|
-
|
|
155
138
|
return outdent__default["default"]`
|
|
156
139
|
import { injectStyles } from '@vanilla-extract/css/injectStyles';
|
|
157
140
|
|
|
@@ -171,23 +154,18 @@ function vanillaExtractPlugin({
|
|
|
171
154
|
}
|
|
172
155
|
`;
|
|
173
156
|
},
|
|
174
|
-
|
|
175
157
|
async transform(code, id, ssrParam) {
|
|
176
158
|
const [validId] = id.split('?');
|
|
177
|
-
|
|
178
159
|
if (!integration.cssFileFilter.test(validId)) {
|
|
179
160
|
return null;
|
|
180
161
|
}
|
|
181
|
-
|
|
182
162
|
const identOption = identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug';
|
|
183
163
|
let ssr;
|
|
184
|
-
|
|
185
164
|
if (typeof ssrParam === 'boolean') {
|
|
186
165
|
ssr = ssrParam;
|
|
187
166
|
} else {
|
|
188
167
|
ssr = ssrParam === null || ssrParam === void 0 ? void 0 : ssrParam.ssr;
|
|
189
168
|
}
|
|
190
|
-
|
|
191
169
|
if (ssr && !forceEmitCssInSsrBuild) {
|
|
192
170
|
return integration.transform({
|
|
193
171
|
source: code,
|
|
@@ -197,7 +175,6 @@ function vanillaExtractPlugin({
|
|
|
197
175
|
identOption
|
|
198
176
|
});
|
|
199
177
|
}
|
|
200
|
-
|
|
201
178
|
const {
|
|
202
179
|
source,
|
|
203
180
|
watchFiles
|
|
@@ -207,7 +184,6 @@ function vanillaExtractPlugin({
|
|
|
207
184
|
esbuildOptions,
|
|
208
185
|
identOption
|
|
209
186
|
});
|
|
210
|
-
|
|
211
187
|
for (const file of watchFiles) {
|
|
212
188
|
// In start mode, we need to prevent the file from rewatching itself.
|
|
213
189
|
// If it's a `build --watch`, it needs to watch everything.
|
|
@@ -215,7 +191,6 @@ function vanillaExtractPlugin({
|
|
|
215
191
|
this.addWatchFile(file);
|
|
216
192
|
}
|
|
217
193
|
}
|
|
218
|
-
|
|
219
194
|
const output = await integration.processVanillaFile({
|
|
220
195
|
source,
|
|
221
196
|
filePath: validId,
|
|
@@ -227,37 +202,35 @@ function vanillaExtractPlugin({
|
|
|
227
202
|
const rootRelativeId = `${fileScope.filePath}${config.command === 'build' || ssr && forceEmitCssInSsrBuild ? virtualExtCss : virtualExtJs}`;
|
|
228
203
|
const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
|
|
229
204
|
let cssSource = source;
|
|
230
|
-
|
|
231
205
|
if (postCssConfig) {
|
|
232
|
-
const postCssResult = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss')); })).default(postCssConfig.plugins).process(source, {
|
|
206
|
+
const postCssResult = await (await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('postcss')); })).default(postCssConfig.plugins).process(source, {
|
|
207
|
+
...postCssConfig.options,
|
|
233
208
|
from: undefined,
|
|
234
209
|
map: false
|
|
235
210
|
});
|
|
236
211
|
cssSource = postCssResult.css;
|
|
237
212
|
}
|
|
238
|
-
|
|
239
213
|
if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
|
|
240
214
|
const {
|
|
241
215
|
moduleGraph
|
|
242
216
|
} = server;
|
|
243
217
|
const [module] = Array.from(moduleGraph.getModulesByFile(absoluteId) || []);
|
|
244
|
-
|
|
245
218
|
if (module) {
|
|
246
|
-
moduleGraph.invalidateModule(module);
|
|
219
|
+
moduleGraph.invalidateModule(module);
|
|
247
220
|
|
|
221
|
+
// Vite uses this timestamp to add `?t=` query string automatically for HMR.
|
|
248
222
|
module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
|
|
249
223
|
}
|
|
250
|
-
|
|
251
224
|
server.ws.send({
|
|
252
225
|
type: 'custom',
|
|
253
226
|
event: styleUpdateEvent(absoluteId),
|
|
254
227
|
data: cssSource
|
|
255
228
|
});
|
|
256
229
|
}
|
|
230
|
+
cssMap.set(absoluteId, cssSource);
|
|
257
231
|
|
|
258
|
-
|
|
232
|
+
// We use the root relative id here to ensure file contents (content-hashes)
|
|
259
233
|
// are consistent across build machines
|
|
260
|
-
|
|
261
234
|
return `import "${rootRelativeId}";`;
|
|
262
235
|
}
|
|
263
236
|
});
|
|
@@ -268,7 +241,6 @@ function vanillaExtractPlugin({
|
|
|
268
241
|
}
|
|
269
242
|
};
|
|
270
243
|
}
|
|
271
|
-
|
|
272
244
|
};
|
|
273
245
|
}
|
|
274
246
|
|
|
@@ -7,13 +7,12 @@ import { getPackageInfo, cssFileFilter, transform, compile, processVanillaFile }
|
|
|
7
7
|
// https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts
|
|
8
8
|
const resolvePostcssConfig = async config => {
|
|
9
9
|
var _config$css;
|
|
10
|
-
|
|
11
10
|
// inline postcss config via vite config
|
|
12
11
|
const inlineOptions = (_config$css = config.css) === null || _config$css === void 0 ? void 0 : _config$css.postcss;
|
|
13
12
|
const inlineOptionsIsString = typeof inlineOptions === 'string';
|
|
14
|
-
|
|
15
13
|
if (inlineOptions && !inlineOptionsIsString) {
|
|
16
|
-
const options = {
|
|
14
|
+
const options = {
|
|
15
|
+
...inlineOptions
|
|
17
16
|
};
|
|
18
17
|
delete options.plugins;
|
|
19
18
|
return {
|
|
@@ -33,14 +32,12 @@ const resolvePostcssConfig = async config => {
|
|
|
33
32
|
if (!/No PostCSS Config found/.test(e.message)) {
|
|
34
33
|
throw e;
|
|
35
34
|
}
|
|
36
|
-
|
|
37
35
|
return null;
|
|
38
36
|
}
|
|
39
37
|
}
|
|
40
38
|
};
|
|
41
39
|
|
|
42
40
|
const styleUpdateEvent = fileId => `vanilla-extract-style-update:${fileId}`;
|
|
43
|
-
|
|
44
41
|
const virtualExtCss = '.vanilla.css';
|
|
45
42
|
const virtualExtJs = '.vanilla.js';
|
|
46
43
|
function vanillaExtractPlugin({
|
|
@@ -53,17 +50,13 @@ function vanillaExtractPlugin({
|
|
|
53
50
|
const cssMap = new Map();
|
|
54
51
|
let forceEmitCssInSsrBuild = !!process.env.VITE_RSC_BUILD;
|
|
55
52
|
let packageName;
|
|
56
|
-
|
|
57
53
|
const getAbsoluteVirtualFileId = source => normalizePath(path.join(config.root, source));
|
|
58
|
-
|
|
59
54
|
return {
|
|
60
55
|
name: 'vanilla-extract',
|
|
61
56
|
enforce: 'pre',
|
|
62
|
-
|
|
63
57
|
configureServer(_server) {
|
|
64
58
|
server = _server;
|
|
65
59
|
},
|
|
66
|
-
|
|
67
60
|
config(_userConfig, env) {
|
|
68
61
|
const include = env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : [];
|
|
69
62
|
return {
|
|
@@ -75,56 +68,46 @@ function vanillaExtractPlugin({
|
|
|
75
68
|
}
|
|
76
69
|
};
|
|
77
70
|
},
|
|
78
|
-
|
|
79
71
|
async configResolved(resolvedConfig) {
|
|
80
72
|
config = resolvedConfig;
|
|
81
73
|
packageName = getPackageInfo(config.root).name;
|
|
82
|
-
|
|
83
74
|
if (config.command === 'serve') {
|
|
84
75
|
postCssConfig = await resolvePostcssConfig(config);
|
|
85
76
|
}
|
|
86
|
-
|
|
87
|
-
if (config.plugins.some(plugin => ['astro:build', 'solid-start-server'].includes(plugin.name))) {
|
|
77
|
+
if (config.plugins.some(plugin => ['astro:build', 'solid-start-server', 'vite-plugin-qwik', 'vite-plugin-svelte'].includes(plugin.name))) {
|
|
88
78
|
forceEmitCssInSsrBuild = true;
|
|
89
79
|
}
|
|
90
80
|
},
|
|
91
|
-
|
|
92
81
|
resolveId(source) {
|
|
93
82
|
const [validId, query] = source.split('?');
|
|
94
|
-
|
|
95
83
|
if (!validId.endsWith(virtualExtCss) && !validId.endsWith(virtualExtJs)) {
|
|
96
84
|
return;
|
|
97
|
-
}
|
|
98
|
-
// imported from outside the config root.
|
|
85
|
+
}
|
|
99
86
|
|
|
87
|
+
// Absolute paths seem to occur often in monorepos, where files are
|
|
88
|
+
// imported from outside the config root.
|
|
89
|
+
const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(validId);
|
|
100
90
|
|
|
101
|
-
|
|
91
|
+
// There should always be an entry in the `cssMap` here.
|
|
102
92
|
// The only valid scenario for a missing one is if someone had written
|
|
103
93
|
// a file in their app using the .vanilla.js/.vanilla.css extension
|
|
104
|
-
|
|
105
94
|
if (cssMap.has(absoluteId)) {
|
|
106
95
|
// Keep the original query string for HMR.
|
|
107
96
|
return absoluteId + (query ? `?${query}` : '');
|
|
108
97
|
}
|
|
109
98
|
},
|
|
110
|
-
|
|
111
99
|
load(id) {
|
|
112
100
|
const [validId] = id.split('?');
|
|
113
|
-
|
|
114
101
|
if (!cssMap.has(validId)) {
|
|
115
102
|
return;
|
|
116
103
|
}
|
|
117
|
-
|
|
118
104
|
const css = cssMap.get(validId);
|
|
119
|
-
|
|
120
105
|
if (typeof css !== 'string') {
|
|
121
106
|
return;
|
|
122
107
|
}
|
|
123
|
-
|
|
124
108
|
if (validId.endsWith(virtualExtCss)) {
|
|
125
109
|
return css;
|
|
126
110
|
}
|
|
127
|
-
|
|
128
111
|
return outdent`
|
|
129
112
|
import { injectStyles } from '@vanilla-extract/css/injectStyles';
|
|
130
113
|
|
|
@@ -144,23 +127,18 @@ function vanillaExtractPlugin({
|
|
|
144
127
|
}
|
|
145
128
|
`;
|
|
146
129
|
},
|
|
147
|
-
|
|
148
130
|
async transform(code, id, ssrParam) {
|
|
149
131
|
const [validId] = id.split('?');
|
|
150
|
-
|
|
151
132
|
if (!cssFileFilter.test(validId)) {
|
|
152
133
|
return null;
|
|
153
134
|
}
|
|
154
|
-
|
|
155
135
|
const identOption = identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug';
|
|
156
136
|
let ssr;
|
|
157
|
-
|
|
158
137
|
if (typeof ssrParam === 'boolean') {
|
|
159
138
|
ssr = ssrParam;
|
|
160
139
|
} else {
|
|
161
140
|
ssr = ssrParam === null || ssrParam === void 0 ? void 0 : ssrParam.ssr;
|
|
162
141
|
}
|
|
163
|
-
|
|
164
142
|
if (ssr && !forceEmitCssInSsrBuild) {
|
|
165
143
|
return transform({
|
|
166
144
|
source: code,
|
|
@@ -170,7 +148,6 @@ function vanillaExtractPlugin({
|
|
|
170
148
|
identOption
|
|
171
149
|
});
|
|
172
150
|
}
|
|
173
|
-
|
|
174
151
|
const {
|
|
175
152
|
source,
|
|
176
153
|
watchFiles
|
|
@@ -180,7 +157,6 @@ function vanillaExtractPlugin({
|
|
|
180
157
|
esbuildOptions,
|
|
181
158
|
identOption
|
|
182
159
|
});
|
|
183
|
-
|
|
184
160
|
for (const file of watchFiles) {
|
|
185
161
|
// In start mode, we need to prevent the file from rewatching itself.
|
|
186
162
|
// If it's a `build --watch`, it needs to watch everything.
|
|
@@ -188,7 +164,6 @@ function vanillaExtractPlugin({
|
|
|
188
164
|
this.addWatchFile(file);
|
|
189
165
|
}
|
|
190
166
|
}
|
|
191
|
-
|
|
192
167
|
const output = await processVanillaFile({
|
|
193
168
|
source,
|
|
194
169
|
filePath: validId,
|
|
@@ -200,37 +175,35 @@ function vanillaExtractPlugin({
|
|
|
200
175
|
const rootRelativeId = `${fileScope.filePath}${config.command === 'build' || ssr && forceEmitCssInSsrBuild ? virtualExtCss : virtualExtJs}`;
|
|
201
176
|
const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
|
|
202
177
|
let cssSource = source;
|
|
203
|
-
|
|
204
178
|
if (postCssConfig) {
|
|
205
|
-
const postCssResult = await (await import('postcss')).default(postCssConfig.plugins).process(source, {
|
|
179
|
+
const postCssResult = await (await import('postcss')).default(postCssConfig.plugins).process(source, {
|
|
180
|
+
...postCssConfig.options,
|
|
206
181
|
from: undefined,
|
|
207
182
|
map: false
|
|
208
183
|
});
|
|
209
184
|
cssSource = postCssResult.css;
|
|
210
185
|
}
|
|
211
|
-
|
|
212
186
|
if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
|
|
213
187
|
const {
|
|
214
188
|
moduleGraph
|
|
215
189
|
} = server;
|
|
216
190
|
const [module] = Array.from(moduleGraph.getModulesByFile(absoluteId) || []);
|
|
217
|
-
|
|
218
191
|
if (module) {
|
|
219
|
-
moduleGraph.invalidateModule(module);
|
|
192
|
+
moduleGraph.invalidateModule(module);
|
|
220
193
|
|
|
194
|
+
// Vite uses this timestamp to add `?t=` query string automatically for HMR.
|
|
221
195
|
module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
|
|
222
196
|
}
|
|
223
|
-
|
|
224
197
|
server.ws.send({
|
|
225
198
|
type: 'custom',
|
|
226
199
|
event: styleUpdateEvent(absoluteId),
|
|
227
200
|
data: cssSource
|
|
228
201
|
});
|
|
229
202
|
}
|
|
203
|
+
cssMap.set(absoluteId, cssSource);
|
|
230
204
|
|
|
231
|
-
|
|
205
|
+
// We use the root relative id here to ensure file contents (content-hashes)
|
|
232
206
|
// are consistent across build machines
|
|
233
|
-
|
|
234
207
|
return `import "${rootRelativeId}";`;
|
|
235
208
|
}
|
|
236
209
|
});
|
|
@@ -241,7 +214,6 @@ function vanillaExtractPlugin({
|
|
|
241
214
|
}
|
|
242
215
|
};
|
|
243
216
|
}
|
|
244
|
-
|
|
245
217
|
};
|
|
246
218
|
}
|
|
247
219
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vanilla-extract/vite-plugin",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.7.1",
|
|
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,7 +15,7 @@
|
|
|
15
15
|
"author": "SEEK",
|
|
16
16
|
"license": "MIT",
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@vanilla-extract/integration": "^6.0.
|
|
18
|
+
"@vanilla-extract/integration": "^6.0.2",
|
|
19
19
|
"outdent": "^0.8.0",
|
|
20
20
|
"postcss": "^8.3.6",
|
|
21
21
|
"postcss-load-config": "^3.1.0"
|
|
@@ -24,6 +24,6 @@
|
|
|
24
24
|
"vite": "^2.7.0"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
|
-
"vite": "^2.2.3 || ^3.0.0"
|
|
27
|
+
"vite": "^2.2.3 || ^3.0.0 || ^4.0.3"
|
|
28
28
|
}
|
|
29
29
|
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { Plugin } from 'vite';
|
|
2
|
-
import { IdentifierOption, CompileOptions } from '@vanilla-extract/integration';
|
|
3
|
-
interface Options {
|
|
4
|
-
identifiers?: IdentifierOption;
|
|
5
|
-
esbuildOptions?: CompileOptions['esbuildOptions'];
|
|
6
|
-
}
|
|
7
|
-
export declare function vanillaExtractPlugin({ identifiers, esbuildOptions, }?: Options): Plugin;
|
|
8
|
-
export {};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { ResolvedConfig } from 'vite';
|
|
2
|
-
import type { ProcessOptions, Plugin } from 'postcss';
|
|
3
|
-
export interface PostCSSConfigResult {
|
|
4
|
-
options: ProcessOptions;
|
|
5
|
-
plugins: Plugin[];
|
|
6
|
-
}
|
|
7
|
-
export declare const resolvePostcssConfig: (config: ResolvedConfig) => Promise<PostCSSConfigResult | null>;
|