Skip to content

Commit a3a4752

Browse files
nekomeowwwsumimakito
nekomeowww
and
sumimakito
committed
refactor: share unocss config across multiple packages
Co-authored-by: Makito <5277268+sumimakito@users.noreply.github.com>
1 parent 3f93350 commit a3a4752

File tree

12 files changed

+231
-402
lines changed

12 files changed

+231
-402
lines changed

‎apps/stage-tamagotchi/uno.config.ts‎

Lines changed: 2 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,3 @@
1-
import { createExternalPackageIconLoader } from '@iconify/utils/lib/loader/external-pkg'
2-
import { colorToString } from '@unocss/preset-mini/utils'
3-
import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
4-
import {
5-
defineConfig,
6-
presetAttributify,
7-
presetIcons,
8-
presetTypography,
9-
presetWebFonts,
10-
presetWind3,
11-
transformerDirectives,
12-
transformerVariantGroup,
13-
} from 'unocss'
14-
import { presetScrollbar } from 'unocss-preset-scrollbar'
15-
import { parseColor } from 'unocss/preset-mini'
1+
import { sharedUnoConfig } from '../../uno.config'
162

17-
function createColorSchemeConfig(hueOffset = 0) {
18-
return {
19-
DEFAULT: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`,
20-
50: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-50) calc(var(--theme-colors-hue) + ${hueOffset})) 30%, oklch(100% 0 360))`,
21-
100: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-100) calc(var(--theme-colors-hue) + ${hueOffset})) 80%, oklch(100% 0 360))`,
22-
200: `oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + ${hueOffset}))`,
23-
300: `oklch(85% var(--theme-colors-chroma-300) calc(var(--theme-colors-hue) + ${hueOffset}))`,
24-
400: `oklch(74% var(--theme-colors-chroma-400) calc(var(--theme-colors-hue) + ${hueOffset}))`,
25-
500: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`,
26-
600: `oklch(54% var(--theme-colors-chroma-600) calc(var(--theme-colors-hue) + ${hueOffset}))`,
27-
700: `oklch(49% var(--theme-colors-chroma-700) calc(var(--theme-colors-hue) + ${hueOffset}))`,
28-
800: `oklch(42% var(--theme-colors-chroma-800) calc(var(--theme-colors-hue) + ${hueOffset}))`,
29-
900: `oklch(37% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${hueOffset}))`,
30-
950: `oklch(29% var(--theme-colors-chroma-950) calc(var(--theme-colors-hue) + ${hueOffset}))`,
31-
}
32-
}
33-
34-
export default defineConfig({
35-
presets: [
36-
presetWind3(),
37-
presetAttributify(),
38-
presetTypography(),
39-
presetWebFonts({
40-
fonts: {
41-
sans: 'DM Sans',
42-
serif: 'DM Serif Display',
43-
mono: 'DM Mono',
44-
cute: 'Kiwi Maru',
45-
cuteen: 'Sniglet',
46-
jura: 'Jura',
47-
},
48-
// Web fonts preset
49-
// https://unocss.dev/presets/web-fonts#serve-fonts-locally
50-
processors: createLocalFontProcessor(),
51-
timeouts: {
52-
warning: 5000,
53-
failure: 10000,
54-
},
55-
}),
56-
presetIcons({
57-
scale: 1.2,
58-
collections: {
59-
...createExternalPackageIconLoader('@proj-airi/lobe-icons'),
60-
},
61-
}),
62-
presetScrollbar(),
63-
],
64-
transformers: [
65-
transformerDirectives({
66-
applyVariable: ['--at-apply'],
67-
}),
68-
transformerVariantGroup(),
69-
],
70-
safelist: 'prose prose-sm m-auto text-left'.split(' '),
71-
// hyoban/unocss-preset-shadcn: Use shadcn ui with UnoCSS
72-
// https://github.com/hyoban/unocss-preset-shadcn
73-
//
74-
// Thanks to
75-
// https://github.com/unovue/shadcn-vue/issues/34#issuecomment-2467318118
76-
// https://github.com/hyoban-template/shadcn-vue-unocss-starter
77-
//
78-
// By default, `.ts` and `.js` files are NOT extracted.
79-
// If you want to extract them, use the following configuration.
80-
// It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte.
81-
content: {
82-
pipeline: {
83-
include: [
84-
// the default
85-
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
86-
// include js/ts files
87-
'(components|src)/**/*.{js,ts}',
88-
'**/stage-ui/**/*.{js,ts}',
89-
],
90-
},
91-
},
92-
rules: [
93-
[/^mask-\[(.*)\]$/, ([, suffix]) => ({ '-webkit-mask-image': suffix.replace(/_/g, ' ') })],
94-
[/^bg-dotted-\[(.*)\]$/, ([, color], { theme }) => {
95-
const parsedColor = parseColor(color, theme)
96-
// Util usage: https://github.com/unocss/unocss/blob/f57ef6ae50006a92f444738e50f3601c0d1121f2/packages-presets/preset-mini/src/_utils/utilities.ts#L186
97-
return {
98-
'background-image': `radial-gradient(circle at 1px 1px, ${colorToString(parsedColor?.cssColor ?? parsedColor?.color ?? color, 'var(--un-background-opacity)')} 1px, transparent 0)`,
99-
'--un-background-opacity': parsedColor?.cssColor?.alpha ?? parsedColor?.alpha ?? 1,
100-
}
101-
}],
102-
],
103-
theme: {
104-
colors: {
105-
primary: createColorSchemeConfig(),
106-
complementary: createColorSchemeConfig(180),
107-
},
108-
},
109-
})
3+
export default sharedUnoConfig()

‎apps/stage-web/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@
9090
"@iconify-json/solar": "^1.2.2",
9191
"@iconify-json/svg-spinners": "^1.2.2",
9292
"@iconify-json/vscode-icons": "^1.2.19",
93-
"@iconify/utils": "^2.3.0",
9493
"@intlify/unplugin-vue-i18n": "^6.0.8",
9594
"@proj-airi/lobe-icons": "^1.0.5",
9695
"@proj-airi/unplugin-fetch": "^0.1.4",

‎apps/stage-web/uno.config.ts‎

Lines changed: 13 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,16 @@
1-
import { createExternalPackageIconLoader } from '@iconify/utils/lib/loader/external-pkg'
2-
import { colorToString } from '@unocss/preset-mini/utils'
3-
import {
4-
defineConfig,
5-
presetAttributify,
6-
presetIcons,
7-
presetTypography,
8-
presetWebFonts,
9-
presetWind3,
10-
transformerDirectives,
11-
transformerVariantGroup,
12-
} from 'unocss'
13-
import { parseColor } from 'unocss/preset-mini'
1+
import { mergeConfigs } from 'unocss'
142

15-
function createColorSchemeConfig(hueOffset = 0) {
16-
return {
17-
DEFAULT: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`,
18-
50: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-50) calc(var(--theme-colors-hue) + ${hueOffset})) 30%, oklch(100% 0 360))`,
19-
100: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-100) calc(var(--theme-colors-hue) + ${hueOffset})) 80%, oklch(100% 0 360))`,
20-
200: `oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + ${hueOffset}))`,
21-
300: `oklch(85% var(--theme-colors-chroma-300) calc(var(--theme-colors-hue) + ${hueOffset}))`,
22-
400: `oklch(74% var(--theme-colors-chroma-400) calc(var(--theme-colors-hue) + ${hueOffset}))`,
23-
500: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`,
24-
600: `oklch(54% var(--theme-colors-chroma-600) calc(var(--theme-colors-hue) + ${hueOffset}))`,
25-
700: `oklch(49% var(--theme-colors-chroma-700) calc(var(--theme-colors-hue) + ${hueOffset}))`,
26-
800: `oklch(42% var(--theme-colors-chroma-800) calc(var(--theme-colors-hue) + ${hueOffset}))`,
27-
900: `oklch(37% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${hueOffset}))`,
28-
950: `oklch(29% var(--theme-colors-chroma-950) calc(var(--theme-colors-hue) + ${hueOffset}))`,
29-
}
30-
}
3+
import { histoireUnoConfig, sharedUnoConfig } from '../../uno.config'
314

32-
export default defineConfig({
33-
presets: [
34-
presetWind3(),
35-
presetAttributify(),
36-
presetTypography(),
37-
presetWebFonts({
38-
fonts: {
39-
sans: 'DM Sans',
40-
serif: 'DM Serif Display',
41-
mono: 'DM Mono',
42-
cute: 'Kiwi Maru',
43-
cuteen: 'Sniglet',
44-
gugi: 'Gugi',
45-
},
46-
timeouts: {
47-
warning: 5000,
48-
failure: 10000,
49-
},
50-
}),
51-
presetIcons({
52-
scale: 1.2,
53-
collections: {
54-
...createExternalPackageIconLoader('@proj-airi/lobe-icons'),
55-
},
56-
}),
57-
],
58-
transformers: [
59-
transformerDirectives({
60-
applyVariable: ['--at-apply'],
61-
}),
62-
transformerVariantGroup(),
63-
],
64-
safelist: 'prose prose-sm m-auto text-left'.split(' '),
65-
// hyoban/unocss-preset-shadcn: Use shadcn ui with UnoCSS
66-
// https://github.com/hyoban/unocss-preset-shadcn
67-
//
68-
// Thanks to
69-
// https://github.com/unovue/shadcn-vue/issues/34#issuecomment-2467318118
70-
// https://github.com/hyoban-template/shadcn-vue-unocss-starter
71-
//
72-
// By default, `.ts` and `.js` files are NOT extracted.
73-
// If you want to extract them, use the following configuration.
74-
// It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte.
75-
content: {
76-
pipeline: {
77-
include: [
78-
// the default
79-
/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
80-
// include js/ts files
81-
'(components|src)/**/*.{js,ts}',
82-
'**/stage-ui/**/*.{js,ts}',
83-
],
84-
},
5+
export default mergeConfigs([
6+
sharedUnoConfig(),
7+
histoireUnoConfig(),
8+
{
9+
rules: [
10+
['transition-colors-none', {
11+
'transition-property': 'color, background-color, border-color, text-color',
12+
'transition-duration': '0s',
13+
}],
14+
],
8515
},
86-
rules: [
87-
[/^mask-\[(.*)\]$/, ([, suffix]) => ({ '-webkit-mask-image': suffix.replace(/_/g, ' ') })],
88-
[/^bg-dotted-\[(.*)\]$/, ([, color], { theme }) => {
89-
const parsedColor = parseColor(color, theme)
90-
// Util usage: https://github.com/unocss/unocss/blob/f57ef6ae50006a92f444738e50f3601c0d1121f2/packages-presets/preset-mini/src/_utils/utilities.ts#L186
91-
return {
92-
'background-image': `radial-gradient(circle at 1px 1px, ${colorToString(parsedColor?.cssColor ?? parsedColor?.color ?? color, 'var(--un-background-opacity)')} 1px, transparent 0)`,
93-
'--un-background-opacity': parsedColor?.cssColor?.alpha ?? parsedColor?.alpha ?? 1,
94-
}
95-
}],
96-
['transition-colors-none', {
97-
'transition-property': 'color, background-color, border-color, text-color',
98-
'transition-duration': '0s',
99-
}],
100-
],
101-
theme: {
102-
colors: {
103-
primary: createColorSchemeConfig(),
104-
complementary: createColorSchemeConfig(180),
105-
},
106-
},
107-
})
16+
])

‎cspell.config.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ words:
6767
- gpuu
6868
- grammyjs
6969
- groq
70+
- gugi
7071
- guiiai
7172
- hfspaceup
7273
- hfsup
@@ -138,6 +139,7 @@ words:
138139
- pthread
139140
- qwen
140141
- rehype
142+
- reka
141143
- rushstack
142144
- Saccade
143145
- saccades

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"devDependencies": {
3737
"@antfu/eslint-config": "^4.12.0",
3838
"@antfu/ni": "^24.3.0",
39+
"@iconify/utils": "^2.3.0",
3940
"@types/node": "^22.14.1",
4041
"@unocss/eslint-config": "^66.1.0-beta.12",
4142
"@unocss/eslint-plugin": "^66.1.0-beta.12",
@@ -51,6 +52,7 @@
5152
"typescript": "~5.8.3",
5253
"unbuild": "^3.5.0",
5354
"unocss": "^66.1.0-beta.12",
55+
"unocss-preset-scrollbar": "^3.2.0",
5456
"vite": "^6.3.3",
5557
"vite-plugin-inspect": "^11.0.1",
5658
"vitest": "^3.1.2"

‎packages/stage-ui/package.json‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,33 +10,49 @@
1010
},
1111
"license": "MIT",
1212
"exports": {
13-
"./constants": {
14-
"types": "./dist/constants/index.d.ts",
15-
"import": "./dist/constants/index.mjs"
16-
},
17-
"./components": {
13+
".": {
1814
"types": "./dist/components/index.d.ts",
1915
"import": "./dist/components/index.mjs"
2016
},
21-
"./stores": {
22-
"types": "./dist/stores/index.d.ts",
23-
"import": "./dist/stores/index.mjs"
24-
},
25-
".": {
17+
"./components": {
2618
"types": "./dist/components/index.d.ts",
2719
"import": "./dist/components/index.mjs"
2820
},
21+
"./composables/*": {
22+
"types": "./dist/composables/*.d.ts",
23+
"import": "./dist/composables/*.mjs"
24+
},
2925
"./composables": {
3026
"types": "./dist/composables/index.d.ts",
3127
"import": "./dist/composables/index.mjs"
3228
},
33-
"./utils": {
34-
"types": "./dist/utils/index.d.ts",
35-
"import": "./dist/utils/index.mjs"
29+
"./constants/*": {
30+
"types": "./dist/constants/*.d.ts",
31+
"import": "./dist/constants/*.mjs"
32+
},
33+
"./constants": {
34+
"types": "./dist/constants/index.d.ts",
35+
"import": "./dist/constants/index.mjs"
36+
},
37+
"./libs/*": {
38+
"types": "./dist/libs/*.d.ts",
39+
"import": "./dist/libs/*.mjs"
3640
},
3741
"./libs": {
3842
"types": "./dist/libs/index.d.ts",
3943
"import": "./dist/libs/index.mjs"
44+
},
45+
"./stores/*": {
46+
"types": "./dist/stores/*.d.ts",
47+
"import": "./dist/stores/*.mjs"
48+
},
49+
"./stores": {
50+
"types": "./dist/stores/index.d.ts",
51+
"import": "./dist/stores/index.mjs"
52+
},
53+
"./utils": {
54+
"types": "./dist/utils/index.d.ts",
55+
"import": "./dist/utils/index.mjs"
4056
}
4157
},
4258
"module": "./dist/components/index.mjs",
@@ -94,7 +110,6 @@
94110
"@vitejs/plugin-vue": "^5.2.3",
95111
"histoire": "1.0.0-alpha.2",
96112
"unocss": "^66.1.0-beta.12",
97-
"vite": "^6.3.3",
98-
"vue-sfc-transformer": "^0.1.14"
113+
"vite": "^6.3.3"
99114
}
100115
}

‎packages/stage-ui/src/components/Menu/RadioCardManySelect.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ function updateCustomValue(value: string) {
106106
<div class="relative">
107107
<!-- Horizontally scrollable container -->
108108
<div
109-
class="scrollbar-hide grid auto-cols-[350px] grid-flow-col max-h-[calc(100dvh-7lh)] gap-4 overflow-x-auto pb-4"
109+
class="grid auto-cols-[350px] grid-flow-col max-h-[calc(100dvh-7lh)] gap-4 overflow-x-auto pb-4 scrollbar-none"
110110
:class="[
111111
isListExpanded ? 'grid-cols-1 md:grid-cols-2 grid-flow-row auto-cols-auto' : '',
112112
]"

‎packages/stage-ui/src/components/Menu/VoiceCardManySelect.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -337,7 +337,7 @@ const customVoiceName = ref('')
337337
<div class="relative">
338338
<!-- Horizontally scrollable container -->
339339
<div
340-
class="scrollbar-hide grid auto-cols-[350px] grid-flow-col max-h-[calc(100dvh-7lh)] gap-4 overflow-x-auto"
340+
class="grid auto-cols-[350px] grid-flow-col max-h-[calc(100dvh-7lh)] gap-4 overflow-x-auto scrollbar-none"
341341
:class="[
342342
isListExpanded ? 'grid-cols-1 md:grid-cols-2 grid-flow-row auto-cols-auto' : '',
343343
]"

0 commit comments

Comments
 (0)