@vkontakte/vkui 4.29.1 → 4.32.0

package/tasks/postcss-restructure-variable.js

@@ -0,0 +1,226 @@
+const { Rule } = require("postcss");
+
+function setEquals(a, b) {
+  return a.size === b.size && [...a].every((value) => b.has(value));
+}
+class Value {
+  constructor(prop, value) {
+    this.prop = prop;
+    this.value = value;
+    this.selectors = new Set();
+  }
+  addSelector(selector) {
+    this.selectors.add(selector.toString());
+  }
+  removeSelector(selector) {
+    return this.selectors.delete(selector.toString());
+  }
+  getSelectors() {
+    return this.selectors;
+  }
+  getProp() {
+    return this.prop;
+  }
+  toString() {
+    return this.value;
+  }
+}
+
+class Prop {
+  constructor(name) {
+    this.name = name;
+    this.values = new Map();
+  }
+  addValue(value) {
+    this.values.set(value.toString(), value);
+  }
+  getValue(value) {
+    return this.values.get(value);
+  }
+  toString() {
+    return this.name;
+  }
+}
+
+class Selector {
+  constructor(name) {
+    this.name = name;
+    this.props = new Map();
+  }
+  addProp(prop, value) {
+    const oldValue = this.props.get(prop);
+    if (oldValue) {
+      oldValue.removeSelector(this);
+    }
+    this.props.set(prop, value);
+  }
+  compare(b) {
+    if (this.name > b.name) {
+      return 1;
+    }
+    if (this.name < b.name) {
+      return -1;
+    }
+    return 0;
+  }
+  toString() {
+    return this.name;
+  }
+}
+
+class Graph {
+  constructor() {
+    this.selectors = new Map();
+    this.props = new Map();
+    this.values = new Set();
+  }
+  addEdge(selector, prop, value) {
+    value.addSelector(selector);
+    prop.addValue(value);
+    selector.addProp(prop, value);
+  }
+  add(selectors, prop, value) {
+    selectors.forEach((selector) => {
+      let _selector = this.selectors.get(selector);
+      if (!_selector) {
+        _selector = new Selector(selector);
+        this.selectors.set(selector, _selector);
+      }
+      let _prop = this.props.get(prop);
+      if (!_prop) {
+        _prop = new Prop(prop);
+        this.props.set(prop, _prop);
+      }
+      let _value = _prop.getValue(value);
+      if (!_value) {
+        _value = new Value(prop, value);
+        this.values.add(_value);
+      }
+      this.addEdge(_selector, _prop, _value);
+    });
+  }
+  restructure() {
+    const rules = [];
+    this.values.forEach((value) => {
+      const selectors = value.getSelectors();
+      if (selectors.size === 0) {
+        return;
+      }
+      const some = rules.some((rule) => {
+        if (setEquals(selectors, rule.selectors)) {
+          rule.decls.set(value.getProp(), value.toString());
+          return true;
+        }
+        return false;
+      });
+      if (!some) {
+        rules.push({
+          selectors: selectors,
+          decls: new Map([[value.getProp(), value.toString()]]),
+        });
+      }
+    });
+    return rules;
+  }
+}
+
+/**
+ * @type {import('postcss').PluginCreator}
+ * @param {string[]} onlySelectors
+ */
+module.exports = (importFrom = []) => {
+  return {
+    postcssPlugin: "postcss-restructure-variable",
+    Root(root) {
+      /**
+       * @type {string[]}
+       */
+      const ignoreValue = [];
+
+      const graph = new Graph();
+
+      /**
+       *
+       * @param {import('postcss').AtRule} node
+       */
+      const atRuleFind = (node) => {
+        node.each((atRuleNode) => {
+          switch (atRuleNode.type) {
+            case "rule":
+              atRuleNode.each((decl) => {
+                if (decl.type === "decl" && decl.variable) {
+                  ignoreValue.push(decl.prop);
+                }
+              });
+              break;
+            case "atrule":
+              atRuleFind(atRuleNode);
+              break;
+          }
+        });
+      };
+
+      root.each((node) => {
+        if (
+          !node.source ||
+          (node.source !== undefined &&
+            !importFrom.includes(node.source.input.file))
+        ) {
+          return;
+        }
+
+        switch (node.type) {
+          case "rule":
+            const beforeLength = node.nodes.length;
+
+            node.each((decl) => {
+              if (decl.type === "decl" && decl.variable) {
+                if (ignoreValue.includes(decl.prop)) {
+                  return;
+                }
+                graph.add(node.selectors, decl.prop, decl.value);
+                decl.remove();
+              }
+            });
+
+            // Удаляем если селектор оказался пустой, после наших действий
+            if (node.nodes.length === 0 && node.nodes.length !== beforeLength) {
+              node.remove();
+            }
+            break;
+          case "atrule":
+            atRuleFind(node);
+            break;
+        }
+      });
+
+      const rules = graph.restructure();
+
+      let lastRule = undefined;
+      rules.forEach(({ decls, selectors }) => {
+        const rule = new Rule({
+          selectors: Array.from(selectors),
+        });
+
+        decls.forEach((value, key) => {
+          rule.append({ prop: key, value: value });
+        });
+
+        if (lastRule) {
+          root.insertAfter(lastRule, rule);
+        } else {
+          // Вставляем первым
+          if (root.first) {
+            root.insertBefore(root.first, rule);
+          } else {
+            root.append(rule);
+          }
+        }
+
+        lastRule = rule;
+      });
+    },
+  };
+};
+
+module.exports.postcss = true;

package/tasks/postcss-scope-root.js

@@ -1,7 +1,11 @@
 module.exports = ({ customPropRoot, except = [] }) => ({
   postcssPlugin: "postcss-scope-root",
   Rule: (rule) => {
-    if (rule.selector === ":root" && !except.includes(rule.source.input.file)) {
+    if (
+      rule.selector === ":root" &&
+      rule.source &&
+      !except.includes(rule.source.input.file)
+    ) {
       rule.selector = customPropRoot;
     }
   },

package/tsconfig.json

@@ -29,6 +29,7 @@
     ".github/**/*.js",
     "eslint-plugin-vkui/*.js",
     "postcss-plugin-vk-sans/*.js",
+    "postcss-custom-properties-fallback/*.js",
     "*.js"
   ],
   "files": [

package/dist/cssm/components/File/File.css

@@ -1 +0,0 @@
-.vkuiFile__input{display:none}

package/dist/cssm/components/SelectMimicry/SelectMimicry.css

@@ -1 +0,0 @@
-.vkuiSelect--mimicry-plain{padding:8px 8px 8px 0;text-transform:capitalize;border-radius:8px}.vkuiSelect--mimicry-plain .vkuiFormField__border{background-color:transparent;border:0}

package/src/components/AppRoot/ScrollContext.ts

@@ -1,132 +0,0 @@
-import * as React from "react";
-import { noop } from "../../lib/utils";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { clamp } from "../../helpers/math";
-
-const clearDisableScrollStyle = (node: HTMLElement) => {
-  Object.assign(node.style, {
-    position: "",
-    top: "",
-    left: "",
-    right: "",
-    overflowY: "",
-    overflowX: "",
-  });
-};
-
-export interface ScrollContextInterface {
-  getScroll(): { x: number; y: number };
-  scrollTo(x?: number, y?: number): void;
-  enableScrollLock(): void;
-  disableScrollLock(): void;
-}
-
-export const ScrollContext = React.createContext<ScrollContextInterface>({
-  getScroll: () => ({ x: 0, y: 0 }),
-  scrollTo: noop,
-  enableScrollLock: noop,
-  disableScrollLock: noop,
-});
-
-export const useScroll = () => React.useContext(ScrollContext);
-
-export const globalScrollController = (
-  window: Window | undefined,
-  document: HTMLDocument | undefined
-): ScrollContextInterface => ({
-  getScroll: () => ({ x: window!.pageXOffset, y: window!.pageYOffset }),
-  scrollTo: (x = 0, y = 0) => {
-    // Some iOS versions do not normalize scroll — do it manually.
-    window!.scrollTo(
-      x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,
-      y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0
-    );
-  },
-  enableScrollLock: () => {
-    const scrollY = window!.pageYOffset;
-    const scrollX = window!.pageXOffset;
-    const overflowY =
-      window!.innerWidth > document!.documentElement.clientWidth
-        ? "scroll"
-        : "";
-    const overflowX =
-      window!.innerHeight > document!.documentElement.clientHeight
-        ? "scroll"
-        : "";
-
-    Object.assign(document!.body.style, {
-      position: "fixed",
-      top: `-${scrollY}px`,
-      left: `-${scrollX}px`,
-      right: "0",
-      overflowY,
-      overflowX,
-    });
-  },
-  disableScrollLock: () => {
-    const scrollY = document!.body.style.top;
-    const scrollX = document!.body.style.left;
-
-    clearDisableScrollStyle(document!.body);
-    window!.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
-  },
-});
-
-export const elementScrollController = (
-  elRef: React.RefObject<HTMLElement>
-): ScrollContextInterface => ({
-  getScroll: () => ({
-    x: elRef.current?.scrollLeft ?? 0,
-    y: elRef.current?.scrollTop ?? 0,
-  }),
-  scrollTo: (x = 0, y = 0) => {
-    const el = elRef.current;
-    // Some iOS versions do not normalize scroll — do it manually.
-    el?.scrollTo(
-      x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,
-      y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0
-    );
-  },
-  enableScrollLock: () => {
-    const el = elRef.current;
-    if (!el) {
-      return;
-    }
-    const scrollY = el.scrollTop;
-    const scrollX = el.scrollLeft;
-    const overflowY = el.scrollWidth > el.clientWidth ? "scroll" : "";
-    const overflowX = el.scrollHeight > el.clientHeight ? "scroll" : "";
-
-    Object.assign(el.style, {
-      position: "absolute",
-      top: `-${scrollY}px`,
-      left: `-${scrollX}px`,
-      right: "0",
-      overflowY,
-      overflowX,
-    });
-  },
-  disableScrollLock: () => {
-    const el = elRef.current;
-    if (!el) {
-      return;
-    }
-
-    const scrollY = el.style.top;
-    const scrollX = el.style.left;
-
-    clearDisableScrollStyle(el);
-    el.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
-  },
-});
-
-export const useScrollLock = (enabled = true) => {
-  const { enableScrollLock, disableScrollLock } = useScroll();
-  useIsomorphicLayoutEffect(() => {
-    if (enabled) {
-      enableScrollLock();
-      return disableScrollLock;
-    }
-    return noop;
-  }, [enableScrollLock, disableScrollLock, enabled]);
-};

package/src/components/File/File.css

@@ -1,6 +0,0 @@
-.File {
-}
-
-.File__input {
-  display: none;
-}

package/src/components/SelectMimicry/SelectMimicry.css

@@ -1,10 +0,0 @@
-.Select--mimicry-plain {
-  padding: 8px 8px 8px 0;
-  text-transform: capitalize;
-  border-radius: 8px;
-}
-
-.Select--mimicry-plain .FormField__border {
-  background-color: transparent;
-  border: none;
-}