@vanilla-extract/vite-plugin 3.1.6 → 3.1.7

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.
Files changed (4) hide show
  1. package/dist/vanilla-extract-vite-plugin.cjs.dev.js +33 -18
  2. package/dist/vanilla-extract-vite-plugin.cjs.prod.js +33 -18
  3. package/dist/vanilla-extract-vite-plugin.esm.js +33 -18
  4. package/package.json +1 -1
package/dist/vanilla-extract-vite-plugin.cjs.dev.js CHANGED
@@ -77,6 +77,9 @@ function vanillaExtractPlugin({
77
77
  const cssMap = new Map();
78
78
  let virtualExt;
79
79
  let packageName;
80
+
81
+ const getAbsoluteVirtualFileId = source => vite.normalizePath(path__default["default"].join(config.root, source));
82
+
80
83
  return {
81
84
  name: 'vanilla-extract',
82
85
  enforce: 'pre',
@@ -108,25 +111,28 @@ function vanillaExtractPlugin({
108
111
  virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
109
112
  },
110
113
 
111
- resolveId(id) {
112
- if (!id.endsWith(virtualExt)) {
114
+ resolveId(source) {
115
+ if (!source.endsWith(virtualExt)) {
113
116
  return;
114
- }
117
+ } // Absolute paths seem to occur often in monorepos, where files are
118
+ // imported from outside the config root.
119
+
115
120
 
116
- const normalizedId = id.startsWith('/') ? id.slice(1) : id;
121
+ const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(source); // There should always be an entry in the `cssMap` here.
122
+ // The only valid scenario for a missing one is if someone had written
123
+ // a file in their app using the .vanilla.js/.vanilla.css extension
117
124
 
118
- if (cssMap.has(normalizedId)) {
119
- return vite.normalizePath(path__default["default"].join(config.root, normalizedId));
125
+ if (cssMap.has(absoluteId)) {
126
+ return absoluteId;
120
127
  }
121
128
  },
122
129
 
123
130
  load(id) {
124
- if (!id.endsWith(virtualExt)) {
131
+ if (!cssMap.has(id)) {
125
132
  return;
126
133
  }
127
134
 
128
- const cssFileId = id.slice(config.root.length + 1);
129
- const css = cssMap.get(cssFileId);
135
+ const css = cssMap.get(id);
130
136
 
131
137
  if (typeof css !== 'string') {
132
138
  return;
@@ -141,14 +147,14 @@ function vanillaExtractPlugin({
141
147
 
142
148
  const inject = (css) => injectStyles({
143
149
  fileScope: ${JSON.stringify({
144
- filePath: cssFileId
150
+ filePath: id
145
151
  })},
146
152
  css
147
153
  });
148
154
 
149
155
  inject(${JSON.stringify(css)});
150
156
 
151
- import.meta.hot.on('${styleUpdateEvent(cssFileId)}', (css) => {
157
+ import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
152
158
  inject(css);
153
159
  });
154
160
  `;
@@ -195,7 +201,7 @@ function vanillaExtractPlugin({
195
201
  }
196
202
  }
197
203
 
198
- return integration.processVanillaFile({
204
+ const output = await integration.processVanillaFile({
199
205
  source,
200
206
  filePath: validId,
201
207
  identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
@@ -203,7 +209,8 @@ function vanillaExtractPlugin({
203
209
  fileScope,
204
210
  source
205
211
  }) => {
206
- const id = `${fileScope.filePath}${virtualExt}`;
212
+ const rootRelativeId = `${fileScope.filePath}${virtualExt}`;
213
+ const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
207
214
  let cssSource = source;
208
215
 
209
216
  if (postCssConfig) {
@@ -214,11 +221,11 @@ function vanillaExtractPlugin({
214
221
  cssSource = postCssResult.css;
215
222
  }
216
223
 
217
- if (server && cssMap.has(id) && cssMap.get(id) !== source) {
224
+ if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
218
225
  const {
219
226
  moduleGraph
220
227
  } = server;
221
- const module = moduleGraph.getModuleById(id);
228
+ const module = moduleGraph.getModuleById(absoluteId);
222
229
 
223
230
  if (module) {
224
231
  moduleGraph.invalidateModule(module);
@@ -226,15 +233,23 @@ function vanillaExtractPlugin({
226
233
 
227
234
  server.ws.send({
228
235
  type: 'custom',
229
- event: styleUpdateEvent(id),
236
+ event: styleUpdateEvent(absoluteId),
230
237
  data: cssSource
231
238
  });
232
239
  }
233
240
 
234
- cssMap.set(id, cssSource);
235
- return `import "${id}";`;
241
+ cssMap.set(absoluteId, cssSource); // We use the root relative id here to ensure file contents (content-hashes)
242
+ // are consistent across build machines
243
+
244
+ return `import "${rootRelativeId}";`;
236
245
  }
237
246
  });
247
+ return {
248
+ code: output,
249
+ map: {
250
+ mappings: ''
251
+ }
252
+ };
238
253
  }
239
254
 
240
255
  };
package/dist/vanilla-extract-vite-plugin.cjs.prod.js CHANGED
@@ -77,6 +77,9 @@ function vanillaExtractPlugin({
77
77
  const cssMap = new Map();
78
78
  let virtualExt;
79
79
  let packageName;
80
+
81
+ const getAbsoluteVirtualFileId = source => vite.normalizePath(path__default["default"].join(config.root, source));
82
+
80
83
  return {
81
84
  name: 'vanilla-extract',
82
85
  enforce: 'pre',
@@ -108,25 +111,28 @@ function vanillaExtractPlugin({
108
111
  virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
109
112
  },
110
113
 
111
- resolveId(id) {
112
- if (!id.endsWith(virtualExt)) {
114
+ resolveId(source) {
115
+ if (!source.endsWith(virtualExt)) {
113
116
  return;
114
- }
117
+ } // Absolute paths seem to occur often in monorepos, where files are
118
+ // imported from outside the config root.
119
+
115
120
 
116
- const normalizedId = id.startsWith('/') ? id.slice(1) : id;
121
+ const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(source); // There should always be an entry in the `cssMap` here.
122
+ // The only valid scenario for a missing one is if someone had written
123
+ // a file in their app using the .vanilla.js/.vanilla.css extension
117
124
 
118
- if (cssMap.has(normalizedId)) {
119
- return vite.normalizePath(path__default["default"].join(config.root, normalizedId));
125
+ if (cssMap.has(absoluteId)) {
126
+ return absoluteId;
120
127
  }
121
128
  },
122
129
 
123
130
  load(id) {
124
- if (!id.endsWith(virtualExt)) {
131
+ if (!cssMap.has(id)) {
125
132
  return;
126
133
  }
127
134
 
128
- const cssFileId = id.slice(config.root.length + 1);
129
- const css = cssMap.get(cssFileId);
135
+ const css = cssMap.get(id);
130
136
 
131
137
  if (typeof css !== 'string') {
132
138
  return;
@@ -141,14 +147,14 @@ function vanillaExtractPlugin({
141
147
 
142
148
  const inject = (css) => injectStyles({
143
149
  fileScope: ${JSON.stringify({
144
- filePath: cssFileId
150
+ filePath: id
145
151
  })},
146
152
  css
147
153
  });
148
154
 
149
155
  inject(${JSON.stringify(css)});
150
156
 
151
- import.meta.hot.on('${styleUpdateEvent(cssFileId)}', (css) => {
157
+ import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
152
158
  inject(css);
153
159
  });
154
160
  `;
@@ -195,7 +201,7 @@ function vanillaExtractPlugin({
195
201
  }
196
202
  }
197
203
 
198
- return integration.processVanillaFile({
204
+ const output = await integration.processVanillaFile({
199
205
  source,
200
206
  filePath: validId,
201
207
  identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
@@ -203,7 +209,8 @@ function vanillaExtractPlugin({
203
209
  fileScope,
204
210
  source
205
211
  }) => {
206
- const id = `${fileScope.filePath}${virtualExt}`;
212
+ const rootRelativeId = `${fileScope.filePath}${virtualExt}`;
213
+ const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
207
214
  let cssSource = source;
208
215
 
209
216
  if (postCssConfig) {
@@ -214,11 +221,11 @@ function vanillaExtractPlugin({
214
221
  cssSource = postCssResult.css;
215
222
  }
216
223
 
217
- if (server && cssMap.has(id) && cssMap.get(id) !== source) {
224
+ if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
218
225
  const {
219
226
  moduleGraph
220
227
  } = server;
221
- const module = moduleGraph.getModuleById(id);
228
+ const module = moduleGraph.getModuleById(absoluteId);
222
229
 
223
230
  if (module) {
224
231
  moduleGraph.invalidateModule(module);
@@ -226,15 +233,23 @@ function vanillaExtractPlugin({
226
233
 
227
234
  server.ws.send({
228
235
  type: 'custom',
229
- event: styleUpdateEvent(id),
236
+ event: styleUpdateEvent(absoluteId),
230
237
  data: cssSource
231
238
  });
232
239
  }
233
240
 
234
- cssMap.set(id, cssSource);
235
- return `import "${id}";`;
241
+ cssMap.set(absoluteId, cssSource); // We use the root relative id here to ensure file contents (content-hashes)
242
+ // are consistent across build machines
243
+
244
+ return `import "${rootRelativeId}";`;
236
245
  }
237
246
  });
247
+ return {
248
+ code: output,
249
+ map: {
250
+ mappings: ''
251
+ }
252
+ };
238
253
  }
239
254
 
240
255
  };
package/dist/vanilla-extract-vite-plugin.esm.js CHANGED
@@ -50,6 +50,9 @@ function vanillaExtractPlugin({
50
50
  const cssMap = new Map();
51
51
  let virtualExt;
52
52
  let packageName;
53
+
54
+ const getAbsoluteVirtualFileId = source => normalizePath(path.join(config.root, source));
55
+
53
56
  return {
54
57
  name: 'vanilla-extract',
55
58
  enforce: 'pre',
@@ -81,25 +84,28 @@ function vanillaExtractPlugin({
81
84
  virtualExt = `.vanilla.${config.command === 'serve' ? 'js' : 'css'}`;
82
85
  },
83
86
 
84
- resolveId(id) {
85
- if (!id.endsWith(virtualExt)) {
87
+ resolveId(source) {
88
+ if (!source.endsWith(virtualExt)) {
86
89
  return;
87
- }
90
+ } // Absolute paths seem to occur often in monorepos, where files are
91
+ // imported from outside the config root.
92
+
88
93
 
89
- const normalizedId = id.startsWith('/') ? id.slice(1) : id;
94
+ const absoluteId = source.startsWith(config.root) ? source : getAbsoluteVirtualFileId(source); // There should always be an entry in the `cssMap` here.
95
+ // The only valid scenario for a missing one is if someone had written
96
+ // a file in their app using the .vanilla.js/.vanilla.css extension
90
97
 
91
- if (cssMap.has(normalizedId)) {
92
- return normalizePath(path.join(config.root, normalizedId));
98
+ if (cssMap.has(absoluteId)) {
99
+ return absoluteId;
93
100
  }
94
101
  },
95
102
 
96
103
  load(id) {
97
- if (!id.endsWith(virtualExt)) {
104
+ if (!cssMap.has(id)) {
98
105
  return;
99
106
  }
100
107
 
101
- const cssFileId = id.slice(config.root.length + 1);
102
- const css = cssMap.get(cssFileId);
108
+ const css = cssMap.get(id);
103
109
 
104
110
  if (typeof css !== 'string') {
105
111
  return;
@@ -114,14 +120,14 @@ function vanillaExtractPlugin({
114
120
 
115
121
  const inject = (css) => injectStyles({
116
122
  fileScope: ${JSON.stringify({
117
- filePath: cssFileId
123
+ filePath: id
118
124
  })},
119
125
  css
120
126
  });
121
127
 
122
128
  inject(${JSON.stringify(css)});
123
129
 
124
- import.meta.hot.on('${styleUpdateEvent(cssFileId)}', (css) => {
130
+ import.meta.hot.on('${styleUpdateEvent(id)}', (css) => {
125
131
  inject(css);
126
132
  });
127
133
  `;
@@ -168,7 +174,7 @@ function vanillaExtractPlugin({
168
174
  }
169
175
  }
170
176
 
171
- return processVanillaFile({
177
+ const output = await processVanillaFile({
172
178
  source,
173
179
  filePath: validId,
174
180
  identOption: identifiers !== null && identifiers !== void 0 ? identifiers : config.mode === 'production' ? 'short' : 'debug',
@@ -176,7 +182,8 @@ function vanillaExtractPlugin({
176
182
  fileScope,
177
183
  source
178
184
  }) => {
179
- const id = `${fileScope.filePath}${virtualExt}`;
185
+ const rootRelativeId = `${fileScope.filePath}${virtualExt}`;
186
+ const absoluteId = getAbsoluteVirtualFileId(rootRelativeId);
180
187
  let cssSource = source;
181
188
 
182
189
  if (postCssConfig) {
@@ -187,11 +194,11 @@ function vanillaExtractPlugin({
187
194
  cssSource = postCssResult.css;
188
195
  }
189
196
 
190
- if (server && cssMap.has(id) && cssMap.get(id) !== source) {
197
+ if (server && cssMap.has(absoluteId) && cssMap.get(absoluteId) !== source) {
191
198
  const {
192
199
  moduleGraph
193
200
  } = server;
194
- const module = moduleGraph.getModuleById(id);
201
+ const module = moduleGraph.getModuleById(absoluteId);
195
202
 
196
203
  if (module) {
197
204
  moduleGraph.invalidateModule(module);
@@ -199,15 +206,23 @@ function vanillaExtractPlugin({
199
206
 
200
207
  server.ws.send({
201
208
  type: 'custom',
202
- event: styleUpdateEvent(id),
209
+ event: styleUpdateEvent(absoluteId),
203
210
  data: cssSource
204
211
  });
205
212
  }
206
213
 
207
- cssMap.set(id, cssSource);
208
- return `import "${id}";`;
214
+ cssMap.set(absoluteId, cssSource); // We use the root relative id here to ensure file contents (content-hashes)
215
+ // are consistent across build machines
216
+
217
+ return `import "${rootRelativeId}";`;
209
218
  }
210
219
  });
220
+ return {
221
+ code: output,
222
+ map: {
223
+ mappings: ''
224
+ }
225
+ };
211
226
  }
212
227
 
213
228
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vanilla-extract/vite-plugin",
3
- "version": "3.1.6",
3
+ "version": "3.1.7",
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",