Skip to content

Commit 84f3635

Browse files
mattcompilesmarkdalgleish
mattcompiles
and
markdalgleish
authored
Add Vite plugin (#70)
Co-authored-by: Mark Dalgleish <[email protected]>
1 parent b2a4318 commit 84f3635

File tree

35 files changed

+1319
-711
lines changed

35 files changed

+1319
-711
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ tsconfig.tsbuildinfo
44
yarn-error.log
55
packages/**/README.md
66
!packages/sprinkles/README.md
7+
!packages/integration/README.md
78

89

910
.yarn/*

‎README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ Want to work at a higher level while maximising style re-use? Check out 🍨 [S
8787
- [Setup](#setup)
8888
- [webpack](#webpack)
8989
- [esbuild](#esbuild)
90+
- [Vite](#vite)
9091
- [Gatsby](#gatsby)
9192
- [API](#api)
9293
- [style](#style)
@@ -197,6 +198,29 @@ require('esbuild').build({
197198

198199
> Please note: There are currently no automatic readable class names during development. However, you can still manually provide a debug ID as the last argument to functions that generate scoped styles, e.g. `export const className = style({ ... }, 'className');`
199200
201+
### Vite
202+
203+
> Warning: Currently the Vite plugin doesn't rebuild files when dependent files change, e.g. updating `theme.css.ts` should rebuild `styles.css.ts` which imports `theme.css.ts`. This is a limitation in the Vite Plugin API that will hopefully be resolved soon. You can track the Vite issue here: https://github.com/vitejs/vite/issues/3216
204+
205+
1. Install the dependencies.
206+
207+
```bash
208+
$ npm install @vanilla-extract/css @vanilla-extract/vite-plugin
209+
```
210+
211+
2. Add the [Vite](https://vitejs.dev/) plugin to your Vite config.
212+
213+
```js
214+
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
215+
216+
// vite.config.js
217+
export default {
218+
plugins: [vanillaExtractPlugin()]
219+
}
220+
```
221+
222+
> Please note: There are currently no automatic readable class names during development. However, you can still manually provide a debug ID as the last argument to functions that generate scoped styles, e.g. `export const className = style({ ... }, 'className');`
223+
200224
### Gatsby
201225

202226
To add to your [Gatsby](https://www.gatsbyjs.com) site, use the [gatsby-plugin-vanilla-extract](https://github.com/KyleAMathews/gatsby-plugin-vanilla-extract) plugin.

‎fixtures/low-level/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/index.ts"></script>
11+
</body>
12+
</html>

‎fixtures/sprinkles/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/index.ts"></script>
11+
</body>
12+
</html>

‎fixtures/themed/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/index.ts"></script>
11+
</body>
12+
</html>

‎fixtures/themed/src/index.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,3 @@ function render() {
115115
}
116116

117117
render();
118-
119-
// @ts-expect-error
120-
if (module.hot) {
121-
// @ts-expect-error
122-
module.hot.accept(['./shared.css', './styles.css', './themes.css'], () => {
123-
render();
124-
});
125-
}

‎fixtures/unused-modules/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/index.ts"></script>
11+
</body>
12+
</html>

‎packages/babel-plugin/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,6 @@
2222
"dependencies": {
2323
"@babel/core": "^7.13.10",
2424
"@babel/template": "^7.12.13",
25-
"find-up": "^5.0.0"
25+
"@vanilla-extract/integration": "^0.1.0"
2626
}
2727
}

‎packages/babel-plugin/src/index.ts‎

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { relative, dirname } from 'path';
1+
import { relative } from 'path';
22
import { types as t, PluginObj, PluginPass, NodePath } from '@babel/core';
33
import template from '@babel/template';
4-
import findUp from 'find-up';
4+
import { getPackageInfo } from '@vanilla-extract/integration';
55

66
const packageIdentifier = '@vanilla-extract/css';
77
const filescopePackageIdentifier = '@vanilla-extract/css/fileScope';
@@ -128,29 +128,6 @@ type Context = PluginPass & {
128128
};
129129

130130
export default function (): PluginObj<Context> {
131-
let packageInfo: { name: string; dirname: string; path: string } | undefined;
132-
let hasResolvedPackageJson = false;
133-
function getPackageInfo(cwd?: string | null) {
134-
if (hasResolvedPackageJson) {
135-
return packageInfo;
136-
}
137-
138-
hasResolvedPackageJson = true;
139-
const packageJsonPath = findUp.sync('package.json', {
140-
cwd: cwd || undefined,
141-
});
142-
143-
if (packageJsonPath) {
144-
const { name } = require(packageJsonPath);
145-
packageInfo = {
146-
name,
147-
path: packageJsonPath,
148-
dirname: dirname(packageJsonPath),
149-
};
150-
}
151-
return packageInfo;
152-
}
153-
154131
return {
155132
pre({ opts }) {
156133
if (!opts.filename) {
@@ -166,12 +143,6 @@ export default function (): PluginObj<Context> {
166143

167144
const packageInfo = getPackageInfo(opts.cwd);
168145

169-
if (!packageInfo) {
170-
throw new Error(
171-
`Couldn't find parent package.json for ${opts.filename}`,
172-
);
173-
}
174-
175146
if (!packageInfo.name) {
176147
throw new Error(
177148
`Closest package.json (${packageInfo.path}) must specify name`,

‎packages/esbuild-plugin/package.json‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,10 @@
1414
},
1515
"author": "SEEK",
1616
"license": "MIT",
17-
"peerDependencies": {
18-
"esbuild": ">=0.11.1"
19-
},
2017
"dependencies": {
21-
"@vanilla-extract/css": "^0.4.0",
22-
"chalk": "^4.1.0",
23-
"dedent": "^0.7.0",
24-
"eval": "^0.1.6",
25-
"find-up": "^5.0.0",
26-
"javascript-stringify": "^2.0.1",
27-
"lodash": "^4.17.21"
18+
"@vanilla-extract/integration": "^0.1.0"
2819
},
2920
"devDependencies": {
30-
"@types/dedent": "^0.7.0",
3121
"esbuild": "^0.11.16"
3222
}
3323
}

0 commit comments

Comments
 (0)