Skip to content

Commit 6c1f0af

Browse files
nekomeowwwsumimakito
nekomeowww
and
sumimakito
authored
feat(preset): use conditional exports to prevent import of node:process fail on client and REPL (#3)
Co-authored-by: Makito <[email protected]>
1 parent 11bcaba commit 6c1f0af

File tree

5 files changed

+139
-115
lines changed

5 files changed

+139
-115
lines changed

‎packages/preset/package.json‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,16 @@
3232
"directory": "packages/preset"
3333
},
3434
"exports": {
35-
".": "./dist/index.js",
35+
".": {
36+
"types": "./dist/index.d.mts",
37+
"node": "./dist/index.node.mjs",
38+
"default": "./dist/index.mjs"
39+
},
3640
"./package.json": "./package.json"
3741
},
38-
"main": "./dist/index.js",
39-
"module": "./dist/index.js",
40-
"types": "./dist/index.d.ts",
42+
"main": "./dist/index.mjs",
43+
"module": "./dist/index.mjs",
44+
"types": "./dist/index.d.mts",
4145
"scripts": {
4246
"build": "tsdown"
4347
},

‎packages/preset/src/index.node.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { env } from 'node:process'
2+
3+
import { createPresetChromatic } from './shared'
4+
5+
/**
6+
* Some tricks for both identifiable for UnoCSS IDE integration for previewing colors
7+
* and for UnoCSS playground to be able to use this preset.
8+
*/
9+
export const presetChromatic = createPresetChromatic((env.VSCODE_ESM_ENTRYPOINT ?? '').includes('extensionHostProcess'))
10+
export { VAR_HUE } from './shared'
11+
export type { PresetChromaticOptions } from './shared'
12+
13+
export default presetChromatic

‎packages/preset/src/index.ts‎

Lines changed: 4 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,7 @@
1-
import { definePreset, LAYER_PREFLIGHTS } from '@unocss/core'
2-
import { env } from 'node:process'
1+
import { createPresetChromatic } from './shared'
32

4-
type Shade = 'DEFAULT' | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
5-
6-
export const VAR_HUE = '--chromatic-hue'
7-
8-
const VAR_CHROMA_SHADES = {
9-
DEFAULT: '--chromatic-chroma',
10-
50: '--chromatic-chroma-50',
11-
100: '--chromatic-chroma-100',
12-
200: '--chromatic-chroma-200',
13-
300: '--chromatic-chroma-300',
14-
400: '--chromatic-chroma-400',
15-
500: '--chromatic-chroma-500',
16-
600: '--chromatic-chroma-600',
17-
700: '--chromatic-chroma-700',
18-
800: '--chromatic-chroma-800',
19-
900: '--chromatic-chroma-900',
20-
950: '--chromatic-chroma-950',
21-
} as const satisfies Record<Shade, string>
22-
23-
function createVarBasedColorShades(hueOffset: number) {
24-
return {
25-
DEFAULT: `oklch(62% var(${VAR_CHROMA_SHADES.DEFAULT}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
26-
50: `color-mix(in srgb, oklch(95% var(${VAR_CHROMA_SHADES[50]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha) 30%, oklch(100% 0 360 / %alpha))`,
27-
100: `color-mix(in srgb, oklch(95% var(${VAR_CHROMA_SHADES[100]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha) 80%, oklch(100% 0 360 / %alpha))`,
28-
200: `oklch(90% var(${VAR_CHROMA_SHADES[200]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
29-
300: `oklch(85% var(${VAR_CHROMA_SHADES[300]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
30-
400: `oklch(74% var(${VAR_CHROMA_SHADES[400]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
31-
500: `oklch(62% var(${VAR_CHROMA_SHADES[500]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
32-
600: `oklch(54% var(${VAR_CHROMA_SHADES[600]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
33-
700: `oklch(49% var(${VAR_CHROMA_SHADES[700]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
34-
800: `oklch(42% var(${VAR_CHROMA_SHADES[800]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
35-
900: `oklch(37% var(${VAR_CHROMA_SHADES[900]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
36-
950: `oklch(29% var(${VAR_CHROMA_SHADES[950]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
37-
} as const satisfies Record<Shade, string>
38-
}
39-
40-
function createBakedColorShades(baseHue: number, hueOffset: number) {
41-
const defaultChroma = 0.18 + Math.cos(baseHue * Math.PI / 180) * 0.04
42-
const hue = baseHue + hueOffset
43-
44-
return {
45-
DEFAULT: `oklch(62% ${defaultChroma} ${hue} / %alpha)`,
46-
50: `color-mix(in srgb, oklch(95% ${defaultChroma * 0.3} ${hue} / %alpha) 30%, oklch(100% 0 360 / %alpha))`,
47-
100: `color-mix(in srgb, oklch(95% ${defaultChroma * 0.5} ${hue} / %alpha) 80%, oklch(100% 0 360 / %alpha))`,
48-
200: `oklch(90% ${defaultChroma * 0.6} ${hue} / %alpha)`,
49-
300: `oklch(85% ${defaultChroma * 0.75} ${hue} / %alpha)`,
50-
400: `oklch(74% ${defaultChroma * 0.85} ${hue} / %alpha)`,
51-
500: `oklch(62% ${defaultChroma} ${hue} / %alpha)`,
52-
600: `oklch(54% ${defaultChroma * 1.15} ${hue} / %alpha)`,
53-
700: `oklch(49% ${defaultChroma * 1.1} ${hue} / %alpha)`,
54-
800: `oklch(42% ${defaultChroma * 0.85} ${hue} / %alpha)`,
55-
900: `oklch(37% ${defaultChroma * 0.7} ${hue} / %alpha)`,
56-
950: `oklch(29% ${defaultChroma * 0.5} ${hue} / %alpha)`,
57-
} as const satisfies Record<Shade, string>
58-
}
59-
60-
export interface PresetChromaticOptions {
61-
baseHue: number
62-
colors: Record<string, number>
63-
bakeColors?: boolean
64-
}
65-
66-
export const presetChromatic = definePreset<PresetChromaticOptions>((options) => {
67-
// Some tricks
68-
const calledFromExtension = (env.VSCODE_ESM_ENTRYPOINT ?? '').includes('extensionHostProcess')
69-
70-
return {
71-
name: 'preset-chromatic',
72-
...options && {
73-
theme: {
74-
colors: Object
75-
.entries(options.colors)
76-
.reduce((colors, [key, hueOffset]) => {
77-
colors[key] = (options.bakeColors || calledFromExtension)
78-
? createBakedColorShades(options.baseHue, hueOffset)
79-
: createVarBasedColorShades(hueOffset)
80-
81-
return colors
82-
}, {} as Record<string, Record<Shade, string>>),
83-
},
84-
preflights: [
85-
{
86-
layer: LAYER_PREFLIGHTS,
87-
getCSS() {
88-
return `
89-
:root {
90-
${VAR_HUE}: ${options.baseHue};
91-
${VAR_CHROMA_SHADES.DEFAULT}: calc(0.18 + (cos(var(${VAR_HUE}) * 3.14159265 / 180) * 0.04));
92-
${VAR_CHROMA_SHADES[50]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.3);
93-
${VAR_CHROMA_SHADES[100]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.5);
94-
${VAR_CHROMA_SHADES[200]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.6);
95-
${VAR_CHROMA_SHADES[300]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.75);
96-
${VAR_CHROMA_SHADES[400]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.85);
97-
${VAR_CHROMA_SHADES[500]}: var(${VAR_CHROMA_SHADES.DEFAULT});
98-
${VAR_CHROMA_SHADES[600]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 1.15);
99-
${VAR_CHROMA_SHADES[700]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 1.1);
100-
${VAR_CHROMA_SHADES[800]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.85);
101-
${VAR_CHROMA_SHADES[900]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.7);
102-
${VAR_CHROMA_SHADES[950]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.5);
103-
}
104-
`
105-
},
106-
},
107-
],
108-
},
109-
}
110-
})
3+
export const presetChromatic = createPresetChromatic()
4+
export { VAR_HUE } from './shared'
5+
export type { PresetChromaticOptions } from './shared'
1116

1127
export default presetChromatic

‎packages/preset/src/shared.ts‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { definePreset, LAYER_PREFLIGHTS } from '@unocss/core'
2+
3+
export const VAR_HUE = '--chromatic-hue'
4+
5+
export interface PresetChromaticOptions {
6+
baseHue: number
7+
colors: Record<string, number>
8+
bakeColors?: boolean
9+
}
10+
11+
export type Shade = 'DEFAULT' | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
12+
13+
export const VAR_CHROMA_SHADES = {
14+
DEFAULT: '--chromatic-chroma',
15+
50: '--chromatic-chroma-50',
16+
100: '--chromatic-chroma-100',
17+
200: '--chromatic-chroma-200',
18+
300: '--chromatic-chroma-300',
19+
400: '--chromatic-chroma-400',
20+
500: '--chromatic-chroma-500',
21+
600: '--chromatic-chroma-600',
22+
700: '--chromatic-chroma-700',
23+
800: '--chromatic-chroma-800',
24+
900: '--chromatic-chroma-900',
25+
950: '--chromatic-chroma-950',
26+
} as const satisfies Record<Shade, string>
27+
28+
export function createVarBasedColorShades(hueOffset: number) {
29+
return {
30+
DEFAULT: `oklch(62% var(${VAR_CHROMA_SHADES.DEFAULT}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
31+
50: `color-mix(in srgb, oklch(95% var(${VAR_CHROMA_SHADES[50]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha) 30%, oklch(100% 0 360 / %alpha))`,
32+
100: `color-mix(in srgb, oklch(95% var(${VAR_CHROMA_SHADES[100]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha) 80%, oklch(100% 0 360 / %alpha))`,
33+
200: `oklch(90% var(${VAR_CHROMA_SHADES[200]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
34+
300: `oklch(85% var(${VAR_CHROMA_SHADES[300]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
35+
400: `oklch(74% var(${VAR_CHROMA_SHADES[400]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
36+
500: `oklch(62% var(${VAR_CHROMA_SHADES[500]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
37+
600: `oklch(54% var(${VAR_CHROMA_SHADES[600]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
38+
700: `oklch(49% var(${VAR_CHROMA_SHADES[700]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
39+
800: `oklch(42% var(${VAR_CHROMA_SHADES[800]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
40+
900: `oklch(37% var(${VAR_CHROMA_SHADES[900]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
41+
950: `oklch(29% var(${VAR_CHROMA_SHADES[950]}) calc(var(${VAR_HUE}) + ${hueOffset}) / %alpha)`,
42+
} as const satisfies Record<Shade, string>
43+
}
44+
45+
export function createBakedColorShades(baseHue: number, hueOffset: number) {
46+
const defaultChroma = 0.18 + Math.cos(baseHue * Math.PI / 180) * 0.04
47+
const hue = baseHue + hueOffset
48+
49+
return {
50+
DEFAULT: `oklch(62% ${defaultChroma} ${hue} / %alpha)`,
51+
50: `color-mix(in srgb, oklch(95% ${defaultChroma * 0.3} ${hue} / %alpha) 30%, oklch(100% 0 360 / %alpha))`,
52+
100: `color-mix(in srgb, oklch(95% ${defaultChroma * 0.5} ${hue} / %alpha) 80%, oklch(100% 0 360 / %alpha))`,
53+
200: `oklch(90% ${defaultChroma * 0.6} ${hue} / %alpha)`,
54+
300: `oklch(85% ${defaultChroma * 0.75} ${hue} / %alpha)`,
55+
400: `oklch(74% ${defaultChroma * 0.85} ${hue} / %alpha)`,
56+
500: `oklch(62% ${defaultChroma} ${hue} / %alpha)`,
57+
600: `oklch(54% ${defaultChroma * 1.15} ${hue} / %alpha)`,
58+
700: `oklch(49% ${defaultChroma * 1.1} ${hue} / %alpha)`,
59+
800: `oklch(42% ${defaultChroma * 0.85} ${hue} / %alpha)`,
60+
900: `oklch(37% ${defaultChroma * 0.7} ${hue} / %alpha)`,
61+
950: `oklch(29% ${defaultChroma * 0.5} ${hue} / %alpha)`,
62+
} as const satisfies Record<Shade, string>
63+
}
64+
65+
export function createPresetChromatic(calledFromExtension = false) {
66+
return definePreset<PresetChromaticOptions>((options) => {
67+
return {
68+
name: 'preset-chromatic',
69+
...options && {
70+
theme: {
71+
colors: Object
72+
.entries(options.colors)
73+
.reduce((colors, [key, hueOffset]) => {
74+
colors[key] = (options.bakeColors || calledFromExtension)
75+
? createBakedColorShades(options.baseHue, hueOffset)
76+
: createVarBasedColorShades(hueOffset)
77+
78+
return colors
79+
}, {} as Record<string, Record<Shade, string>>),
80+
},
81+
preflights: [
82+
{
83+
layer: LAYER_PREFLIGHTS,
84+
getCSS() {
85+
return `
86+
:root {
87+
${VAR_HUE}: ${options.baseHue};
88+
${VAR_CHROMA_SHADES.DEFAULT}: calc(0.18 + (cos(var(${VAR_HUE}) * 3.14159265 / 180) * 0.04));
89+
${VAR_CHROMA_SHADES[50]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.3);
90+
${VAR_CHROMA_SHADES[100]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.5);
91+
${VAR_CHROMA_SHADES[200]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.6);
92+
${VAR_CHROMA_SHADES[300]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.75);
93+
${VAR_CHROMA_SHADES[400]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.85);
94+
${VAR_CHROMA_SHADES[500]}: var(${VAR_CHROMA_SHADES.DEFAULT});
95+
${VAR_CHROMA_SHADES[600]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 1.15);
96+
${VAR_CHROMA_SHADES[700]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 1.1);
97+
${VAR_CHROMA_SHADES[800]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.85);
98+
${VAR_CHROMA_SHADES[900]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.7);
99+
${VAR_CHROMA_SHADES[950]}: calc(var(${VAR_CHROMA_SHADES.DEFAULT}) * 0.5);
100+
}
101+
`
102+
},
103+
},
104+
],
105+
},
106+
}
107+
})
108+
}

‎packages/preset/tsdown.config.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { defineConfig } from 'tsdown'
22

33
export default defineConfig({
4+
entry: {
5+
'index': './src/index.ts',
6+
'index.node': './src/index.node.ts',
7+
},
48
dts: true,
5-
exports: true,
6-
entry: ['./src'],
9+
unused: true,
10+
fixedExtension: true,
711
})

0 commit comments

Comments
 (0)