stackblitz / tutorialkit

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API
https://tutorialkit.dev
MIT License
460 stars 43 forks source link

feat!: simplify UnoCSS integration #270

Closed AriPerkkio closed 2 months ago

AriPerkkio commented 2 months ago

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:

image

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:

stackblitz[bot] commented 2 months ago

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

AriPerkkio commented 2 months ago

@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 commented 2 months ago

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

AriPerkkio commented 2 months ago

/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 commented 2 months ago

/pkg-pr-new

AriPerkkio commented 2 months ago

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 commented 2 months ago

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