@vkontakte/vkui 4.28.0 → 4.28.1

package/src/styles/vkcom_light.css

@@ -0,0 +1,254 @@
+/* stylelint-disable */
+/*
+* Этот файл сгенерирован автоматически. Не надо править его руками.
+*/
+body[scheme="vkcom_light"],
+[scheme="vkcom_light"],
+.vkuivkcom_light {
+  --accent: #5181b8;
+  --accent_alternate: #0077ff;
+  --action_sheet_action_foreground: #5181b8;
+  --action_sheet_separator: rgba(0, 0, 0, 0.12);
+  --activity_indicator_tint: #aeb7c2;
+  --attach_picker_tab_active_background: #5181b8;
+  --attach_picker_tab_active_icon: #ffffff;
+  --attach_picker_tab_active_text: #5181b8;
+  --attach_picker_tab_inactive_background: #f5f5f5;
+  --attach_picker_tab_inactive_icon: #818c99;
+  --attach_picker_tab_inactive_text: #818c99;
+  --background_content: #ffffff;
+  --background_highlighted: rgba(174, 183, 194, 0.16);
+  --background_hover: rgba(174, 183, 194, 0.12);
+  --background_keyboard: #dce1e6;
+  --background_light: #fafbfc;
+  --background_page: #edeef0;
+  --background_suggestions: #ffffff;
+  --background_text_highlighted: rgba(81, 129, 184, 0.2);
+  --button_bot_shadow: #cccccc;
+  --button_commerce_background: #4bb34b;
+  --button_commerce_foreground: #ffffff;
+  --button_muted_background: #e5ebf1;
+  --button_muted_foreground: #55677d;
+  --button_outline_border: #2a5885;
+  --button_outline_foreground: #2a5885;
+  --button_primary_background: #5181b8;
+  --button_primary_foreground: #ffffff;
+  --button_secondary_background: #e5ebf1;
+  --button_secondary_background_highlighted: #dae2ea;
+  --button_secondary_destructive_background: rgba(230, 70, 70, 0.16);
+  --button_secondary_destructive_background_highlighted: rgba(
+    230,
+    70,
+    70,
+    0.12
+  );
+  --button_secondary_destructive_foreground: #e64646;
+  --button_secondary_destructive_foreground_highlighted: rgba(
+    230,
+    70,
+    70,
+    0.12
+  );
+  --button_secondary_foreground: #55677d;
+  --button_secondary_foreground_highlighted: #55677d;
+  --button_tertiary_background: rgba(0, 0, 0, 0);
+  --button_tertiary_foreground: #2a5885;
+  --cell_button_foreground: #2a5885;
+  --content_negative_background: #ff5c5c;
+  --content_placeholder_icon: #99a2ad;
+  --content_placeholder_text: #818c99;
+  --content_positive_background: #def0d3;
+  --content_tint_background: #f0f2f5;
+  --content_tint_foreground: #828282;
+  --content_warning_background: #faefd2;
+  --control_background: #edeef0;
+  --control_foreground: #5181b8;
+  --control_tint: #ffffff;
+  --control_tint_muted: #828282;
+  --counter_primary_background: #5181b8;
+  --counter_primary_text: #ffffff;
+  --counter_prominent_background: #ff3347;
+  --counter_prominent_text: #ffffff;
+  --counter_secondary_background: #99a2ad;
+  --counter_secondary_text: #ffffff;
+  --destructive: #e64646;
+  --dynamic_blue: #5181b8;
+  --dynamic_gray: #aeb7c2;
+  --dynamic_green: #1b7a1b;
+  --dynamic_orange: #ffa000;
+  --dynamic_purple: #735ce6;
+  --dynamic_raspberry_pink: #e03fab;
+  --dynamic_red: #ff3347;
+  --dynamic_violet: #792ec0;
+  --feed_recommended_friend_promo_background: #5181b8;
+  --field_background: #f7f8fa;
+  --field_border: #dce1e6;
+  --field_error_background: #faebeb;
+  --field_error_border: #e64646;
+  --field_text_placeholder: #818c99;
+  --field_valid_border: #4bb34b;
+  --float_button_background: #f7f8fa;
+  --float_button_background_highlighted: #edeef0;
+  --float_button_border: rgba(0, 0, 0, 0.08);
+  --float_button_foreground: #99a2ad;
+  --header_alternate_background: #ffffff;
+  --header_alternate_tab_active_indicator: #5181b8;
+  --header_alternate_tab_active_text: #000000;
+  --header_alternate_tab_inactive_text: #99a2ad;
+  --header_background: #ffffff;
+  --header_background_before_blur: #ffffff;
+  --header_background_before_blur_alternate: #ffffff;
+  --header_search_field_background: #edeef0;
+  --header_search_field_tint: #818c99;
+  --header_tab_active_background: rgba(0, 0, 0, 0);
+  --header_tab_active_indicator: #5181b8;
+  --header_tab_active_text: #000000;
+  --header_tab_inactive_text: #99a2ad;
+  --header_text: #000000;
+  --header_text_alternate: #000000;
+  --header_text_secondary: #818c99;
+  --header_tint: #aeb7c2;
+  --header_tint_alternate: #0077ff;
+  --icon_alpha_placeholder: #ffffff;
+  --icon_medium: #6f7985;
+  --icon_medium_alpha: rgba(0, 0, 0, 0.48);
+  --icon_name: #8fadc8;
+  --icon_outline_medium: #818c99;
+  --icon_outline_secondary: #99a2ad;
+  --icon_secondary: #99a2ad;
+  --icon_secondary_alpha: rgba(0, 0, 0, 0.36);
+  --icon_tertiary: #aeb7c2;
+  --icon_tertiary_alpha: rgba(0, 0, 0, 0.24);
+  --im_attach_tint: #5181b8;
+  --im_bubble_border_alternate: #dce1e6;
+  --im_bubble_border_alternate_highlighted: #cccccc;
+  --im_bubble_button_background: #f7f8fa;
+  --im_bubble_button_background_highlighted: #cccccc;
+  --im_bubble_button_foreground: #000000;
+  --im_bubble_button_outgoing_background: rgba(255, 255, 255, 0.72);
+  --im_bubble_gift_background: #f4e7c3;
+  --im_bubble_gift_background_highlighted: #e3d3ac;
+  --im_bubble_gift_text: #857250;
+  --im_bubble_gift_text_secondary: #ab9871;
+  --im_bubble_incoming: #edeef0;
+  --im_bubble_incoming_alternate: #ffffff;
+  --im_bubble_incoming_alternate_highlighted: #f7f8fa;
+  --im_bubble_incoming_expiring: #e6e9ff;
+  --im_bubble_incoming_expiring_highlighted: #ccd3ff;
+  --im_bubble_incoming_highlighted: #d3d9de;
+  --im_bubble_outgoing: #cce4ff;
+  --im_bubble_outgoing_alternate: #ffffff;
+  --im_bubble_outgoing_alternate_highlighted: #f0f2f5;
+  --im_bubble_outgoing_expiring: #ccd3ff;
+  --im_bubble_outgoing_expiring_highlighted: #adb8ff;
+  --im_bubble_outgoing_highlighted: #add3ff;
+  --im_bubble_wallpaper_button_background: #f0f2f5;
+  --im_bubble_wallpaper_button_background_highlighted: #e7e8ec;
+  --im_bubble_wallpaper_button_foreground: #000000;
+  --im_bubble_wallpaper_incoming: #ffffff;
+  --im_bubble_wallpaper_incoming_highlighted: #edeef0;
+  --im_bubble_wallpaper_outgoing: #cce4ff;
+  --im_bubble_wallpaper_outgoing_highlighted: #add3ff;
+  --im_forward_line_tint: rgba(0, 20, 51, 0.12);
+  --im_reply_separator: #2a5885;
+  --im_service_message_text: #818c99;
+  --im_text_name: #2a5885;
+  --im_toolbar_separator: #001c3d;
+  --im_toolbar_voice_msg_background: #99a2ad;
+  --image_border: rgba(0, 0, 0, 0.08);
+  --input_background: #ffffff;
+  --input_border: #d3d9de;
+  --landing_background: #ffffff;
+  --landing_field_background: #f7f8fa;
+  --landing_field_border: rgba(0, 0, 0, 0);
+  --landing_field_placeholder: #818c99;
+  --landing_login_button_background: #5181b8;
+  --landing_login_button_foreground: #ffffff;
+  --landing_primary_button_background: #5181b8;
+  --landing_primary_button_foreground: #ffffff;
+  --landing_secondary_button_background: rgba(0, 57, 115, 0.1);
+  --landing_secondary_button_foreground: #5181b8;
+  --landing_snippet_border: rgba(0, 0, 0, 0.12);
+  --landing_tertiary_button_background: rgba(0, 0, 0, 0);
+  --landing_tertiary_button_foreground: #5181b8;
+  --landing_text_primary: #000000;
+  --landing_text_secondary: #818c99;
+  --landing_text_title: #5181b8;
+  --like_text_tint: #ff3347;
+  --link_alternate: #2a5885;
+  --loader_background: #edeef0;
+  --loader_tint: #c5d0db;
+  --loader_track_fill: #d3d9de;
+  --loader_track_value_fill: #5181b8;
+  --media_overlay_button_background: #ffffff;
+  --media_overlay_button_foreground: #333333;
+  --modal_card_background: #ffffff;
+  --modal_card_border: rgba(0, 0, 0, 0);
+  --modal_card_header_close: #000000;
+  --music_playback_icon: #000000;
+  --overlay_status_background: #edeef0;
+  --overlay_status_foreground: #6f7985;
+  --overlay_status_icon: #818c99;
+  --panel_tab_active_background: #edeef0;
+  --panel_tab_active_text: #4e5966;
+  --panel_tab_inactive_text: #6f7985;
+  --placeholder_icon_background: rgba(0, 28, 61, 0.08);
+  --placeholder_icon_background_opaque: #f0f2f5;
+  --placeholder_icon_foreground_primary: #99a2ad;
+  --placeholder_icon_foreground_secondary: #aeb7c2;
+  --placeholder_icon_tint: #1d3a5c;
+  --poll_option_background: #5181b8;
+  --primary_overlay_badge: rgba(0, 0, 0, 0.56);
+  --search_bar_background: rgba(0, 0, 0, 0);
+  --search_bar_field_background: #edeef0;
+  --search_bar_field_tint: #818c99;
+  --search_bar_segmented_control_tint: #818c99;
+  --secondary_overlay_badge: rgba(0, 0, 0, 0.24);
+  --segmented_control_bar_background: rgba(0, 0, 0, 0);
+  --segmented_control_tint: #99a2ad;
+  --selection_off_icon: #c5d0db;
+  --separator_alpha: rgba(0, 0, 0, 0.12);
+  --separator_alternate: #e7e8ec;
+  --separator_common: #dce1e6;
+  --skeleton_foreground_from: #f0f2f5;
+  --skeleton_foreground_to: #e7e8ec;
+  --skeleton_shimmer_from: #ffffff;
+  --skeleton_shimmer_to: rgba(255, 255, 255, 0);
+  --snippet_background: #ffffff;
+  --snippet_border: rgba(0, 0, 0, 0.12);
+  --snippet_icon_tertiary: #aeb7c2;
+  --splashscreen_icon: #dce1e6;
+  --statusbar_alternate_legacy_background: rgba(0, 0, 0, 0.24);
+  --stories_create_button_background_from: #f0f2f5;
+  --stories_create_button_background_to: #dce1e6;
+  --stories_create_button_foreground: #6f7985;
+  --stories_create_button_icon_background: #ffffff;
+  --stories_skeleton_loader_background: #cccccc;
+  --switch_ios_off_border: #dce1e6;
+  --tabbar_active_icon: #5181b8;
+  --tabbar_background: #f7f8fa;
+  --tabbar_inactive_icon: #99a2ad;
+  --tabbar_tablet_active_icon: #5181b8;
+  --tabbar_tablet_background: #f7f8fa;
+  --tabbar_tablet_inactive_icon: #99a2ad;
+  --tabbar_tablet_text_primary: #000000;
+  --tabbar_tablet_text_secondary: #818c99;
+  --text_action_counter: #818c99;
+  --text_link: #2a5885;
+  --text_link_highlighted_background: #000000;
+  --text_muted: #333333;
+  --text_name: #2a5885;
+  --text_placeholder: #818c99;
+  --text_primary: #000000;
+  --text_secondary: #818c99;
+  --text_subhead: #626d7a;
+  --text_tertiary: #99a2ad;
+  --toolbar_attach_background_from: #dce1e6;
+  --toolbar_attach_background_to: #aeb7c2;
+  --vk_connect_button_primary_background: #222222;
+  --vk_connect_button_primary_foreground: #ffffff;
+  --vk_connect_button_secondary_background: #f5f5f5;
+  --vk_connect_button_secondary_foreground: #222222;
+  --writebar_icon: #818c99;
+}
+/* stylelint-enable */

package/src/testing/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/src/testing/utils.tsx

@@ -0,0 +1,192 @@
+import * as React from "react";
+import { render, RenderResult, screen } from "@testing-library/react";
+import { AdaptivityProvider } from "../components/AdaptivityProvider/AdaptivityProvider";
+import { AdaptivityProps } from "../components/AdaptivityProvider/AdaptivityContext";
+import { ImgOnlyAttributes } from "../lib/utils";
+import { ScrollContext } from "../components/AppRoot/ScrollContext";
+import { act } from "react-dom/test-utils";
+
+export function fakeTimers() {
+  beforeEach(() => jest.useFakeTimers());
+  afterEach(() => jest.useRealTimers());
+}
+
+export const runAllTimers = () =>
+  act(() => {
+    jest.runAllTimers();
+  });
+
+export const imgOnlyAttributes: ImgOnlyAttributes = {
+  alt: "test",
+  crossOrigin: "anonymous",
+  decoding: "async",
+  height: 100,
+  width: 100,
+  loading: "eager",
+  referrerPolicy: "no-referrer",
+  sizes: "test",
+  src: "test",
+  srcSet: "test",
+  useMap: "test",
+};
+
+export type ComponentTestOptions = {
+  defaultProps?: any;
+  forward?: boolean;
+  domAttr?: boolean;
+  className?: boolean;
+  style?: boolean;
+  adaptivity?: AdaptivityProps;
+};
+
+type BasicProps = { style?: any; className?: string };
+
+export function mountTest(Component: React.ComponentType<any>) {
+  it("renders", () => {
+    let api: RenderResult;
+    // mount
+    expect(() => (api = render(<Component />))).not.toThrow();
+    // update
+    expect(() => api.rerender(<Component />)).not.toThrow();
+    // unmount
+    expect(() => api.unmount()).not.toThrow();
+  });
+}
+
+export function baselineComponent<Props extends BasicProps>(
+  RawComponent: React.ComponentType<Props>,
+  {
+    forward = true,
+    style = true,
+    className = true,
+    domAttr = true,
+    adaptivity,
+  }: ComponentTestOptions = {}
+) {
+  const Component: React.ComponentType<any> = adaptivity
+    ? (p: Props) => (
+        <AdaptivityProvider {...adaptivity}>
+          <RawComponent {...p} />
+        </AdaptivityProvider>
+      )
+    : RawComponent;
+  mountTest(Component);
+  forward &&
+    it("forwards attributes", () => {
+      const cls = "Custom";
+      const { rerender } = render(
+        <Component
+          data-testid="__cmp__"
+          className={cls}
+          style={{ background: "red" }}
+        />
+      );
+      // forward DOM attributes
+      domAttr && expect(screen.queryByTestId("__cmp__")).toBeTruthy();
+
+      if (className || style) {
+        const styledNode = document.getElementsByClassName(
+          cls
+        )[0] as HTMLElement;
+        // forwards className
+        className && expect(styledNode).toBeTruthy();
+        const customClassList = Array.from(styledNode.classList).filter(
+          (item) => item !== cls
+        );
+        // forwards style
+        style && expect(styledNode.style.background).toBe("red");
+        const customStyleCount = styledNode.style.length;
+
+        rerender(<Component />);
+
+        // does not replace default className
+        className &&
+          expect(Array.from(styledNode.classList)).toEqual(customClassList);
+        // does not replace default styles
+        style &&
+          expect(styledNode.style.length).toEqual(
+            styledNode.style.background
+              ? customStyleCount
+              : customStyleCount - 1
+          );
+      }
+    });
+}
+
+type RectOptions = { x?: number; y?: number; w?: number; h?: number };
+export function mockRect(
+  el: HTMLElement | ({} & any),
+  { x = 0, y = 0, w = 0, h = 0 }: RectOptions
+) {
+  if (!el) {
+    return;
+  }
+  el.getBoundingClientRect = () => ({
+    x,
+    y,
+    width: w,
+    height: h,
+    left: x,
+    top: y,
+    right: x + w,
+    bottom: y + h,
+    toJSON() {
+      JSON.stringify(this);
+    },
+  });
+}
+
+export const mockScrollContext = (
+  getY: () => number
+): [React.FC, jest.Mock] => {
+  const getScroll = () => ({ x: 0, y: getY() });
+  const scrollTo = jest.fn();
+  return [
+    (props) => (
+      <ScrollContext.Provider value={{ getScroll, scrollTo }}>
+        {props.children}
+      </ScrollContext.Provider>
+    ),
+    scrollTo,
+  ];
+};
+
+const isNullOrUndefined = (val: any) => val === null || val === undefined;
+
+// Согласно спеке, offsetParent в ряде случаев будет null
+Object.defineProperty(HTMLElement.prototype, "offsetParent", {
+  get() {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    let element: HTMLElement = this;
+    while (
+      !isNullOrUndefined(element) &&
+      (isNullOrUndefined(element.style) ||
+        isNullOrUndefined(element.style.display) ||
+        element.style.display.toLowerCase() !== "none")
+    ) {
+      // @ts-ignore
+      element = element.parentNode;
+    }
+
+    if (!isNullOrUndefined(element)) {
+      return null;
+    }
+
+    if (
+      !isNullOrUndefined(this.style) &&
+      !isNullOrUndefined(this.style.position) &&
+      this.style.position.toLowerCase() === "fixed"
+    ) {
+      return null;
+    }
+
+    if (
+      this.tagName.toLowerCase() === "html" ||
+      this.tagName.toLowerCase() === "body"
+    ) {
+      return null;
+    }
+
+    return this.parentNode;
+  },
+});

package/src/tokenized/index.ts

@@ -0,0 +1,39 @@
+export { default as Button } from "../components/Button/Button";
+export type { ButtonProps } from "../components/Button/Button";
+
+export { Card } from "../components/Card/Card";
+export type { CardProps } from "../components/Card/Card";
+
+export { CardScroll } from "../components/CardScroll/CardScroll";
+export type { CardScrollProps } from "../components/CardScroll/CardScroll";
+
+export { default as HorizontalScroll } from "../components/HorizontalScroll/HorizontalScroll";
+export type { HorizontalScrollProps } from "../components/HorizontalScroll/HorizontalScroll";
+
+export { ButtonGroup } from "../components/ButtonGroup/ButtonGroup";
+export type { ButtonGroupProps } from "../components/ButtonGroup/ButtonGroup";
+
+export { SegmentedControl } from "../components/SegmentedControl/SegmentedControl";
+export type {
+  SegmentedControlProps,
+  SegmentedControlOptionInterface,
+  SegmentedControlValue,
+} from "../components/SegmentedControl/SegmentedControl";
+
+export { default as Title } from "../components/Typography/Title/Title";
+export type { TitleProps } from "../components/Typography/Title/Title";
+
+export { default as Subhead } from "../components/Typography/Subhead/Subhead";
+export type { SubheadProps } from "../components/Typography/Subhead/Subhead";
+
+export { Pagination } from "../components/Pagination/Pagination";
+export type { PaginationProps } from "../components/Pagination/Pagination";
+
+export { Calendar } from "../components/Calendar/Calendar";
+export type { CalendarProps } from "../components/Calendar/Calendar";
+
+export { CalendarRange } from "../components/CalendarRange/CalendarRange";
+export type { CalendarRangeProps } from "../components/CalendarRange/CalendarRange";
+
+export { Caption } from "../components/Typography/Caption/Caption";
+export type { CaptionProps } from "../components/Typography/Caption/Caption";

package/src/types.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { PlatformType } from "./lib/platform";
+import { Insets } from "@vkontakte/vk-bridge";
+
+export type AnyFunction = (...args: any[]) => any;
+
+export type AlignType = "left" | "center" | "right";
+
+export interface HasRootRef<T> {
+  getRootRef?: React.Ref<T>;
+}
+
+export interface HasRef<T> {
+  getRef?: React.Ref<T>;
+}
+
+export interface HasComponent {
+  Component?: React.ElementType;
+}
+
+export interface HasAlign {
+  align?: AlignType;
+}
+
+export interface HasPlatform {
+  /**
+   * @ignore
+   */
+  platform?: PlatformType;
+}
+
+export interface HasInsets {
+  /**
+   * @ignore
+   */
+  insets?: Partial<Insets>;
+}
+
+export interface Version {
+  major: number;
+  minor?: number;
+  patch?: number;
+}

package/src/unstable/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Forms
+ */
+export { ChipsSelect } from "../components/ChipsSelect/ChipsSelect";
+export type { ChipsSelectProps } from "../components/ChipsSelect/ChipsSelect";
+
+export { Dropdown } from "../components/Dropdown/Dropdown";
+export type { DropdownProps } from "../components/Dropdown/Dropdown";
+
+export { TextTooltip } from "../components/TextTooltip/TextTooltip";
+export type { TextTooltipProps } from "../components/TextTooltip/TextTooltip";
+
+export { RichTooltip } from "../components/RichTooltip/RichTooltip";
+export type { RichTooltipProps } from "../components/RichTooltip/RichTooltip";
+
+export { Popper } from "../components/Popper/Popper";
+export type { PopperProps } from "../components/Popper/Popper";
+
+export { ViewInfinite } from "../components/View/ViewInfinite";
+export type { ViewInfiniteProps } from "../components/View/ViewInfinite";
+
+export { SimpleCheckbox } from "../components/SimpleCheckbox/SimpleCheckbox";
+export type { SimpleCheckboxProps } from "../components/SimpleCheckbox/SimpleCheckbox";

package/src/vkui.js

@@ -0,0 +1 @@
+export * from "./index";

package/stylelint.config.js

@@ -0,0 +1,46 @@
+const path = require("path");
+const { cssPropSources } = require("./postcss.config");
+
+module.exports = {
+  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
+  plugins: [
+    "stylelint-value-no-unknown-custom-properties",
+    "./tasks/styleint-atomic",
+  ],
+  rules: {
+    indentation: null,
+    "block-no-empty": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "comment-empty-line-before": null,
+    "comment-whitespace-inside": null,
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "value-keyword-case": null,
+    "length-zero-no-unit": [
+      true,
+      {
+        ignore: ["custom-properties"],
+      },
+    ],
+    "keyframes-name-pattern": "vkui-.+",
+    "csstools/value-no-unknown-custom-properties": [
+      true,
+      {
+        importFrom: [
+          ...cssPropSources,
+          path.join(
+            __dirname,
+            "node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css"
+          ),
+        ],
+      },
+    ],
+    // Skip reporting in pprecommit run, highlight in editor
+    "vkui/atomic": [
+      process.env.LINT_PRECOMMIT_RUN ? null : true,
+      {
+        severity: "warning",
+      },
+    ],
+  },
+};

package/tasks/generate_scheme.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+const path = require("path");
+const schemeVKUI = require("@vkontakte/appearance/main.valette/scheme");
+const paletteVKUI = require("@vkontakte/appearance/main.valette/palette");
+const schemeWeb = require("@vkontakte/appearance/main.valette/scheme_web");
+const paletteWeb = require("@vkontakte/appearance/main.valette/palette_web");
+const pkg = require("../package.json");
+const generateScheme = require("@vkontakte/vkjs/build/tasks/generate_scheme");
+
+const stylesDir = path.resolve(__dirname, "../src/styles");
+
+generateScheme(schemeVKUI, paletteVKUI, pkg.defaultSchemeId, stylesDir);
+generateScheme(schemeWeb, paletteWeb, pkg.defaultSchemeId, stylesDir);

package/tasks/postcss-check-keyframes.js

@@ -0,0 +1,36 @@
+const { readFileSync } = require("fs");
+const postcss = require("postcss");
+const findAnimationName = require("stylelint/lib/utils/findAnimationName");
+
+function getAnimations(root) {
+  const animations = {};
+  root.walkAtRules("keyframes", (atrule) => {
+    if (animations[atrule.params]) {
+      throw atrule.error(`duplicate @keyframes ${atrule.params}`);
+    }
+    animations[atrule.params] = true;
+  });
+  return animations;
+}
+
+module.exports = ({ importFrom } = {}) => {
+  const sharedAnimations = importFrom
+    ? getAnimations(
+        postcss.parse(readFileSync(importFrom), { from: importFrom })
+      )
+    : {};
+  return {
+    postcssPlugin: "postcss-scope-keyframes",
+    Once: (root) => {
+      const animations = { ...sharedAnimations, ...getAnimations(root) };
+      root.walkDecls(/^animation(-name)?/, (decl) => {
+        findAnimationName(decl.value).forEach(({ value }) => {
+          if (value !== "none" && !animations[value]) {
+            throw decl.error(`@keyframes ${value} not found`, { word: value });
+          }
+        });
+      });
+    },
+  };
+};
+module.exports.postcss = true;

package/tasks/postcss-scope-root.js

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