voicss 0.1.4 → 0.2.0
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/README.md +56 -36
- package/dist/index.d.mts +2 -3
- package/dist/next.d.mts +3 -4
- package/dist/next.mjs +4 -4
- package/dist/vite.mjs +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,66 +1,86 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
<picture>
|
|
3
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/kh4f/
|
|
4
|
-
<img alt="logo" src="https://raw.githubusercontent.com/kh4f/
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/kh4f/voicss/refs/heads/assets/logo-dark.png">
|
|
4
|
+
<img alt="logo" src="https://raw.githubusercontent.com/kh4f/voicss/refs/heads/assets/logo-light.png">
|
|
5
5
|
</picture>
|
|
6
6
|
<br>
|
|
7
|
-
|
|
7
|
+
Ultra-Light Zero-Runtime <b>CSS-in-TS Toolkit</b> for React
|
|
8
8
|
<br><br>
|
|
9
9
|
<p>
|
|
10
|
-
<a href="https://www.npmjs.com/package/
|
|
11
|
-
<a href="https://
|
|
12
|
-
<a href="https://github.com/kh4f/
|
|
10
|
+
<a href="https://www.npmjs.com/package/voicss"><img src="https://img.shields.io/npm/v/voicss?style=flat-square&labelColor=D2371B&color=FBDCCB&label=npm&logo=npm" alt="npm"/></a>
|
|
11
|
+
<a href="https://www.npmjs.com/package/voicss"><img src="https://img.shields.io/npm/dy/voicss?style=flat-square&labelColor=D2371B&color=FBDCCB&label=%F0%9F%93%A5%20downloads" alt="downloads"/></a>
|
|
12
|
+
<a href="https://github.com/kh4f/voicss/blob/main/LICENSE"><img src="https://img.shields.io/github/license/kh4f/voicss?style=flat-square&labelColor=D2371B&color=FBDCCB&label=%F0%9F%9B%A1%EF%B8%8F%20license" alt="license"/></a>
|
|
13
13
|
</p>
|
|
14
|
-
<
|
|
14
|
+
<b>
|
|
15
15
|
<a href="#-overview">Overview</a> •
|
|
16
16
|
<a href="#-quick-start">Quick Start</a> •
|
|
17
|
+
<a href="#%EF%B8%8F-setup">Setup</a> •
|
|
17
18
|
<a href="#%EF%B8%8F-usage">Usage</a>
|
|
18
|
-
</b
|
|
19
|
-
<
|
|
19
|
+
</b>
|
|
20
|
+
<br><br>
|
|
21
|
+
<img alt="demo" src="https://raw.githubusercontent.com/kh4f/voicss/refs/heads/assets/demo.png">
|
|
20
22
|
</div>
|
|
21
23
|
|
|
22
24
|
## 👀 Overview
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
31
|
-
-
|
|
32
|
-
|
|
33
|
-
##
|
|
34
|
-
|
|
25
|
+
|
|
26
|
+
**Voicss** */vɔɪs/* is a lightweight zero-runtime CSS-in-TS toolkit for React that extracts `` void `css ...` `` blocks from `.ts(x)` files into native CSS.
|
|
27
|
+
|
|
28
|
+
- **Zero-Runtime:** styles are extracted at build time, no JS in production
|
|
29
|
+
- **Native CSS:** write standard CSS with all modern features
|
|
30
|
+
- **Modern Bundlers:** first-class support for Next.js and Vite
|
|
31
|
+
- **HMR:** instant style updates during development
|
|
32
|
+
- **[VS Code Extension](https://marketplace.visualstudio.com/items?itemName=kh4f.voicss):** syntax highlighting, autocomplete, validation...
|
|
33
|
+
- **[ESLint Plugin](https://www.npmjs.com/package/voicss-eslint):** CSS formatting in Voicss blocks
|
|
34
|
+
|
|
35
|
+
## ⚡ Quick Start
|
|
36
|
+
|
|
37
|
+
Scaffold a [demo project](templates) for Next.js/Vite/tsdown:
|
|
38
|
+
|
|
35
39
|
```bash
|
|
36
|
-
bun create
|
|
40
|
+
bun create voicss
|
|
37
41
|
```
|
|
38
42
|
|
|
39
|
-
##
|
|
40
|
-
|
|
43
|
+
## ⚙️ Setup
|
|
44
|
+
|
|
41
45
|
```bash
|
|
42
|
-
bun
|
|
46
|
+
bun a -d voicss
|
|
43
47
|
```
|
|
48
|
+
|
|
44
49
|
```ts
|
|
45
50
|
// vite.config.ts
|
|
46
51
|
import type { UserConfig } from 'vite'
|
|
47
|
-
import
|
|
52
|
+
import voicss from 'voicss/vite'
|
|
48
53
|
|
|
49
|
-
export default {
|
|
50
|
-
plugins: [
|
|
51
|
-
}
|
|
54
|
+
export default defineConfig({
|
|
55
|
+
plugins: [voicss()],
|
|
56
|
+
})
|
|
52
57
|
```
|
|
53
58
|
|
|
54
|
-
### Next.js
|
|
55
|
-
```bash
|
|
56
|
-
bun add -D vois
|
|
57
|
-
```
|
|
58
59
|
```ts
|
|
59
60
|
// next.config.ts
|
|
60
61
|
import type { NextConfig } from 'next'
|
|
61
|
-
import {
|
|
62
|
+
import { voicssTurboRule } from 'voicss/next'
|
|
62
63
|
|
|
63
64
|
export default {
|
|
64
|
-
turbopack: { rules: { ...
|
|
65
|
+
turbopack: { rules: { ...voicssTurboRule } },
|
|
65
66
|
} satisfies NextConfig
|
|
66
|
-
```
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## 🕹️ Usage
|
|
70
|
+
|
|
71
|
+
Write `` void `css ...` `` blocks in your `.ts(x)` files — they are extracted into native CSS at build time:
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
export default function App() {
|
|
75
|
+
return <h1 className='title'>Hello</h1>
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
void `css
|
|
79
|
+
.title {
|
|
80
|
+
color: red;
|
|
81
|
+
font-size: 2rem;
|
|
82
|
+
}`
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
- Voicss produces **global CSS**
|
|
86
|
+
- Voicss blocks can be placed **anywhere in a module**
|
package/dist/index.d.mts
CHANGED
package/dist/next.d.mts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { NextConfig } from "next";
|
|
2
2
|
//#region src/next.d.ts
|
|
3
|
-
declare const
|
|
4
|
-
|
|
3
|
+
export declare const voicssTurboRule: Required<Required<NextConfig>['turbopack']>['rules'];
|
|
4
|
+
export default function export_default(this: {
|
|
5
5
|
resourcePath: string;
|
|
6
6
|
}, source: string): string;
|
|
7
|
-
//#endregion
|
|
8
|
-
export { export_default as default, voisTurboRule };
|
|
7
|
+
//#endregion
|
package/dist/next.mjs
CHANGED
|
@@ -3,15 +3,15 @@ import { mkdirSync, writeFileSync } from "node:fs";
|
|
|
3
3
|
import { dirname, join, relative, resolve } from "node:path";
|
|
4
4
|
import { createHash } from "node:crypto";
|
|
5
5
|
//#region src/next.ts
|
|
6
|
-
const
|
|
7
|
-
loaders: ["
|
|
6
|
+
const voicssTurboRule = { "*": {
|
|
7
|
+
loaders: ["voicss/next"],
|
|
8
8
|
condition: { all: [{ not: "foreign" }, { path: /\.(ts|tsx)$/ }] }
|
|
9
9
|
} };
|
|
10
10
|
function next_default(source) {
|
|
11
11
|
const css = extractCss(source);
|
|
12
12
|
if (!css) return source;
|
|
13
13
|
const fileHash = createHash("md5").update(this.resourcePath).digest("hex");
|
|
14
|
-
const cacheDir = resolve("node_modules", ".
|
|
14
|
+
const cacheDir = resolve("node_modules", ".voicss");
|
|
15
15
|
const cssFilePath = join(cacheDir, `${fileHash}.css`);
|
|
16
16
|
mkdirSync(cacheDir, { recursive: true });
|
|
17
17
|
writeFileSync(cssFilePath, css, "utf8");
|
|
@@ -20,4 +20,4 @@ function next_default(source) {
|
|
|
20
20
|
return source.replace(/^\w/m, `import '${importPath}';\n$&`);
|
|
21
21
|
}
|
|
22
22
|
//#endregion
|
|
23
|
-
export { next_default as default,
|
|
23
|
+
export { next_default as default, voicssTurboRule };
|
package/dist/vite.mjs
CHANGED
|
@@ -2,14 +2,14 @@ import { extractCss } from "./index.mjs";
|
|
|
2
2
|
import MagicString from "magic-string";
|
|
3
3
|
//#region src/vite.ts
|
|
4
4
|
const CSS_EXTRACTABLE_FILES = /\.(ts|tsx)$/;
|
|
5
|
-
const VIRTUAL_PREFIX = "virtual:
|
|
5
|
+
const VIRTUAL_PREFIX = "virtual:voicss/";
|
|
6
6
|
const RESOLVED_PREFIX = `\0${VIRTUAL_PREFIX}`;
|
|
7
7
|
const styles = /* @__PURE__ */ new Map();
|
|
8
8
|
var vite_default = () => ({
|
|
9
|
-
name: "
|
|
9
|
+
name: "voicss-vite",
|
|
10
10
|
enforce: "pre",
|
|
11
11
|
resolveId(id) {
|
|
12
|
-
if (id.startsWith(VIRTUAL_PREFIX)) return RESOLVED_PREFIX + normalizePath(id.slice(
|
|
12
|
+
if (id.startsWith(VIRTUAL_PREFIX)) return RESOLVED_PREFIX + normalizePath(id.slice(15));
|
|
13
13
|
},
|
|
14
14
|
load(id) {
|
|
15
15
|
if (id.startsWith(RESOLVED_PREFIX)) {
|