slidevjs/themes

Using UnoCSS instead of WindiCSS

openscript opened this issue · 8 comments

openscript commented

Themes initialized with npm init slidev-theme come with a setup/windicss.ts. As slidev uses now UnoCSS by default I have the following questions:

  1. How should a setup/unocss.ts be written?
  2. Can I remove setup/windicss.ts?
  3. Should I send PRs for replacing windicss with unocss inside this repo?
antfu commented

I think we might not need to do anything about it. The themes did not set windicss explicitly, we could keep the setup/windicss.ts for backward compatibility. When users uses UnoCSS, the file won't be picked up. And setup/unocss.ts is not required as it's UnoCSS's scan is done in an automatic way.

antfu commented

We may remove the setup/windicss.ts in the theme template tho, that's a good point. PR welcome :)

openscript commented

Thank you for the quick response! Maybe we should also get rid of the windicss dependencies and let the users install it, if they need it?

yarn why windicss
yarn why v1.22.19
[1/4] Why do we have the module "windicss"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "windicss@3.5.6"
info Reasons this module exists
   - "@slidev#cli" depends on it
   - Hoisted from "@slidev#cli#windicss"
   - Hoisted from "@slidev#cli#@slidev#client#windicss"
   - Hoisted from "@slidev#cli#@windicss#config#windicss"
   - Hoisted from "@slidev#cli#vite-plugin-windicss#windicss"
   - Hoisted from "@slidev#cli#vite-plugin-windicss#@windicss#plugin-utils#windicss"
info Disk size without dependencies: "2.73MB"
info Disk size with unique dependencies: "2.73MB"
info Disk size with transitive dependencies: "2.73MB"
info Number of shared dependencies: 0
antfu commented

Slidev will keep supporting windicss in the predictable future, until the syntax is too left behind. Later we might make it a optional peer deps, but currently would keep as-is.

openscript commented

I've created a unocss.ts with:

import { defineUnoSetup } from '@slidev/types'

export default defineUnoSetup(() => ({
  shortcuts: {
    'bg-main': 'bg-white text-[#181818] dark:bg-[#121212] dark:text-[#ddd]',
  },
}))

This will result in:

/workspaces/slidev-theme/node_modules/@slidev/cli/dist/chunk-KKGXM3XL.js:12
      a[key] = [...a[key], ...b[key]];
                               ^

TypeError: b[key] is not iterable
    at /workspaces/slidev-theme/node_modules/@slidev/cli/dist/chunk-KKGXM3XL.js:12:32
    at Array.forEach (<anonymous>)
    at deepMerge (/workspaces/slidev-theme/node_modules/@slidev/cli/dist/chunk-KKGXM3XL.js:8:18)
    at loadSetups (/workspaces/slidev-theme/node_modules/@slidev/cli/dist/chunk-KKGXM3XL.js:26:27)
    at async Object.createUnocssPlugin (/workspaces/slidev-theme/node_modules/@slidev/cli/dist/unocss-2DU67QXG.js:31:12)
    at async Promise.all (index 14)
    at async ViteSlidevPlugin (/workspaces/slidev-theme/node_modules/@slidev/cli/dist/chunk-SEZW5DVB.js:1694:11)
    at async createServer (/workspaces/slidev-theme/node_modules/@slidev/cli/dist/chunk-EFLHY5RE.js:2509:11)
    at async initServer (/workspaces/slidev-theme/node_modules/@slidev/cli/dist/cli.js:120:16)

Node.js v20.5.0

How to setup unocss within a slidev theme?

antfu commented

Can you share a minimal reproduction? Thanks

openscript commented

Yes sure:

  1. Clone https://github.com/openscript-ch/slidev-theme/
  2. Open in devcontainer (optional)
  3. Install dependencies with yarn install
  4. Run yarn dev
openscript commented

I'm closing this in favor of slidevjs/slidev#1128