1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import { merge } from "../core/utils/object.ts";import { read } from "../core/utils/read.ts";import {  createGenerator,  MagicString,  presetUno,  resetUrl,  transformerDirectives,  transformerVariantGroup,} from "../deps/unocss.ts";
import type Site from "../core/site.ts";import type {  SourceCodeTransformer,  UnocssPluginContext,  UserConfig,} from "../deps/unocss.ts";
export interface Options {  /**   * Configurations for UnoCSS.   * @see https://unocss.dev/guide/config-file   * @default   * {   *  presets: [presetUno()]   * }   */  options?: UserConfig;
  /**   * Set the css filename for all generated styles,   * Set to `false` to insert a <style> tag per page.   * @default "unocss.css"   */  cssFile?: false | string;
  /**   * Process CSS files using UnoCSS transformers.   * @default   * [   *  transformerVariantGroup(),   *  transformerDirectives()   * ]   */  transformers?: SourceCodeTransformer[];
  /**   * Supported CSS reset options.   * @see https://github.com/unocss/unocss/tree/main/packages/reset   * @default false   */  reset?: false | "tailwind" | "tailwind-compat" | "eric-meyer";}
export const defaults: Options = {  options: {    presets: [presetUno()],  },  cssFile: "/unocss.css",  transformers: [    transformerVariantGroup(),    transformerDirectives(),  ],  reset: false,};
export default function (userOptions?: Options) {  const options = merge(defaults, userOptions);
  return (site: Site) => {    const uno = createGenerator(options.options);    const { transformers, cssFile, reset } = options;
    if (transformers.length > 0) {      site.loadAssets([".css"]);      site.process([".css"], async (files) => {        for (const file of files) {          if (file.content) {            const code = new MagicString(file.content.toString());            for await (const { transform } of transformers) {              await transform(                code,                file.src.path,                { uno } as unknown as UnocssPluginContext,              );            }            file.content = code.toString();          }        }      });    }
    if (cssFile === false) {      // Insert a <style> tag for each page      site.process([".html"], async (pages) => {        const resetCss = await getResetCss(reset);
        await Promise.all(pages.map(async (page) => {          const document = page.document!;          const result = await uno.generate(            document.documentElement?.innerHTML ?? "",          );          const css = resetCss ? `${resetCss}\n${result.css}` : result.css;
          if (css) {            const style = document.createElement("style");            style.innerText = css;            page.document?.head?.appendChild(style);          }        }));      });      return;    }
    // Generate the stylesheets for all pages    site.process([".html"], async (pages) => {      const classes = new Set<string>();
      await Promise.all(        pages.map(async (page) =>          await uno.generate(            page.document?.documentElement?.innerHTML ?? "",          )            .then((res) => res.matched)            .then((matched) => matched.forEach((match) => classes.add(match)))        ),      );
      // Create & merge stylesheets for all pages      const resetCss = await getResetCss(reset);      const result = await uno.generate(classes);      const css = resetCss ? `${resetCss}\n${result.css}` : result.css;
      // Output the CSS file      const output = await site.getOrCreatePage(cssFile);      if (output.content) {        output.content += `\n${css}`;      } else {        output.content = css;      }    });  };}
/** * TODO: Replace with CSS Modules Import * @remarks Deno does not currently support CSS Modules. * @see https://github.com/denoland/deno/issues/11961 */async function getResetCss(reset: Options["reset"]) {  return reset === false ? "" : await read(`${resetUrl}/${reset}.css`, false);}