@vanilla-extract/vite-plugin 0.0.0-1302-no-css-for-file-20240203091738
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/LICENSE +21 -0
- package/README.md +95 -0
- package/dist/vanilla-extract-vite-plugin.cjs.d.ts +10 -0
- package/dist/vanilla-extract-vite-plugin.cjs.d.ts.map +1 -0
- package/dist/vanilla-extract-vite-plugin.cjs.dev.js +160 -0
- package/dist/vanilla-extract-vite-plugin.cjs.js +7 -0
- package/dist/vanilla-extract-vite-plugin.cjs.prod.js +160 -0
- package/dist/vanilla-extract-vite-plugin.esm.js +152 -0
- package/package.json +26 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 SEEK
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
# π§ vanilla-extract
|
|
2
|
+
|
|
3
|
+
**Zero-runtime Stylesheets-in-TypeScript.**
|
|
4
|
+
|
|
5
|
+
Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.
|
|
6
|
+
|
|
7
|
+
Basically, itβs [βCSS Modules](https://github.com/css-modules/css-modules)-in-TypeScriptβ but with scoped CSS Variables + heaps more.
|
|
8
|
+
|
|
9
|
+
π₯ All styles generated at build time β just like [Sass](https://sass-lang.com), [Less](http://lesscss.org), etc.
|
|
10
|
+
|
|
11
|
+
β¨ Minimal abstraction over standard CSS.
|
|
12
|
+
|
|
13
|
+
π¦ Works with any front-end framework β or even without one.
|
|
14
|
+
|
|
15
|
+
π³ Locally scoped class names β just like [CSS Modules.](https://github.com/css-modules/css-modules)
|
|
16
|
+
|
|
17
|
+
π Locally scoped [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), `@keyframes` and `@font-face` rules.
|
|
18
|
+
|
|
19
|
+
π¨ High-level theme system with support for simultaneous themes. No globals!
|
|
20
|
+
|
|
21
|
+
π Utils for generating variable-based `calc` expressions.
|
|
22
|
+
|
|
23
|
+
πͺ Type-safe styles via [CSSType.](https://github.com/frenic/csstype)
|
|
24
|
+
|
|
25
|
+
πββοΈ Optional runtime version for development and testing.
|
|
26
|
+
|
|
27
|
+
π Optional API for dynamic runtime theming.
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
π [Check out the documentation site for setup guides, examples and API docs.](https://vanilla-extract.style)
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
π₯ [Try it out for yourself in CodeSandbox.](https://codesandbox.io/s/github/vanilla-extract-css/vanilla-extract/tree/master/examples/webpack-react?file=/src/App.css.ts)
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
**Write your styles in `.css.ts` files.**
|
|
42
|
+
|
|
43
|
+
```ts
|
|
44
|
+
// styles.css.ts
|
|
45
|
+
|
|
46
|
+
import { createTheme, style } from '@vanilla-extract/css';
|
|
47
|
+
|
|
48
|
+
export const [themeClass, vars] = createTheme({
|
|
49
|
+
color: {
|
|
50
|
+
brand: 'blue'
|
|
51
|
+
},
|
|
52
|
+
font: {
|
|
53
|
+
body: 'arial'
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
export const exampleStyle = style({
|
|
58
|
+
backgroundColor: vars.color.brand,
|
|
59
|
+
fontFamily: vars.font.body,
|
|
60
|
+
color: 'white',
|
|
61
|
+
padding: 10
|
|
62
|
+
});
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
> π‘ Once you've [configured your build tooling,](https://vanilla-extract.style/documentation/getting-started/) these `.css.ts` files will be evaluated at build time. None of the code in these files will be included in your final bundle. Think of it as using TypeScript as your preprocessor instead of Sass, Less, etc.
|
|
66
|
+
|
|
67
|
+
**Then consume them in your markup.**
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
// app.ts
|
|
71
|
+
|
|
72
|
+
import { themeClass, exampleStyle } from './styles.css.ts';
|
|
73
|
+
|
|
74
|
+
document.write(`
|
|
75
|
+
<section class="${themeClass}">
|
|
76
|
+
<h1 class="${exampleStyle}">Hello world!</h1>
|
|
77
|
+
</section>
|
|
78
|
+
`);
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
Want to work at a higher level while maximising style re-use? Check out π¨ [Sprinkles](https://vanilla-extract.style/documentation/packages/sprinkles), our official zero-runtime atomic CSS framework, built on top of vanilla-extract.
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## Thanks
|
|
88
|
+
|
|
89
|
+
- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for [treat](https://seek-oss.github.io/treat), the precursor to this library.
|
|
90
|
+
- [Stitches](https://stitches.dev/) for getting us excited about CSS-Variables-in-JS.
|
|
91
|
+
- [SEEK](https://www.seek.com.au) for giving us the space to do interesting work.
|
|
92
|
+
|
|
93
|
+
## License
|
|
94
|
+
|
|
95
|
+
MIT.
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Plugin } from 'vite';
|
|
2
|
+
import { IdentifierOption } from '@vanilla-extract/integration';
|
|
3
|
+
|
|
4
|
+
interface Options {
|
|
5
|
+
identifiers?: IdentifierOption;
|
|
6
|
+
unstable_mode?: 'transform' | 'emitCss';
|
|
7
|
+
}
|
|
8
|
+
declare function vanillaExtractPlugin({ identifiers, unstable_mode: mode, }?: Options): Plugin;
|
|
9
|
+
|
|
10
|
+
export { vanillaExtractPlugin };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vanilla-extract-vite-plugin.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var path = require('path');
|
|
6
|
+
var integration = require('@vanilla-extract/integration');
|
|
7
|
+
|
|
8
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
9
|
+
|
|
10
|
+
var path__default = /*#__PURE__*/_interopDefault(path);
|
|
11
|
+
|
|
12
|
+
const virtualExtCss = '.vanilla.css';
|
|
13
|
+
const isVirtualId = id => id.endsWith(virtualExtCss);
|
|
14
|
+
const fileIdToVirtualId = id => `${id}${virtualExtCss}`;
|
|
15
|
+
const virtualIdToFileId = virtualId => virtualId.slice(0, -virtualExtCss.length);
|
|
16
|
+
function vanillaExtractPlugin({
|
|
17
|
+
identifiers,
|
|
18
|
+
unstable_mode: mode = 'emitCss'
|
|
19
|
+
} = {}) {
|
|
20
|
+
let config;
|
|
21
|
+
let userConfig;
|
|
22
|
+
let server;
|
|
23
|
+
let packageName;
|
|
24
|
+
let compiler;
|
|
25
|
+
const getIdentOption = () => identifiers ?? (config.mode === 'production' ? 'short' : 'debug');
|
|
26
|
+
const getAbsoluteId = filePath => {
|
|
27
|
+
let resolvedId = filePath;
|
|
28
|
+
if (filePath.startsWith(config.root) ||
|
|
29
|
+
// In monorepos the absolute path will be outside of config.root, so we check that they have the same root on the file system
|
|
30
|
+
path__default["default"].isAbsolute(filePath) && filePath.split(path__default["default"].sep)[1] === config.root.split(path__default["default"].sep)[1]) {
|
|
31
|
+
resolvedId = filePath;
|
|
32
|
+
} else {
|
|
33
|
+
// In SSR mode we can have paths like /app/styles.css.ts
|
|
34
|
+
resolvedId = path__default["default"].join(config.root, filePath);
|
|
35
|
+
}
|
|
36
|
+
return integration.normalizePath(resolvedId);
|
|
37
|
+
};
|
|
38
|
+
function invalidateModule(absoluteId) {
|
|
39
|
+
if (!server) return;
|
|
40
|
+
const {
|
|
41
|
+
moduleGraph
|
|
42
|
+
} = server;
|
|
43
|
+
const modules = moduleGraph.getModulesByFile(absoluteId);
|
|
44
|
+
if (modules) {
|
|
45
|
+
for (const module of modules) {
|
|
46
|
+
moduleGraph.invalidateModule(module);
|
|
47
|
+
|
|
48
|
+
// Vite uses this timestamp to add `?t=` query string automatically for HMR.
|
|
49
|
+
module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
function addWatchFiles(fromId, files) {
|
|
54
|
+
// We don't need to watch files in build mode
|
|
55
|
+
if (config.command === 'build' && !config.build.watch) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
for (const file of files) {
|
|
59
|
+
if (!file.includes('node_modules') && integration.normalizePath(file) !== fromId) {
|
|
60
|
+
this.addWatchFile(file);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return {
|
|
65
|
+
name: 'vanilla-extract',
|
|
66
|
+
configureServer(_server) {
|
|
67
|
+
server = _server;
|
|
68
|
+
},
|
|
69
|
+
config(viteUserConfig) {
|
|
70
|
+
userConfig = viteUserConfig;
|
|
71
|
+
return {
|
|
72
|
+
ssr: {
|
|
73
|
+
external: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope', '@vanilla-extract/css/adapter']
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
},
|
|
77
|
+
async configResolved(resolvedConfig) {
|
|
78
|
+
config = resolvedConfig;
|
|
79
|
+
packageName = integration.getPackageInfo(config.root).name;
|
|
80
|
+
if (mode !== 'transform') {
|
|
81
|
+
var _userConfig$plugins;
|
|
82
|
+
compiler = integration.createCompiler({
|
|
83
|
+
root: config.root,
|
|
84
|
+
identifiers: getIdentOption(),
|
|
85
|
+
cssImportSpecifier: fileIdToVirtualId,
|
|
86
|
+
viteResolve: config.resolve,
|
|
87
|
+
vitePlugins: (_userConfig$plugins = userConfig.plugins) === null || _userConfig$plugins === void 0 ? void 0 : _userConfig$plugins.flat().filter(plugin => typeof plugin === 'object' && plugin !== null && 'name' in plugin &&
|
|
88
|
+
// Prevent an infinite loop where the compiler creates a new instance of the plugin,
|
|
89
|
+
// which creates a new compiler, which creates a new instance of the plugin, etc.
|
|
90
|
+
plugin.name !== 'vanilla-extract' &&
|
|
91
|
+
// Skip Vitest plugins
|
|
92
|
+
plugin.name !== 'vitest' && !plugin.name.startsWith('vitest:'))
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
buildEnd() {
|
|
97
|
+
var _compiler;
|
|
98
|
+
(_compiler = compiler) === null || _compiler === void 0 ? void 0 : _compiler.close();
|
|
99
|
+
},
|
|
100
|
+
async transform(code, id) {
|
|
101
|
+
const [validId] = id.split('?');
|
|
102
|
+
if (!integration.cssFileFilter.test(validId)) {
|
|
103
|
+
return null;
|
|
104
|
+
}
|
|
105
|
+
const identOption = getIdentOption();
|
|
106
|
+
if (mode === 'transform') {
|
|
107
|
+
return integration.transform({
|
|
108
|
+
source: code,
|
|
109
|
+
filePath: integration.normalizePath(validId),
|
|
110
|
+
rootPath: config.root,
|
|
111
|
+
packageName,
|
|
112
|
+
identOption
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
if (compiler) {
|
|
116
|
+
const absoluteId = getAbsoluteId(validId);
|
|
117
|
+
const {
|
|
118
|
+
source,
|
|
119
|
+
watchFiles
|
|
120
|
+
} = await compiler.processVanillaFile(absoluteId, {
|
|
121
|
+
outputCss: true
|
|
122
|
+
});
|
|
123
|
+
addWatchFiles.call(this, absoluteId, watchFiles);
|
|
124
|
+
|
|
125
|
+
// We have to invalidate the virtual module, not the real one we just transformed
|
|
126
|
+
invalidateModule(fileIdToVirtualId(absoluteId));
|
|
127
|
+
return {
|
|
128
|
+
code: source,
|
|
129
|
+
map: {
|
|
130
|
+
mappings: ''
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
resolveId(source) {
|
|
136
|
+
var _compiler2;
|
|
137
|
+
const [validId, query] = source.split('?');
|
|
138
|
+
if (!isVirtualId(validId)) return;
|
|
139
|
+
const absoluteId = getAbsoluteId(validId);
|
|
140
|
+
if ( // We should always have CSS for a file here.
|
|
141
|
+
// The only valid scenario for a missing one is if someone had written
|
|
142
|
+
// a file in their app using the .vanilla.js/.vanilla.css extension
|
|
143
|
+
(_compiler2 = compiler) !== null && _compiler2 !== void 0 && _compiler2.getCssForFile(virtualIdToFileId(absoluteId))) {
|
|
144
|
+
// Keep the original query string for HMR.
|
|
145
|
+
return absoluteId + (query ? `?${query}` : '');
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
load(id) {
|
|
149
|
+
const [validId] = id.split('?');
|
|
150
|
+
if (!isVirtualId(validId) || !compiler) return;
|
|
151
|
+
const absoluteId = getAbsoluteId(validId);
|
|
152
|
+
const {
|
|
153
|
+
css
|
|
154
|
+
} = compiler.getCssForFile(virtualIdToFileId(absoluteId));
|
|
155
|
+
return css;
|
|
156
|
+
}
|
|
157
|
+
};
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
exports.vanillaExtractPlugin = vanillaExtractPlugin;
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var path = require('path');
|
|
6
|
+
var integration = require('@vanilla-extract/integration');
|
|
7
|
+
|
|
8
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
|
|
9
|
+
|
|
10
|
+
var path__default = /*#__PURE__*/_interopDefault(path);
|
|
11
|
+
|
|
12
|
+
const virtualExtCss = '.vanilla.css';
|
|
13
|
+
const isVirtualId = id => id.endsWith(virtualExtCss);
|
|
14
|
+
const fileIdToVirtualId = id => `${id}${virtualExtCss}`;
|
|
15
|
+
const virtualIdToFileId = virtualId => virtualId.slice(0, -virtualExtCss.length);
|
|
16
|
+
function vanillaExtractPlugin({
|
|
17
|
+
identifiers,
|
|
18
|
+
unstable_mode: mode = 'emitCss'
|
|
19
|
+
} = {}) {
|
|
20
|
+
let config;
|
|
21
|
+
let userConfig;
|
|
22
|
+
let server;
|
|
23
|
+
let packageName;
|
|
24
|
+
let compiler;
|
|
25
|
+
const getIdentOption = () => identifiers ?? (config.mode === 'production' ? 'short' : 'debug');
|
|
26
|
+
const getAbsoluteId = filePath => {
|
|
27
|
+
let resolvedId = filePath;
|
|
28
|
+
if (filePath.startsWith(config.root) ||
|
|
29
|
+
// In monorepos the absolute path will be outside of config.root, so we check that they have the same root on the file system
|
|
30
|
+
path__default["default"].isAbsolute(filePath) && filePath.split(path__default["default"].sep)[1] === config.root.split(path__default["default"].sep)[1]) {
|
|
31
|
+
resolvedId = filePath;
|
|
32
|
+
} else {
|
|
33
|
+
// In SSR mode we can have paths like /app/styles.css.ts
|
|
34
|
+
resolvedId = path__default["default"].join(config.root, filePath);
|
|
35
|
+
}
|
|
36
|
+
return integration.normalizePath(resolvedId);
|
|
37
|
+
};
|
|
38
|
+
function invalidateModule(absoluteId) {
|
|
39
|
+
if (!server) return;
|
|
40
|
+
const {
|
|
41
|
+
moduleGraph
|
|
42
|
+
} = server;
|
|
43
|
+
const modules = moduleGraph.getModulesByFile(absoluteId);
|
|
44
|
+
if (modules) {
|
|
45
|
+
for (const module of modules) {
|
|
46
|
+
moduleGraph.invalidateModule(module);
|
|
47
|
+
|
|
48
|
+
// Vite uses this timestamp to add `?t=` query string automatically for HMR.
|
|
49
|
+
module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
function addWatchFiles(fromId, files) {
|
|
54
|
+
// We don't need to watch files in build mode
|
|
55
|
+
if (config.command === 'build' && !config.build.watch) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
for (const file of files) {
|
|
59
|
+
if (!file.includes('node_modules') && integration.normalizePath(file) !== fromId) {
|
|
60
|
+
this.addWatchFile(file);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return {
|
|
65
|
+
name: 'vanilla-extract',
|
|
66
|
+
configureServer(_server) {
|
|
67
|
+
server = _server;
|
|
68
|
+
},
|
|
69
|
+
config(viteUserConfig) {
|
|
70
|
+
userConfig = viteUserConfig;
|
|
71
|
+
return {
|
|
72
|
+
ssr: {
|
|
73
|
+
external: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope', '@vanilla-extract/css/adapter']
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
},
|
|
77
|
+
async configResolved(resolvedConfig) {
|
|
78
|
+
config = resolvedConfig;
|
|
79
|
+
packageName = integration.getPackageInfo(config.root).name;
|
|
80
|
+
if (mode !== 'transform') {
|
|
81
|
+
var _userConfig$plugins;
|
|
82
|
+
compiler = integration.createCompiler({
|
|
83
|
+
root: config.root,
|
|
84
|
+
identifiers: getIdentOption(),
|
|
85
|
+
cssImportSpecifier: fileIdToVirtualId,
|
|
86
|
+
viteResolve: config.resolve,
|
|
87
|
+
vitePlugins: (_userConfig$plugins = userConfig.plugins) === null || _userConfig$plugins === void 0 ? void 0 : _userConfig$plugins.flat().filter(plugin => typeof plugin === 'object' && plugin !== null && 'name' in plugin &&
|
|
88
|
+
// Prevent an infinite loop where the compiler creates a new instance of the plugin,
|
|
89
|
+
// which creates a new compiler, which creates a new instance of the plugin, etc.
|
|
90
|
+
plugin.name !== 'vanilla-extract' &&
|
|
91
|
+
// Skip Vitest plugins
|
|
92
|
+
plugin.name !== 'vitest' && !plugin.name.startsWith('vitest:'))
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
buildEnd() {
|
|
97
|
+
var _compiler;
|
|
98
|
+
(_compiler = compiler) === null || _compiler === void 0 ? void 0 : _compiler.close();
|
|
99
|
+
},
|
|
100
|
+
async transform(code, id) {
|
|
101
|
+
const [validId] = id.split('?');
|
|
102
|
+
if (!integration.cssFileFilter.test(validId)) {
|
|
103
|
+
return null;
|
|
104
|
+
}
|
|
105
|
+
const identOption = getIdentOption();
|
|
106
|
+
if (mode === 'transform') {
|
|
107
|
+
return integration.transform({
|
|
108
|
+
source: code,
|
|
109
|
+
filePath: integration.normalizePath(validId),
|
|
110
|
+
rootPath: config.root,
|
|
111
|
+
packageName,
|
|
112
|
+
identOption
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
if (compiler) {
|
|
116
|
+
const absoluteId = getAbsoluteId(validId);
|
|
117
|
+
const {
|
|
118
|
+
source,
|
|
119
|
+
watchFiles
|
|
120
|
+
} = await compiler.processVanillaFile(absoluteId, {
|
|
121
|
+
outputCss: true
|
|
122
|
+
});
|
|
123
|
+
addWatchFiles.call(this, absoluteId, watchFiles);
|
|
124
|
+
|
|
125
|
+
// We have to invalidate the virtual module, not the real one we just transformed
|
|
126
|
+
invalidateModule(fileIdToVirtualId(absoluteId));
|
|
127
|
+
return {
|
|
128
|
+
code: source,
|
|
129
|
+
map: {
|
|
130
|
+
mappings: ''
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
resolveId(source) {
|
|
136
|
+
var _compiler2;
|
|
137
|
+
const [validId, query] = source.split('?');
|
|
138
|
+
if (!isVirtualId(validId)) return;
|
|
139
|
+
const absoluteId = getAbsoluteId(validId);
|
|
140
|
+
if ( // We should always have CSS for a file here.
|
|
141
|
+
// The only valid scenario for a missing one is if someone had written
|
|
142
|
+
// a file in their app using the .vanilla.js/.vanilla.css extension
|
|
143
|
+
(_compiler2 = compiler) !== null && _compiler2 !== void 0 && _compiler2.getCssForFile(virtualIdToFileId(absoluteId))) {
|
|
144
|
+
// Keep the original query string for HMR.
|
|
145
|
+
return absoluteId + (query ? `?${query}` : '');
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
load(id) {
|
|
149
|
+
const [validId] = id.split('?');
|
|
150
|
+
if (!isVirtualId(validId) || !compiler) return;
|
|
151
|
+
const absoluteId = getAbsoluteId(validId);
|
|
152
|
+
const {
|
|
153
|
+
css
|
|
154
|
+
} = compiler.getCssForFile(virtualIdToFileId(absoluteId));
|
|
155
|
+
return css;
|
|
156
|
+
}
|
|
157
|
+
};
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
exports.vanillaExtractPlugin = vanillaExtractPlugin;
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
import { getPackageInfo, createCompiler, cssFileFilter, transform, normalizePath } from '@vanilla-extract/integration';
|
|
3
|
+
|
|
4
|
+
const virtualExtCss = '.vanilla.css';
|
|
5
|
+
const isVirtualId = id => id.endsWith(virtualExtCss);
|
|
6
|
+
const fileIdToVirtualId = id => `${id}${virtualExtCss}`;
|
|
7
|
+
const virtualIdToFileId = virtualId => virtualId.slice(0, -virtualExtCss.length);
|
|
8
|
+
function vanillaExtractPlugin({
|
|
9
|
+
identifiers,
|
|
10
|
+
unstable_mode: mode = 'emitCss'
|
|
11
|
+
} = {}) {
|
|
12
|
+
let config;
|
|
13
|
+
let userConfig;
|
|
14
|
+
let server;
|
|
15
|
+
let packageName;
|
|
16
|
+
let compiler;
|
|
17
|
+
const getIdentOption = () => identifiers ?? (config.mode === 'production' ? 'short' : 'debug');
|
|
18
|
+
const getAbsoluteId = filePath => {
|
|
19
|
+
let resolvedId = filePath;
|
|
20
|
+
if (filePath.startsWith(config.root) ||
|
|
21
|
+
// In monorepos the absolute path will be outside of config.root, so we check that they have the same root on the file system
|
|
22
|
+
path.isAbsolute(filePath) && filePath.split(path.sep)[1] === config.root.split(path.sep)[1]) {
|
|
23
|
+
resolvedId = filePath;
|
|
24
|
+
} else {
|
|
25
|
+
// In SSR mode we can have paths like /app/styles.css.ts
|
|
26
|
+
resolvedId = path.join(config.root, filePath);
|
|
27
|
+
}
|
|
28
|
+
return normalizePath(resolvedId);
|
|
29
|
+
};
|
|
30
|
+
function invalidateModule(absoluteId) {
|
|
31
|
+
if (!server) return;
|
|
32
|
+
const {
|
|
33
|
+
moduleGraph
|
|
34
|
+
} = server;
|
|
35
|
+
const modules = moduleGraph.getModulesByFile(absoluteId);
|
|
36
|
+
if (modules) {
|
|
37
|
+
for (const module of modules) {
|
|
38
|
+
moduleGraph.invalidateModule(module);
|
|
39
|
+
|
|
40
|
+
// Vite uses this timestamp to add `?t=` query string automatically for HMR.
|
|
41
|
+
module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
function addWatchFiles(fromId, files) {
|
|
46
|
+
// We don't need to watch files in build mode
|
|
47
|
+
if (config.command === 'build' && !config.build.watch) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
for (const file of files) {
|
|
51
|
+
if (!file.includes('node_modules') && normalizePath(file) !== fromId) {
|
|
52
|
+
this.addWatchFile(file);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
return {
|
|
57
|
+
name: 'vanilla-extract',
|
|
58
|
+
configureServer(_server) {
|
|
59
|
+
server = _server;
|
|
60
|
+
},
|
|
61
|
+
config(viteUserConfig) {
|
|
62
|
+
userConfig = viteUserConfig;
|
|
63
|
+
return {
|
|
64
|
+
ssr: {
|
|
65
|
+
external: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope', '@vanilla-extract/css/adapter']
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
},
|
|
69
|
+
async configResolved(resolvedConfig) {
|
|
70
|
+
config = resolvedConfig;
|
|
71
|
+
packageName = getPackageInfo(config.root).name;
|
|
72
|
+
if (mode !== 'transform') {
|
|
73
|
+
var _userConfig$plugins;
|
|
74
|
+
compiler = createCompiler({
|
|
75
|
+
root: config.root,
|
|
76
|
+
identifiers: getIdentOption(),
|
|
77
|
+
cssImportSpecifier: fileIdToVirtualId,
|
|
78
|
+
viteResolve: config.resolve,
|
|
79
|
+
vitePlugins: (_userConfig$plugins = userConfig.plugins) === null || _userConfig$plugins === void 0 ? void 0 : _userConfig$plugins.flat().filter(plugin => typeof plugin === 'object' && plugin !== null && 'name' in plugin &&
|
|
80
|
+
// Prevent an infinite loop where the compiler creates a new instance of the plugin,
|
|
81
|
+
// which creates a new compiler, which creates a new instance of the plugin, etc.
|
|
82
|
+
plugin.name !== 'vanilla-extract' &&
|
|
83
|
+
// Skip Vitest plugins
|
|
84
|
+
plugin.name !== 'vitest' && !plugin.name.startsWith('vitest:'))
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
buildEnd() {
|
|
89
|
+
var _compiler;
|
|
90
|
+
(_compiler = compiler) === null || _compiler === void 0 ? void 0 : _compiler.close();
|
|
91
|
+
},
|
|
92
|
+
async transform(code, id) {
|
|
93
|
+
const [validId] = id.split('?');
|
|
94
|
+
if (!cssFileFilter.test(validId)) {
|
|
95
|
+
return null;
|
|
96
|
+
}
|
|
97
|
+
const identOption = getIdentOption();
|
|
98
|
+
if (mode === 'transform') {
|
|
99
|
+
return transform({
|
|
100
|
+
source: code,
|
|
101
|
+
filePath: normalizePath(validId),
|
|
102
|
+
rootPath: config.root,
|
|
103
|
+
packageName,
|
|
104
|
+
identOption
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
if (compiler) {
|
|
108
|
+
const absoluteId = getAbsoluteId(validId);
|
|
109
|
+
const {
|
|
110
|
+
source,
|
|
111
|
+
watchFiles
|
|
112
|
+
} = await compiler.processVanillaFile(absoluteId, {
|
|
113
|
+
outputCss: true
|
|
114
|
+
});
|
|
115
|
+
addWatchFiles.call(this, absoluteId, watchFiles);
|
|
116
|
+
|
|
117
|
+
// We have to invalidate the virtual module, not the real one we just transformed
|
|
118
|
+
invalidateModule(fileIdToVirtualId(absoluteId));
|
|
119
|
+
return {
|
|
120
|
+
code: source,
|
|
121
|
+
map: {
|
|
122
|
+
mappings: ''
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
resolveId(source) {
|
|
128
|
+
var _compiler2;
|
|
129
|
+
const [validId, query] = source.split('?');
|
|
130
|
+
if (!isVirtualId(validId)) return;
|
|
131
|
+
const absoluteId = getAbsoluteId(validId);
|
|
132
|
+
if ( // We should always have CSS for a file here.
|
|
133
|
+
// The only valid scenario for a missing one is if someone had written
|
|
134
|
+
// a file in their app using the .vanilla.js/.vanilla.css extension
|
|
135
|
+
(_compiler2 = compiler) !== null && _compiler2 !== void 0 && _compiler2.getCssForFile(virtualIdToFileId(absoluteId))) {
|
|
136
|
+
// Keep the original query string for HMR.
|
|
137
|
+
return absoluteId + (query ? `?${query}` : '');
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
load(id) {
|
|
141
|
+
const [validId] = id.split('?');
|
|
142
|
+
if (!isVirtualId(validId) || !compiler) return;
|
|
143
|
+
const absoluteId = getAbsoluteId(validId);
|
|
144
|
+
const {
|
|
145
|
+
css
|
|
146
|
+
} = compiler.getCssForFile(virtualIdToFileId(absoluteId));
|
|
147
|
+
return css;
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
export { vanillaExtractPlugin };
|
package/package.json
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@vanilla-extract/vite-plugin",
|
|
3
|
+
"version": "0.0.0-1302-no-css-for-file-20240203091738",
|
|
4
|
+
"description": "Zero-runtime Stylesheets-in-TypeScript",
|
|
5
|
+
"main": "dist/vanilla-extract-vite-plugin.cjs.js",
|
|
6
|
+
"module": "dist/vanilla-extract-vite-plugin.esm.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"/dist"
|
|
9
|
+
],
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "https://github.com/vanilla-extract-css/vanilla-extract.git",
|
|
13
|
+
"directory": "packages/vite-plugin"
|
|
14
|
+
},
|
|
15
|
+
"author": "SEEK",
|
|
16
|
+
"license": "MIT",
|
|
17
|
+
"dependencies": {
|
|
18
|
+
"@vanilla-extract/integration": "0.0.0-1302-no-css-for-file-20240203091738"
|
|
19
|
+
},
|
|
20
|
+
"devDependencies": {
|
|
21
|
+
"vite": "npm:vite@^5.0.11"
|
|
22
|
+
},
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"vite": "^4.0.3 || ^5.0.0"
|
|
25
|
+
}
|
|
26
|
+
}
|