feat!: simplify UnoCSS integration

[AriPerkkio]

• Mentioned on Roadmap to 1.0 #144
• Fixes Vite CJS build warning caused by import of unoCSSConfig from @tutorialkit/astro #244
• Testing on feat: simplify uno css config AriPerkkio/tutorial-vite-plugin#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 #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]

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 😃

[Nemikolh]

Wooow, impressive work! This looks insanely good. 😍

Good job 😃

[Nemikolh]

Oh I'm curious: why is the root needed? Is it because @unocss/reset is not a dependency of @tutorialkit/astro?

What about we add it as a dependency?

Or we could also keep the true value.

[AriPerkkio]

Is it because @unocss/reset is not a dependency of @tutorialkit/astro?

It is a dependency of @tutorialkit/astro.

When injectReset: true is used I'm seeing following error:

[Nemikolh]

Oh that is strange, could that be a bug in the unocss astro integration?

[AriPerkkio]

This is also mentioned on UnoCSS:

• Astro: Failed to load url @unocss/reset/tailwind.css unocss/unocss#2342 (comment)

Now that we don't require end-users (or template) to add @unocss/reset as their dependency, it's likely causing a hoisting issue here, like mentioned on the issue. Using require.resolve solves this.

[Nemikolh]

Gotcha, thanks for the clarification!

[AriPerkkio]

/pkg-pr-new

[AriPerkkio]

Changes of this PR are now deployed and running at AriPerkkio/tutorial-vite-plugin#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