docs: only allow UnoCSS as the CSS engine (#1720)

Author: kermanx

docs/addons/write-an-addon.md

@@ -9,7 +9,7 @@ An addon can contribute to the following points:
 - Global styles (use with caution as it has more role than [themes](/themes/use))
 - Provide custom layouts or override the existing one
 - Provide custom components or override the existing one
-- Extend UnoCSS/Windi CSS configurations
+- Extend UnoCSS CSS configurations
 - Configure tools like Monaco and Prism
 
 ## Conventions

docs/custom/config-unocss.md

@@ -2,7 +2,7 @@
 
 <Environment type="node" />
 
-[UnoCSS](https://unocss.dev) is now the default CSS framework for Slidev since v0.42.0. UnoCSS is a fast atomic CSS engine that has full flexibility and extensibility.
+[UnoCSS](https://unocss.dev) is now the default CSS framework for Slidev since v0.42.0. UnoCSS is a fast atomic CSS engine that has full flexibility and extensibility. Most of the Tailwind CSS classes are supported **out-of-box**, and you can also extend it with your own configurations.
 
 By default, Slidev enables the following presets out-of-box:
 

docs/custom/config-windicss.md

@@ -27,7 +27,7 @@ console.log('Hello, World!')
 
 # Page 3
 
-You can directly use Windi CSS and Vue components to style and enrich your slides.
+You can directly use UnoCSS CSS and Vue components to style and enrich your slides.
 
 <div class="p-3">
   <Tweet id="20" />

docs/guide/syntax.md

@@ -13,7 +13,6 @@ import setupRoutes from '../setup/routes'
 import setups from '#slidev/setups/main'
 
 import '#slidev/styles'
-import 'shiki-magic-move/style.css'
 
 export default async function setupMain(app: App) {
   function setMaxHeight() {

packages/client/setup/main.ts

@@ -110,7 +110,7 @@ export function verifyConfig(
   if (themeHightlighter && config.highlighter !== themeHightlighter)
     warn(`Syntax highlighter "${config.highlighter}" does not supported by the theme`)
 
-  if (!['unocss', undefined].includes(config.css)) {
+  if (config.css !== 'unocss') {
     warn(`Unsupported Atomic CSS engine "${config.css}", fallback to UnoCSS`)
     config.css = 'unocss'
   }

packages/parser/src/config.ts

@@ -634,7 +634,7 @@ function printInfo(
   verifyConfig(options.data.config, options.data.themeMeta, v => console.warn(yellow(`  ! ${v}`)))
 
   console.log(dim('  theme       ') + (options.theme ? green(options.theme) : gray('none')))
-  console.log(dim('  css engine  ') + (options.data.config.css ? blue(options.data.config.css) : gray('none')))
+  console.log(dim('  css engine  ') + blue('unocss'))
   console.log(dim('  entry       ') + dim(path.dirname(options.entry) + path.sep) + path.basename(options.entry))
 
   if (port) {

packages/slidev/node/cli.ts

@@ -43,18 +43,17 @@ export const templateStyle: VirtualModuleTemplate = {
       imports.push(
         `import "${await resolveImportUrl('@shikijs/vitepress-twoslash/style.css')}"`,
         `import "${resolveUrlOfClient('styles/shiki-twoslash.css')}"`,
+        `import "${await resolveImportUrl('shiki-magic-move/style.css')}"`,
       )
     }
 
-    if (data.config.css === 'unocss') {
-      imports.unshift(
-        `import "${await resolveImportUrl('@unocss/reset/tailwind.css')}"`,
-        'import "uno:preflights.css"',
-        'import "uno:typography.css"',
-        'import "uno:shortcuts.css"',
-      )
-      imports.push('import "uno.css"')
-    }
+    imports.unshift(
+      `import "${await resolveImportUrl('@unocss/reset/tailwind.css')}"`,
+      'import "uno:preflights.css"',
+      'import "uno:typography.css"',
+      'import "uno:shortcuts.css"',
+    )
+    imports.push('import "uno.css"')
 
     return imports.join('\n')
   },

packages/slidev/node/virtual/styles.ts

@@ -109,15 +109,13 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
               exclude: EXCLUDE_LOCAL,
               include: INCLUDE_LOCAL,
             },
-        css: options.data.config.css === 'unocss'
-          ? {
-              postcss: {
-                plugins: [
-                  await import('postcss-nested').then(r => (r.default || r)()) as any,
-                ],
-              },
-            }
-          : {},
+        css: {
+          postcss: {
+            plugins: [
+              await import('postcss-nested').then(r => (r.default || r)()) as any,
+            ],
+          },
+        },
         server: {
           fs: {
             strict: true,

packages/slidev/node/vite/extendConfig.ts

@@ -12,7 +12,7 @@ import type { ResolvedSlidevOptions, SlidevPluginOptions, SlidevServerOptions }
 import { loadDrawings, writeDrawings } from '../integrations/drawings'
 import { createConfigPlugin } from './extendConfig'
 import { createSlidesLoader } from './loaders'
-
+import { createUnocssPlugin } from './unocss'
 import { createMarkdownPlugin } from './markdown'
 import { createVueCompilerFlagsPlugin } from './compilerFlagsVue'
 import { createMonacoTypesLoader } from './monacoTypes'
@@ -120,6 +120,7 @@ export async function ViteSlidevPlugin(
     createConfigPlugin(options),
     createMonacoTypesLoader(options),
     createVueCompilerFlagsPlugin(options),
+    createUnocssPlugin(options, pluginOptions),
 
     publicRoots.length
       ? import('vite-plugin-static-copy').then(r => r.viteStaticCopy({
@@ -136,10 +137,6 @@ export async function ViteSlidevPlugin(
         build: true,
       }))
       : null,
-
-    config.css === 'none'
-      ? null
-      : import('./unocss').then(r => r.createUnocssPlugin(options, pluginOptions)),
   ]
 
   return (await Promise.all(plugins))