feat!: simplify UnoCSS integration

[AriPerkkio]

• Mentioned on https://github.com/stackblitz/tutorialkit/issues/144
• Fixes https://github.com/stackblitz/tutorialkit/issues/244
• Testing on https://github.com/AriPerkkio/tutorial-vite-plugin/pull/21

Moves all configuration from uno.config.ts behind @tutorialkit/theme and @tutorialkit/astro packages. Users are no-longer needed to have complex uno.config.ts files in their projects. In cases like https://github.com/stackblitz/tutorialkit/pull/184 we no longer need to instruct users to modify their uno.config.ts - we can actually apply these in @tutorialkit packages and just release them.

Adds a custom defineConfig to @tutorialkit/theme, that can be used to configure TutorialKit theme and add additional UnoCSS configurations:

// uno.config.ts
import { defineConfig } from "@tutorialkit/theme";

export default defineConfig({
 // add your custom UnoCSS config here. See https://unocss.dev/guide/config-file
});

UnoCSS VS Code extension still works as expected:

Migration guide for projects:

In your package.json:

  "dependencies": {
    "@tutorialkit/components-react": "0.1.5",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "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": "0.1.5",
+   "@tutorialkit/theme": "0.1.5",
    "@tutorialkit/types": "0.1.5",
    "@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"
  }

In your uno.config.ts:

+ import { defineConfig } from '@tutorialkit/theme';
- 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';

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

- 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,
-       },
-     }),
-   ],
- });

BREAKING CHANGES:

• @tutorialkit/astro package no longer exports unoCSSConfig. Use defineConfig from @tutorialkit/theme instead.
• @tutorialkit/theme package no longer exports rules, shortcuts and theme.
• @tutorialkit/theme package exports transitionTheme from new entrypoint: @tutorialkit/theme/transition-theme.

[stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[AriPerkkio]

@Nemikolh what do you think about adding https://pkg.pr.new to TutorialKit? Verifying changes like this would be really great if I could use real published packages. Relying on linked (file:// or link:// protocol on package.json) doesn't provide good confidence. Package managers and Node resolving is weird.

[Nemikolh]

Oh that would be really cool! I like a lot that idea :smiley:

[AriPerkkio]

/pkg-pr-new

⚡️ Your npm packages are published. @tutorialkit/astro: npm i https://pkg.pr.new/@tutorialkit/astro@967975b @tutorialkit/components-react: npm i https://pkg.pr.new/@tutorialkit/components-react@967975b @tutorialkit/runtime: npm i https://pkg.pr.new/@tutorialkit/runtime@967975b @tutorialkit/theme: npm i https://pkg.pr.new/@tutorialkit/theme@967975b @tutorialkit/types: npm i https://pkg.pr.new/@tutorialkit/types@967975b

[AriPerkkio]

/pkg-pr-new

[AriPerkkio]

Changes of this PR are now deployed and running at https://github.com/AriPerkkio/tutorial-vite-plugin/pull/21.

@Nemikolh I'm trying to think of all kinds of scenarios that should be tested there, mainly focusing on trying to see that user's own uno.config.ts changes work. Does anything important that should be tested come to your mind?

[Nemikolh]

@AriPerkkio Not that I can think of! We can always fix them later once we encounter them. Let's move forward with this PR