Skip to content

Commit 73a973e

Browse files
AriPerkkioAriPerkkio
committed
Revert "feat!: simplify UnoCSS integration (stackblitz#270)"
This reverts commit 8d49ef8.
1 parent dff1e92 commit 73a973e

File tree

18 files changed

+330
-321
lines changed

18 files changed

+330
-321
lines changed

‎docs/demo/package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,15 @@
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",
2123
"@tutorialkit/astro": "workspace:*",
22-
"@tutorialkit/theme": "workspace:*",
2324
"@tutorialkit/types": "workspace:*",
25+
"@unocss/reset": "^0.59.4",
2426
"astro": "^4.12.0",
27+
"fast-glob": "^3.3.2",
2528
"prettier-plugin-astro": "^0.14.1",
26-
"typescript": "^5.4.5"
29+
"typescript": "^5.4.5",
30+
"unocss": "^0.59.4"
2731
}
2832
}

‎docs/demo/uno.config.ts

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,45 @@
1-
import { defineConfig } from '@tutorialkit/theme';
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+
);
221

322
export default defineConfig({
4-
// add your UnoCSS config here: https://unocss.dev/guide/config-file
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+
],
545
});

‎docs/tutorialkit.dev/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,14 @@
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",
2425
"@tutorialkit/astro": "workspace:*",
2526
"@tutorialkit/theme": "workspace:*",
2627
"@types/gtag.js": "^0.0.20",
2728
"@types/react": "^18.3.3",
2829
"@types/react-dom": "^18.3.0",
2930
"astro": "^4.12.0",
31+
"fast-glob": "^3.3.2",
3032
"sass": "^1.77.6",
3133
"sharp": "^0.32.6",
3234
"starlight-links-validator": "^0.9.0",

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

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,28 +32,43 @@ 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
35+
npm install @tutorialkit/components-react @tutorialkit/theme unocss @iconify-json/ph fast-glob
3636
```
3737
</Fragment>
3838
<Fragment slot="pnpm">
3939
```shell
40-
pnpm install @tutorialkit/components-react @tutorialkit/theme
40+
pnpm install @tutorialkit/components-react @tutorialkit/theme unocss @iconify-json/ph fast-glob
4141
```
4242
</Fragment>
4343
<Fragment slot="yarn">
4444
```shell
45-
yarn add @tutorialkit/components-react @tutorialkit/theme
45+
yarn add @tutorialkit/components-react @tutorialkit/theme unocss @iconify-json/ph fast-glob
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 { defineConfig } from '@tutorialkit/theme';
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';
5458

5559
export default defineConfig({
56-
// add your UnoCSS config here: https://unocss.dev/guide/config-file
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()],
5772
});
5873
```
5974

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
1-
import { defineConfig } from '@tutorialkit/theme';
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';
26

37
export default defineConfig({
4-
// add your UnoCSS config here: https://unocss.dev/guide/config-file
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()],
520
});

‎e2e/uno.config.ts

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,47 @@
1-
import { defineConfig } from '@tutorialkit/theme';
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+
);
221

322
export default defineConfig({
4-
// add your UnoCSS config here: https://unocss.dev/guide/config-file
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+
],
547
});

‎packages/astro/package.json

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@
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",
23-
"./package.json": "./package.json"
22+
"./default/components/TopBar.astro": "./dist/default/components/TopBar.astro"
2423
},
2524
"files": [
2625
"dist"
@@ -42,7 +41,6 @@
4241
"@tutorialkit/theme": "workspace:*",
4342
"@tutorialkit/types": "workspace:*",
4443
"@types/react": "^18.3.3",
45-
"@unocss/reset": "^0.62.2",
4644
"@webcontainer/api": "1.2.0",
4745
"astro": "^4.12.0",
4846
"astro-expressive-code": "^0.35.3",

‎packages/astro/src/index.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { rules, shortcuts, theme } from '@tutorialkit/theme';
12
import type { AstroConfig, AstroIntegration } from 'astro';
23
import { fileURLToPath } from 'node:url';
34
import { extraIntegrations } from './integrations.js';
@@ -8,6 +9,12 @@ import { tutorialkitStore } from './vite-plugins/store.js';
89
import { overrideComponents, type OverrideComponentsOptions } from './vite-plugins/override-components.js';
910
import { WebContainerFiles } from './webcontainer-files/index.js';
1011

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

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

‎packages/astro/src/integrations.ts

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import { createRequire } from 'node:module';
21
import mdx from '@astrojs/mdx';
32
import react from '@astrojs/react';
43
import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections';
54
import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers';
65
import expressiveCode from 'astro-expressive-code';
76
import UnoCSS from 'unocss/astro';
8-
import { getInlineContentForPackage } from '@tutorialkit/theme';
97

10-
export function extraIntegrations({ root }: { root: string }) {
8+
export function extraIntegrations() {
119
return [
1210
react(),
1311
expressiveCode({
@@ -49,14 +47,7 @@ export function extraIntegrations({ root }: { root: string }) {
4947
mdx(),
5048
UnoCSS({
5149
configDeps: ['./theme.ts'],
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-
},
50+
injectReset: true,
6051
}),
6152
];
6253
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ const REQUIRED_DEPENDENCIES = [
2525
'@nanostores/react',
2626
'kleur',
2727
'@stackblitz/sdk',
28-
'fast-glob',
2928
];
3029

3130
export function ejectRoutes(flags: Arguments) {

‎packages/components/react/package.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@
4343
"types": "./dist/core/Terminal/index.d.ts",
4444
"default": "./dist/core/Terminal/index.js"
4545
}
46-
},
47-
"./package.json": "./package.json"
46+
}
4847
},
4948
"files": [
5049
"dist"

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

Lines changed: 1 addition & 1 deletion
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/transition-theme';
4+
import { transitionTheme } from '@tutorialkit/theme';
55
import '../../styles/cm.css';
66
import type { Theme } from '../types.js';
77
import type { EditorSettings } from './index.js';

‎packages/template/package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,17 @@
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",
2123
"@tutorialkit/astro": "workspace:*",
22-
"@tutorialkit/theme": "workspace:*",
2324
"@tutorialkit/types": "workspace:*",
2425
"@types/node": "^20.14.6",
2526
"@types/react": "^18.3.3",
27+
"@unocss/reset": "^0.59.4",
2628
"astro": "^4.12.0",
29+
"fast-glob": "^3.3.2",
2730
"prettier-plugin-astro": "^0.14.1",
28-
"typescript": "^5.4.5"
31+
"typescript": "^5.4.5",
32+
"unocss": "^0.59.4"
2933
}
3034
}

‎packages/template/uno.config.ts

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,45 @@
1-
import { defineConfig } from '@tutorialkit/theme';
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+
);
221

322
export default defineConfig({
4-
// add your UnoCSS config here: https://unocss.dev/guide/config-file
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+
],
545
});

0 commit comments

Comments
 (0)