postcss-active-view-transition-type/index.js at main · vtbag/postcss-active-view-transition-type · GitHub

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
/**
 * @type {import('postcss').PluginCreator}
 */

// mode: 'in-place' | 'append'
module.exports = (opts = { mode: "in-place" }) => {
  const { mode = "in-place" } = opts;

  let map;

  const rewrite = (selector) => {
    [...selector.matchAll(/:active-view-transition-type\(([^)]*)\)/g)].forEach(
      ([match, types]) => {
        selector = selector.replace(
          match,
          `${mode === "append" ? "/*vtbag*/" : ""}:root:where(${types
            .split(",")
            .map((type) => `.vtbag-vtt-${type.trim()}`)
            .join(", ")})`
        );
      }
    );

    [...selector.matchAll(/:active-view-transition/g)].forEach(([match]) => {
      selector = selector.replace(
        match,
        `${mode === "append" ? "/*vtbag*/" : ""}:root:where(.vtbag-vtt-0)`
      );
    });
    return selector;
  };

  return {
    postcssPlugin: "postcss-active-view-transition-type",
    Once(root) {
      map = root.toString().includes("/*vtbag*/:root:where(.vtbag-vtt-")
        ? null
        : new Map();
    },
    Rule(rule) {
      if (map) {
        const parentType = rule.parent.type;
        if (
          (parentType === "root" || parentType === "atrule") &&
          rule.toString().includes(":active-view-transition")
        )
          mode === "append" &&
            map.set(rule.toString(), { rule, clone: rule.clone() });

        rule.selectors = rule.selectors.map(rewrite);
      }
    },
    OnceExit() {
      map?.forEach((data) => data.rule.before(data.clone));
      map = undefined;
    },
  };
};

module.exports.postcss = true;