Skip to content

Commit

Permalink
feat!: simplify UnoCSS integration (#270)
Browse files Browse the repository at this point in the history
  • Loading branch information
AriPerkkio authored Aug 27, 2024
1 parent d6d19c4 commit 8d49ef8
Show file tree
Hide file tree
Showing 18 changed files with 321 additions and 330 deletions.
8 changes: 2 additions & 6 deletions docs/demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,11 @@
"devDependencies": {
"@astrojs/check": "^0.7.0",
"@astrojs/react": "^3.6.0",
"@iconify-json/ph": "^1.1.13",
"@iconify-json/svg-spinners": "^1.1.2",
"@tutorialkit/astro": "workspace:*",
"@tutorialkit/theme": "workspace:*",
"@tutorialkit/types": "workspace:*",
"@unocss/reset": "^0.59.4",
"astro": "^4.12.0",
"fast-glob": "^3.3.2",
"prettier-plugin-astro": "^0.14.1",
"typescript": "^5.4.5",
"unocss": "^0.59.4"
"typescript": "^5.4.5"
}
}
44 changes: 2 additions & 42 deletions docs/demo/uno.config.ts
Original file line number Diff line number Diff line change
@@ -1,45 +1,5 @@
import { unoCSSConfig } from '@tutorialkit/astro';
import { globSync, convertPathToPattern } from 'fast-glob';
import fs from 'node:fs/promises';
import { basename, dirname, join } from 'node:path';
import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';

const iconPaths = globSync('./icons/languages/*.svg');

const customIconCollection = iconPaths.reduce(
(acc, iconPath) => {
const collectionName = basename(dirname(iconPath));
const [iconName] = basename(iconPath).split('.');

acc[collectionName] ??= {};
acc[collectionName][iconName] = async () => fs.readFile(iconPath, 'utf8');

return acc;
},
{} as Record<string, Record<string, () => Promise<string>>>,
);
import { defineConfig } from '@tutorialkit/theme';

export default defineConfig({
...unoCSSConfig,
content: {
inline: globSync([
`${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
`${convertPathToPattern(join(require.resolve('@tutorialkit/astro'), '..'))}/default/**/*.astro`,
]).map((filePath) => {
return () => fs.readFile(filePath, { encoding: 'utf8' });
}),
},
transformers: [transformerDirectives()],
presets: [
presetUno({
dark: {
dark: '[data-theme="dark"]',
},
}),
presetIcons({
collections: {
...customIconCollection,
},
}),
],
// add your UnoCSS config here: https://unocss.dev/guide/config-file
});
2 changes: 0 additions & 2 deletions docs/tutorialkit.dev/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,12 @@
"@astrojs/check": "^0.7.0",
"@astrojs/react": "^3.6.0",
"@astrojs/starlight": "^0.23.4",
"@iconify-json/ph": "^1.1.13",
"@tutorialkit/astro": "workspace:*",
"@tutorialkit/theme": "workspace:*",
"@types/gtag.js": "^0.0.20",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"astro": "^4.12.0",
"fast-glob": "^3.3.2",
"sass": "^1.77.6",
"sharp": "^0.32.6",
"starlight-links-validator": "^0.9.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,43 +32,28 @@ These components use TutorialKit's design system which is based on an atomic CSS
<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install @tutorialkit/components-react @tutorialkit/theme unocss @iconify-json/ph fast-glob
npm install @tutorialkit/components-react @tutorialkit/theme
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm install @tutorialkit/components-react @tutorialkit/theme unocss @iconify-json/ph fast-glob
pnpm install @tutorialkit/components-react @tutorialkit/theme
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add @tutorialkit/components-react @tutorialkit/theme unocss @iconify-json/ph fast-glob
yarn add @tutorialkit/components-react @tutorialkit/theme
```
</Fragment>
</PackageManagerTabs>

To setup UnoCSS with TutorialKit's components, you need to create a `uno.config.ts`:
```ts title=uno.config.ts
import { theme, rules, shortcuts } from '@tutorialkit/theme';
import { convertPathToPattern, globSync } from 'fast-glob';
import fs from 'node:fs/promises';
import { join } from 'path';
import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
import { defineConfig } from '@tutorialkit/theme';
export default defineConfig({
theme,
rules,
shortcuts,
content: {
inline: globSync(
`${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
).map((filePath) => {
return () => fs.readFile(filePath, { encoding: 'utf8' });
}),
},
transformers: [transformerDirectives()],
presets: [presetUno(), presetIcons()],
// add your UnoCSS config here: https://unocss.dev/guide/config-file
});
```
Expand Down
19 changes: 2 additions & 17 deletions docs/tutorialkit.dev/uno.config.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,5 @@
import { theme, rules, shortcuts } from '@tutorialkit/theme';
import { convertPathToPattern, globSync } from 'fast-glob';
import fs from 'node:fs/promises';
import { join } from 'path';
import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
import { defineConfig } from '@tutorialkit/theme';

export default defineConfig({
theme,
rules,
shortcuts,
content: {
inline: globSync(
`${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
).map((filePath) => {
return () => fs.readFile(filePath, { encoding: 'utf8' });
}),
},
transformers: [transformerDirectives()],
presets: [presetUno(), presetIcons()],
// add your UnoCSS config here: https://unocss.dev/guide/config-file
});
46 changes: 2 additions & 44 deletions e2e/uno.config.ts
Original file line number Diff line number Diff line change
@@ -1,47 +1,5 @@
import fs from 'node:fs/promises';
import { basename, dirname, join } from 'node:path';
import { globSync, convertPathToPattern } from 'fast-glob';
import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
import { rules, shortcuts, theme } from '@tutorialkit/theme';

const iconPaths = globSync('./icons/languages/*.svg');

const customIconCollection = iconPaths.reduce(
(acc, iconPath) => {
const collectionName = basename(dirname(iconPath));
const [iconName] = basename(iconPath).split('.');

acc[collectionName] ??= {};
acc[collectionName][iconName] = async () => fs.readFile(iconPath, 'utf8');

return acc;
},
{} as Record<string, Record<string, () => Promise<string>>>,
);
import { defineConfig } from '@tutorialkit/theme';

export default defineConfig({
rules,
shortcuts,
theme,
content: {
inline: globSync([
`${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..')).replace('\\@', '/@')}/**/*.js`,
`${convertPathToPattern(join(require.resolve('@tutorialkit/astro'), '..')).replace('\\@', '/@')}/default/**/*.astro`,
]).map((filePath) => {
return () => fs.readFile(filePath, { encoding: 'utf8' });
}),
},
transformers: [transformerDirectives()],
presets: [
presetUno({
dark: {
dark: '[data-theme="dark"]',
},
}),
presetIcons({
collections: {
...customIconCollection,
},
}),
],
// add your UnoCSS config here: https://unocss.dev/guide/config-file
});
4 changes: 3 additions & 1 deletion packages/astro/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
"./default-theme.css": "./dist/default/styles/variables.css",
"./default/pages/index.astro": "./dist/default/pages/index.astro",
"./default/pages/[...slug].astro": "./dist/default/pages/[...slug].astro",
"./default/components/TopBar.astro": "./dist/default/components/TopBar.astro"
"./default/components/TopBar.astro": "./dist/default/components/TopBar.astro",
"./package.json": "./package.json"
},
"files": [
"dist"
Expand All @@ -41,6 +42,7 @@
"@tutorialkit/theme": "workspace:*",
"@tutorialkit/types": "workspace:*",
"@types/react": "^18.3.3",
"@unocss/reset": "^0.62.2",
"@webcontainer/api": "1.2.0",
"astro": "^4.12.0",
"astro-expressive-code": "^0.35.3",
Expand Down
9 changes: 1 addition & 8 deletions packages/astro/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { rules, shortcuts, theme } from '@tutorialkit/theme';
import type { AstroConfig, AstroIntegration } from 'astro';
import { fileURLToPath } from 'node:url';
import { extraIntegrations } from './integrations.js';
Expand All @@ -9,12 +8,6 @@ import { tutorialkitStore } from './vite-plugins/store.js';
import { overrideComponents, type OverrideComponentsOptions } from './vite-plugins/override-components.js';
import { WebContainerFiles } from './webcontainer-files/index.js';

export const unoCSSConfig = {
theme,
rules,
shortcuts,
};

export interface Options {
/**
* Whether or not default routes are injected.
Expand Down Expand Up @@ -133,7 +126,7 @@ export default function createPlugin({

// inject the additional integrations right after ours
const selfIndex = config.integrations.findIndex((integration) => integration.name === '@tutorialkit/astro');
config.integrations.splice(selfIndex + 1, 0, ...extraIntegrations());
config.integrations.splice(selfIndex + 1, 0, ...extraIntegrations({ root: fileURLToPath(config.root) }));
},
'astro:config:done'({ config }) {
_config = config;
Expand Down
13 changes: 11 additions & 2 deletions packages/astro/src/integrations.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { createRequire } from 'node:module';
import mdx from '@astrojs/mdx';
import react from '@astrojs/react';
import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections';
import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers';
import expressiveCode from 'astro-expressive-code';
import UnoCSS from 'unocss/astro';
import { getInlineContentForPackage } from '@tutorialkit/theme';

export function extraIntegrations() {
export function extraIntegrations({ root }: { root: string }) {
return [
react(),
expressiveCode({
Expand Down Expand Up @@ -47,7 +49,14 @@ export function extraIntegrations() {
mdx(),
UnoCSS({
configDeps: ['./theme.ts'],
injectReset: true,
injectReset: createRequire(root).resolve('@unocss/reset/tailwind.css'),
content: {
inline: getInlineContentForPackage({
name: '@tutorialkit/astro',
pattern: '/dist/default/**/*.astro',
root,
}),
},
}),
];
}
1 change: 1 addition & 0 deletions packages/cli/src/commands/eject/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const REQUIRED_DEPENDENCIES = [
'@nanostores/react',
'kleur',
'@stackblitz/sdk',
'fast-glob',
];

export function ejectRoutes(flags: Arguments) {
Expand Down
3 changes: 2 additions & 1 deletion packages/components/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
"types": "./dist/core/Terminal/index.d.ts",
"default": "./dist/core/Terminal/index.js"
}
}
},
"./package.json": "./package.json"
},
"files": [
"dist"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
import { Compartment, type Extension } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { transitionTheme } from '@tutorialkit/theme';
import { transitionTheme } from '@tutorialkit/theme/transition-theme';
import '../../styles/cm.css';
import type { Theme } from '../types.js';
import type { EditorSettings } from './index.js';
Expand Down
8 changes: 2 additions & 6 deletions packages/template/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,13 @@
"devDependencies": {
"@astrojs/check": "^0.7.0",
"@astrojs/react": "^3.6.0",
"@iconify-json/ph": "^1.1.13",
"@iconify-json/svg-spinners": "^1.1.2",
"@tutorialkit/astro": "workspace:*",
"@tutorialkit/theme": "workspace:*",
"@tutorialkit/types": "workspace:*",
"@types/node": "^20.14.6",
"@types/react": "^18.3.3",
"@unocss/reset": "^0.59.4",
"astro": "^4.12.0",
"fast-glob": "^3.3.2",
"prettier-plugin-astro": "^0.14.1",
"typescript": "^5.4.5",
"unocss": "^0.59.4"
"typescript": "^5.4.5"
}
}
44 changes: 2 additions & 42 deletions packages/template/uno.config.ts
Original file line number Diff line number Diff line change
@@ -1,45 +1,5 @@
import { unoCSSConfig } from '@tutorialkit/astro';
import { globSync, convertPathToPattern } from 'fast-glob';
import fs from 'node:fs/promises';
import { basename, dirname, join } from 'node:path';
import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';

const iconPaths = globSync('./icons/languages/*.svg');

const customIconCollection = iconPaths.reduce(
(acc, iconPath) => {
const collectionName = basename(dirname(iconPath));
const [iconName] = basename(iconPath).split('.');

acc[collectionName] ??= {};
acc[collectionName][iconName] = async () => fs.readFile(iconPath, 'utf8');

return acc;
},
{} as Record<string, Record<string, () => Promise<string>>>,
);
import { defineConfig } from '@tutorialkit/theme';

export default defineConfig({
...unoCSSConfig,
content: {
inline: globSync([
`${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..')).replace('\\@', '/@')}/**/*.js`,
`${convertPathToPattern(join(require.resolve('@tutorialkit/astro'), '..')).replace('\\@', '/@')}/default/**/*.astro`,
]).map((filePath) => {
return () => fs.readFile(filePath, { encoding: 'utf8' });
}),
},
transformers: [transformerDirectives()],
presets: [
presetUno({
dark: {
dark: '[data-theme="dark"]',
},
}),
presetIcons({
collections: {
...customIconCollection,
},
}),
],
// add your UnoCSS config here: https://unocss.dev/guide/config-file
});
Loading

0 comments on commit 8d49ef8

Please sign in to comment.