Skip to content

Commit 8d49ef8

Browse files
AriPerkkioAriPerkkio
authored
feat!: simplify UnoCSS integration (#270)
1 parent d6d19c4 commit 8d49ef8

File tree

18 files changed

+321
-330
lines changed

18 files changed

+321
-330
lines changed

‎docs/demo/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,11 @@
1818
"devDependencies": {
1919
"@astrojs/check": "^0.7.0",
2020
"@astrojs/react": "^3.6.0",
21-
"@iconify-json/ph": "^1.1.13",
22-
"@iconify-json/svg-spinners": "^1.1.2",
2321
"@tutorialkit/astro": "workspace:*",
22+
"@tutorialkit/theme": "workspace:*",
2423
"@tutorialkit/types": "workspace:*",
25-
"@unocss/reset": "^0.59.4",
2624
"astro": "^4.12.0",
27-
"fast-glob": "^3.3.2",
2825
"prettier-plugin-astro": "^0.14.1",
29-
"typescript": "^5.4.5",
30-
"unocss": "^0.59.4"
26+
"typescript": "^5.4.5"
3127
}
3228
}

‎docs/demo/uno.config.ts

+2-42
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,5 @@
1-
import { unoCSSConfig } from '@tutorialkit/astro';
2-
import { globSync, convertPathToPattern } from 'fast-glob';
3-
import fs from 'node:fs/promises';
4-
import { basename, dirname, join } from 'node:path';
5-
import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
6-
7-
const iconPaths = globSync('./icons/languages/*.svg');
8-
9-
const customIconCollection = iconPaths.reduce(
10-
(acc, iconPath) => {
11-
const collectionName = basename(dirname(iconPath));
12-
const [iconName] = basename(iconPath).split('.');
13-
14-
acc[collectionName] ??= {};
15-
acc[collectionName][iconName] = async () => fs.readFile(iconPath, 'utf8');
16-
17-
return acc;
18-
},
19-
{} as Record<string, Record<string, () => Promise<string>>>,
20-
);
1+
import { defineConfig } from '@tutorialkit/theme';
212

223
export default defineConfig({
23-
...unoCSSConfig,
24-
content: {
25-
inline: globSync([
26-
`${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
27-
`${convertPathToPattern(join(require.resolve('@tutorialkit/astro'), '..'))}/default/**/*.astro`,
28-
]).map((filePath) => {
29-
return () => fs.readFile(filePath, { encoding: 'utf8' });
30-
}),
31-
},
32-
transformers: [transformerDirectives()],
33-
presets: [
34-
presetUno({
35-
dark: {
36-
dark: '[data-theme="dark"]',
37-
},
38-
}),
39-
presetIcons({
40-
collections: {
41-
...customIconCollection,
42-
},
43-
}),
44-
],
4+
// add your UnoCSS config here: https://unocss.dev/guide/config-file
455
});

‎docs/tutorialkit.dev/package.json

-2
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,12 @@
2121
"@astrojs/check": "^0.7.0",
2222
"@astrojs/react": "^3.6.0",
2323
"@astrojs/starlight": "^0.23.4",
24-
"@iconify-json/ph": "^1.1.13",
2524
"@tutorialkit/astro": "workspace:*",
2625
"@tutorialkit/theme": "workspace:*",
2726
"@types/gtag.js": "^0.0.20",
2827
"@types/react": "^18.3.3",
2928
"@types/react-dom": "^18.3.0",
3029
"astro": "^4.12.0",
31-
"fast-glob": "^3.3.2",
3230
"sass": "^1.77.6",
3331
"sharp": "^0.32.6",
3432
"starlight-links-validator": "^0.9.0",

‎docs/tutorialkit.dev/src/content/docs/reference/react-components.mdx

+5-20
Original file line numberDiff line numberDiff line change
@@ -32,43 +32,28 @@ These components use TutorialKit's design system which is based on an atomic CSS
3232
<PackageManagerTabs>
3333
<Fragment slot="npm">
3434
```shell
35-
npm install @tutorialkit/components-react @tutorialkit/theme unocss @iconify-json/ph fast-glob
35+
npm install @tutorialkit/components-react @tutorialkit/theme
3636
```
3737
</Fragment>
3838
<Fragment slot="pnpm">
3939
```shell
40-
pnpm install @tutorialkit/components-react @tutorialkit/theme unocss @iconify-json/ph fast-glob
40+
pnpm install @tutorialkit/components-react @tutorialkit/theme
4141
```
4242
</Fragment>
4343
<Fragment slot="yarn">
4444
```shell
45-
yarn add @tutorialkit/components-react @tutorialkit/theme unocss @iconify-json/ph fast-glob
45+
yarn add @tutorialkit/components-react @tutorialkit/theme
4646
```
4747
</Fragment>
4848
</PackageManagerTabs>
4949

5050
To setup UnoCSS with TutorialKit's components, you need to create a `uno.config.ts`:
5151

5252
```ts title=uno.config.ts
53-
import { theme, rules, shortcuts } from '@tutorialkit/theme';
54-
import { convertPathToPattern, globSync } from 'fast-glob';
55-
import fs from 'node:fs/promises';
56-
import { join } from 'path';
57-
import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
53+
import { defineConfig } from '@tutorialkit/theme';
5854

5955
export default defineConfig({
60-
theme,
61-
rules,
62-
shortcuts,
63-
content: {
64-
inline: globSync(
65-
`${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
66-
).map((filePath) => {
67-
return () => fs.readFile(filePath, { encoding: 'utf8' });
68-
}),
69-
},
70-
transformers: [transformerDirectives()],
71-
presets: [presetUno(), presetIcons()],
56+
// add your UnoCSS config here: https://unocss.dev/guide/config-file
7257
});
7358
```
7459

‎docs/tutorialkit.dev/uno.config.ts

+2-17
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,5 @@
1-
import { theme, rules, shortcuts } from '@tutorialkit/theme';
2-
import { convertPathToPattern, globSync } from 'fast-glob';
3-
import fs from 'node:fs/promises';
4-
import { join } from 'path';
5-
import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
1+
import { defineConfig } from '@tutorialkit/theme';
62

73
export default defineConfig({
8-
theme,
9-
rules,
10-
shortcuts,
11-
content: {
12-
inline: globSync(
13-
`${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
14-
).map((filePath) => {
15-
return () => fs.readFile(filePath, { encoding: 'utf8' });
16-
}),
17-
},
18-
transformers: [transformerDirectives()],
19-
presets: [presetUno(), presetIcons()],
4+
// add your UnoCSS config here: https://unocss.dev/guide/config-file
205
});

‎e2e/uno.config.ts

+2-44
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,5 @@
1-
import fs from 'node:fs/promises';
2-
import { basename, dirname, join } from 'node:path';
3-
import { globSync, convertPathToPattern } from 'fast-glob';
4-
import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
5-
import { rules, shortcuts, theme } from '@tutorialkit/theme';
6-
7-
const iconPaths = globSync('./icons/languages/*.svg');
8-
9-
const customIconCollection = iconPaths.reduce(
10-
(acc, iconPath) => {
11-
const collectionName = basename(dirname(iconPath));
12-
const [iconName] = basename(iconPath).split('.');
13-
14-
acc[collectionName] ??= {};
15-
acc[collectionName][iconName] = async () => fs.readFile(iconPath, 'utf8');
16-
17-
return acc;
18-
},
19-
{} as Record<string, Record<string, () => Promise<string>>>,
20-
);
1+
import { defineConfig } from '@tutorialkit/theme';
212

223
export default defineConfig({
23-
rules,
24-
shortcuts,
25-
theme,
26-
content: {
27-
inline: globSync([
28-
`${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..')).replace('\\@', '/@')}/**/*.js`,
29-
`${convertPathToPattern(join(require.resolve('@tutorialkit/astro'), '..')).replace('\\@', '/@')}/default/**/*.astro`,
30-
]).map((filePath) => {
31-
return () => fs.readFile(filePath, { encoding: 'utf8' });
32-
}),
33-
},
34-
transformers: [transformerDirectives()],
35-
presets: [
36-
presetUno({
37-
dark: {
38-
dark: '[data-theme="dark"]',
39-
},
40-
}),
41-
presetIcons({
42-
collections: {
43-
...customIconCollection,
44-
},
45-
}),
46-
],
4+
// add your UnoCSS config here: https://unocss.dev/guide/config-file
475
});

‎packages/astro/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"./default-theme.css": "./dist/default/styles/variables.css",
2020
"./default/pages/index.astro": "./dist/default/pages/index.astro",
2121
"./default/pages/[...slug].astro": "./dist/default/pages/[...slug].astro",
22-
"./default/components/TopBar.astro": "./dist/default/components/TopBar.astro"
22+
"./default/components/TopBar.astro": "./dist/default/components/TopBar.astro",
23+
"./package.json": "./package.json"
2324
},
2425
"files": [
2526
"dist"
@@ -41,6 +42,7 @@
4142
"@tutorialkit/theme": "workspace:*",
4243
"@tutorialkit/types": "workspace:*",
4344
"@types/react": "^18.3.3",
45+
"@unocss/reset": "^0.62.2",
4446
"@webcontainer/api": "1.2.0",
4547
"astro": "^4.12.0",
4648
"astro-expressive-code": "^0.35.3",

‎packages/astro/src/index.ts

+1-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { rules, shortcuts, theme } from '@tutorialkit/theme';
21
import type { AstroConfig, AstroIntegration } from 'astro';
32
import { fileURLToPath } from 'node:url';
43
import { extraIntegrations } from './integrations.js';
@@ -9,12 +8,6 @@ import { tutorialkitStore } from './vite-plugins/store.js';
98
import { overrideComponents, type OverrideComponentsOptions } from './vite-plugins/override-components.js';
109
import { WebContainerFiles } from './webcontainer-files/index.js';
1110

12-
export const unoCSSConfig = {
13-
theme,
14-
rules,
15-
shortcuts,
16-
};
17-
1811
export interface Options {
1912
/**
2013
* Whether or not default routes are injected.
@@ -133,7 +126,7 @@ export default function createPlugin({
133126

134127
// inject the additional integrations right after ours
135128
const selfIndex = config.integrations.findIndex((integration) => integration.name === '@tutorialkit/astro');
136-
config.integrations.splice(selfIndex + 1, 0, ...extraIntegrations());
129+
config.integrations.splice(selfIndex + 1, 0, ...extraIntegrations({ root: fileURLToPath(config.root) }));
137130
},
138131
'astro:config:done'({ config }) {
139132
_config = config;

‎packages/astro/src/integrations.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
import { createRequire } from 'node:module';
12
import mdx from '@astrojs/mdx';
23
import react from '@astrojs/react';
34
import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections';
45
import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers';
56
import expressiveCode from 'astro-expressive-code';
67
import UnoCSS from 'unocss/astro';
8+
import { getInlineContentForPackage } from '@tutorialkit/theme';
79

8-
export function extraIntegrations() {
10+
export function extraIntegrations({ root }: { root: string }) {
911
return [
1012
react(),
1113
expressiveCode({
@@ -47,7 +49,14 @@ export function extraIntegrations() {
4749
mdx(),
4850
UnoCSS({
4951
configDeps: ['./theme.ts'],
50-
injectReset: true,
52+
injectReset: createRequire(root).resolve('@unocss/reset/tailwind.css'),
53+
content: {
54+
inline: getInlineContentForPackage({
55+
name: '@tutorialkit/astro',
56+
pattern: '/dist/default/**/*.astro',
57+
root,
58+
}),
59+
},
5160
}),
5261
];
5362
}

‎packages/cli/src/commands/eject/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const REQUIRED_DEPENDENCIES = [
2525
'@nanostores/react',
2626
'kleur',
2727
'@stackblitz/sdk',
28+
'fast-glob',
2829
];
2930

3031
export function ejectRoutes(flags: Arguments) {

‎packages/components/react/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@
4343
"types": "./dist/core/Terminal/index.d.ts",
4444
"default": "./dist/core/Terminal/index.js"
4545
}
46-
}
46+
},
47+
"./package.json": "./package.json"
4748
},
4849
"files": [
4950
"dist"

‎packages/components/react/src/core/CodeMirrorEditor/cm-theme.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
22
import { Compartment, type Extension } from '@codemirror/state';
33
import { EditorView } from '@codemirror/view';
4-
import { transitionTheme } from '@tutorialkit/theme';
4+
import { transitionTheme } from '@tutorialkit/theme/transition-theme';
55
import '../../styles/cm.css';
66
import type { Theme } from '../types.js';
77
import type { EditorSettings } from './index.js';

‎packages/template/package.json

+2-6
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,13 @@
1818
"devDependencies": {
1919
"@astrojs/check": "^0.7.0",
2020
"@astrojs/react": "^3.6.0",
21-
"@iconify-json/ph": "^1.1.13",
22-
"@iconify-json/svg-spinners": "^1.1.2",
2321
"@tutorialkit/astro": "workspace:*",
22+
"@tutorialkit/theme": "workspace:*",
2423
"@tutorialkit/types": "workspace:*",
2524
"@types/node": "^20.14.6",
2625
"@types/react": "^18.3.3",
27-
"@unocss/reset": "^0.59.4",
2826
"astro": "^4.12.0",
29-
"fast-glob": "^3.3.2",
3027
"prettier-plugin-astro": "^0.14.1",
31-
"typescript": "^5.4.5",
32-
"unocss": "^0.59.4"
28+
"typescript": "^5.4.5"
3329
}
3430
}

‎packages/template/uno.config.ts

+2-42
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,5 @@
1-
import { unoCSSConfig } from '@tutorialkit/astro';
2-
import { globSync, convertPathToPattern } from 'fast-glob';
3-
import fs from 'node:fs/promises';
4-
import { basename, dirname, join } from 'node:path';
5-
import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
6-
7-
const iconPaths = globSync('./icons/languages/*.svg');
8-
9-
const customIconCollection = iconPaths.reduce(
10-
(acc, iconPath) => {
11-
const collectionName = basename(dirname(iconPath));
12-
const [iconName] = basename(iconPath).split('.');
13-
14-
acc[collectionName] ??= {};
15-
acc[collectionName][iconName] = async () => fs.readFile(iconPath, 'utf8');
16-
17-
return acc;
18-
},
19-
{} as Record<string, Record<string, () => Promise<string>>>,
20-
);
1+
import { defineConfig } from '@tutorialkit/theme';
212

223
export default defineConfig({
23-
...unoCSSConfig,
24-
content: {
25-
inline: globSync([
26-
`${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..')).replace('\\@', '/@')}/**/*.js`,
27-
`${convertPathToPattern(join(require.resolve('@tutorialkit/astro'), '..')).replace('\\@', '/@')}/default/**/*.astro`,
28-
]).map((filePath) => {
29-
return () => fs.readFile(filePath, { encoding: 'utf8' });
30-
}),
31-
},
32-
transformers: [transformerDirectives()],
33-
presets: [
34-
presetUno({
35-
dark: {
36-
dark: '[data-theme="dark"]',
37-
},
38-
}),
39-
presetIcons({
40-
collections: {
41-
...customIconCollection,
42-
},
43-
}),
44-
],
4+
// add your UnoCSS config here: https://unocss.dev/guide/config-file
455
});

0 commit comments

Comments
 (0)