@vkontakte/vkui 4.23.0 → 4.24.0

package/src/styles/vkcom_dark.css

@@ -2,7 +2,8 @@
 /*
 * Этот файл сгенерирован автоматически. Не надо править его руками.
 */
-body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
+body[scheme="vkcom_dark"],
+[scheme="vkcom_dark"] {
   --accent: #71aaeb;
   --accent_alternate: #ffffff;
   --action_sheet_action_foreground: #ffffff;
@@ -21,7 +22,7 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --background_light: #292929;
   --background_page: #0a0a0a;
   --background_suggestions: #333333;
-  --background_text_highlighted: rgba(81, 129, 184, 0.20);
+  --background_text_highlighted: rgba(81, 129, 184, 0.2);
   --button_bot_shadow: #222222;
   --button_commerce_background: #4bb34b;
   --button_commerce_foreground: #ffffff;
@@ -34,12 +35,17 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --button_secondary_background: #555555;
   --button_secondary_background_highlighted: #656565;
   --button_secondary_destructive_background: #555555;
-  --button_secondary_destructive_background_highlighted: rgba(85, 85, 85, 0.60);
+  --button_secondary_destructive_background_highlighted: rgba(85, 85, 85, 0.6);
   --button_secondary_destructive_foreground: #ff5c5c;
-  --button_secondary_destructive_foreground_highlighted: rgba(230, 70, 70, 0.16);
+  --button_secondary_destructive_foreground_highlighted: rgba(
+    230,
+    70,
+    70,
+    0.16
+  );
   --button_secondary_foreground: #e1e3e6;
   --button_secondary_foreground_highlighted: #e1e3e6;
-  --button_tertiary_background: rgba(0, 0, 0, 0.00);
+  --button_tertiary_background: rgba(0, 0, 0, 0);
   --button_tertiary_foreground: #e1e3e6;
   --cell_button_foreground: #e1e3e6;
   --content_negative_background: rgba(230, 70, 70, 0.16);
@@ -104,12 +110,12 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --icon_outline_medium: #b2b2b2;
   --icon_outline_secondary: #939393;
   --icon_secondary: #828282;
-  --icon_secondary_alpha: rgba(255, 255, 255, 0.40);
+  --icon_secondary_alpha: rgba(255, 255, 255, 0.4);
   --icon_tertiary: #656565;
   --icon_tertiary_alpha: rgba(255, 255, 255, 0.24);
   --im_attach_tint: #ffffff;
-  --im_bubble_border_alternate: rgba(0, 0, 0, 0.00);
-  --im_bubble_border_alternate_highlighted: rgba(0, 0, 0, 0.00);
+  --im_bubble_border_alternate: rgba(0, 0, 0, 0);
+  --im_bubble_border_alternate_highlighted: rgba(0, 0, 0, 0);
   --im_bubble_button_background: rgba(255, 255, 255, 0.16);
   --im_bubble_button_background_highlighted: rgba(255, 255, 255, 0.24);
   --im_bubble_button_foreground: #e1e3e6;
@@ -148,7 +154,7 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --input_border: #555555;
   --landing_background: #222222;
   --landing_field_background: #292929;
-  --landing_field_border: rgba(0, 0, 0, 0.00);
+  --landing_field_border: rgba(0, 0, 0, 0);
   --landing_field_placeholder: #b2b2b2;
   --landing_login_button_background: #e1e3e6;
   --landing_login_button_foreground: #222222;
@@ -157,7 +163,7 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --landing_secondary_button_background: rgba(255, 255, 255, 0.16);
   --landing_secondary_button_foreground: #ffffff;
   --landing_snippet_border: rgba(255, 255, 255, 0.16);
-  --landing_tertiary_button_background: rgba(0, 0, 0, 0.00);
+  --landing_tertiary_button_background: rgba(0, 0, 0, 0);
   --landing_tertiary_button_foreground: #ffffff;
   --landing_text_primary: #e1e3e6;
   --landing_text_secondary: #828282;
@@ -186,7 +192,7 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --placeholder_icon_foreground_secondary: #656565;
   --placeholder_icon_tint: #ffffff;
   --poll_option_background: #ffffff;
-  --primary_overlay_badge: rgba(255, 255, 255, 0.40);
+  --primary_overlay_badge: rgba(255, 255, 255, 0.4);
   --search_bar_background: #222222;
   --search_bar_field_background: #424242;
   --search_bar_field_tint: #b2b2b2;
@@ -201,12 +207,12 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --skeleton_foreground_from: #292929;
   --skeleton_foreground_to: #333333;
   --skeleton_shimmer_from: #222222;
-  --skeleton_shimmer_to: rgba(0, 0, 0, 0.00);
+  --skeleton_shimmer_to: rgba(0, 0, 0, 0);
   --snippet_background: rgba(255, 255, 255, 0.04);
   --snippet_border: rgba(255, 255, 255, 0.16);
   --snippet_icon_tertiary: #656565;
   --splashscreen_icon: #333333;
-  --statusbar_alternate_legacy_background: rgba(0, 0, 0, 0.00);
+  --statusbar_alternate_legacy_background: rgba(0, 0, 0, 0);
   --stories_create_button_background_from: #424242;
   --stories_create_button_background_to: #424242;
   --stories_create_button_foreground: #cccccc;

package/src/styles/vkcom_light.css

@@ -2,7 +2,8 @@
 /*
 * Этот файл сгенерирован автоматически. Не надо править его руками.
 */
-body[scheme="vkcom_light"], [scheme="vkcom_light"] {
+body[scheme="vkcom_light"],
+[scheme="vkcom_light"] {
   --accent: #5181b8;
   --accent_alternate: #0077ff;
   --action_sheet_action_foreground: #5181b8;
@@ -21,7 +22,7 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --background_light: #fafbfc;
   --background_page: #edeef0;
   --background_suggestions: #ffffff;
-  --background_text_highlighted: rgba(81, 129, 184, 0.20);
+  --background_text_highlighted: rgba(81, 129, 184, 0.2);
   --button_bot_shadow: #cccccc;
   --button_commerce_background: #4bb34b;
   --button_commerce_foreground: #ffffff;
@@ -34,12 +35,22 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --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_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_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.00);
+  --button_tertiary_background: rgba(0, 0, 0, 0);
   --button_tertiary_foreground: #2a5885;
   --cell_button_foreground: #2a5885;
   --content_negative_background: #ff5c5c;
@@ -88,7 +99,7 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --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.00);
+  --header_tab_active_background: rgba(0, 0, 0, 0);
   --header_tab_active_indicator: #5181b8;
   --header_tab_active_text: #000000;
   --header_tab_inactive_text: #99a2ad;
@@ -148,16 +159,16 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --input_border: #d3d9de;
   --landing_background: #ffffff;
   --landing_field_background: #f7f8fa;
-  --landing_field_border: rgba(0, 0, 0, 0.00);
+  --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.10);
+  --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.00);
+  --landing_tertiary_button_background: rgba(0, 0, 0, 0);
   --landing_tertiary_button_foreground: #5181b8;
   --landing_text_primary: #000000;
   --landing_text_secondary: #818c99;
@@ -171,7 +182,7 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --media_overlay_button_background: #ffffff;
   --media_overlay_button_foreground: #333333;
   --modal_card_background: #ffffff;
-  --modal_card_border: rgba(0, 0, 0, 0.00);
+  --modal_card_border: rgba(0, 0, 0, 0);
   --modal_card_header_close: #000000;
   --music_playback_icon: #000000;
   --overlay_status_background: #edeef0;
@@ -187,12 +198,12 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --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.00);
+  --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.00);
+  --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);
@@ -201,7 +212,7 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --skeleton_foreground_from: #f0f2f5;
   --skeleton_foreground_to: #e7e8ec;
   --skeleton_shimmer_from: #ffffff;
-  --skeleton_shimmer_to: rgba(255, 255, 255, 0.00);
+  --skeleton_shimmer_to: rgba(255, 255, 255, 0);
   --snippet_background: #ffffff;
   --snippet_border: rgba(0, 0, 0, 0.12);
   --snippet_icon_tertiary: #aeb7c2;

package/src/testing/setup.ts

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

package/src/testing/utils.tsx

@@ -1,31 +1,34 @@
-import * as React from 'react';
-import { render, RenderResult, screen } from '@testing-library/react';
-import AdaptivityProvider, { AdaptivityProviderProps } from '../components/AdaptivityProvider/AdaptivityProvider';
-import { ImgOnlyAttributes } from '../lib/utils';
-import { ScrollContext } from '../components/AppRoot/ScrollContext';
-import { act } from 'react-dom/test-utils';
+import * as React from "react";
+import { render, RenderResult, screen } from "@testing-library/react";
+import AdaptivityProvider, {
+  AdaptivityProviderProps,
+} from "../components/AdaptivityProvider/AdaptivityProvider";
+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 runAllTimers = () =>
+  act(() => {
+    jest.runAllTimers();
+  });
 
 export const imgOnlyAttributes: ImgOnlyAttributes = {
-  alt: 'test',
-  crossOrigin: 'anonymous',
-  decoding: 'async',
+  alt: "test",
+  crossOrigin: "anonymous",
+  decoding: "async",
   height: 100,
   width: 100,
-  loading: 'eager',
-  referrerPolicy: 'no-referrer',
-  sizes: 'test',
-  src: 'test',
-  srcSet: 'test',
-  useMap: 'test',
+  loading: "eager",
+  referrerPolicy: "no-referrer",
+  sizes: "test",
+  src: "test",
+  srcSet: "test",
+  useMap: "test",
 };
 
 export type ComponentTestOptions = {
@@ -40,10 +43,10 @@ export type ComponentTestOptions = {
 type BasicProps = { style?: any; className?: string };
 
 export function mountTest(Component: React.ComponentType<any>) {
-  it('renders', () => {
+  it("renders", () => {
     let api: RenderResult;
     // mount
-    expect(() => api = render(<Component />)).not.toThrow();
+    expect(() => (api = render(<Component />))).not.toThrow();
     // update
     expect(() => api.rerender(<Component />)).not.toThrow();
     // unmount
@@ -59,42 +62,63 @@ export function baselineComponent<Props extends BasicProps>(
     className = true,
     domAttr = true,
     adaptivity,
-  }: ComponentTestOptions = {},
+  }: ComponentTestOptions = {}
 ) {
   const Component: React.ComponentType<BasicProps> = adaptivity
-    ? (p: Props) => <AdaptivityProvider {...adaptivity}><RawComponent {...p} /></AdaptivityProvider>
+    ? (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);
-    }
-  });
+  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) {
+export function mockRect(
+  el: HTMLElement | ({} & any),
+  { x = 0, y = 0, w = 0, h = 0 }: RectOptions
+) {
   if (!el) {
     return;
   }
@@ -113,7 +137,9 @@ export function mockRect(el: HTMLElement | ({} & any), { x = 0, y = 0, w = 0, h
   });
 }
 
-export const mockScrollContext = (getY: () => number): [React.FC, jest.Mock] => {
+export const mockScrollContext = (
+  getY: () => number
+): [React.FC, jest.Mock] => {
   const getScroll = () => ({ x: 0, y: getY() });
   const scrollTo = jest.fn();
   return [
@@ -129,14 +155,16 @@ export const mockScrollContext = (getY: () => number): [React.FC, jest.Mock] =>
 const isNullOrUndefined = (val: any) => val === null || val === undefined;
 
 // Согласно спеке, offsetParent в ряде случаев будет null
-Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
+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')) {
+    while (
+      !isNullOrUndefined(element) &&
+      (isNullOrUndefined(element.style) ||
+        isNullOrUndefined(element.style.display) ||
+        element.style.display.toLowerCase() !== "none")
+    ) {
       // @ts-ignore
       element = element.parentNode;
     }
@@ -145,11 +173,18 @@ Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
       return null;
     }
 
-    if (!isNullOrUndefined(this.style) && !isNullOrUndefined(this.style.position) && this.style.position.toLowerCase() === 'fixed') {
+    if (
+      !isNullOrUndefined(this.style) &&
+      !isNullOrUndefined(this.style.position) &&
+      this.style.position.toLowerCase() === "fixed"
+    ) {
       return null;
     }
 
-    if (this.tagName.toLowerCase() === 'html' || this.tagName.toLowerCase() === 'body') {
+    if (
+      this.tagName.toLowerCase() === "html" ||
+      this.tagName.toLowerCase() === "body"
+    ) {
       return null;
     }
 

package/src/types.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { PlatformType } from './lib/platform';
-import { Insets } from '@vkontakte/vk-bridge';
+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 type AlignType = "left" | "center" | "right";
 
 export interface HasRootRef<T> {
   getRootRef?: React.Ref<T>;

package/src/unstable/index.ts

@@ -1,23 +1,23 @@
 /**
  * Forms
  */
-export { default as ChipsSelect } from './../components/ChipsSelect/ChipsSelect';
-export type { ChipsSelectProps } from './../components/ChipsSelect/ChipsSelect';
+export { default as 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 { 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 { 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 { 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 { Popper } from "../components/Popper/Popper";
+export type { PopperProps } from "../components/Popper/Popper";
 
-export { default as ViewInfinite } from './../components/View/ViewInfinite';
-export type { ViewInfiniteProps } from './../components/View/ViewInfinite';
+export { default as ViewInfinite } from "./../components/View/ViewInfinite";
+export type { ViewInfiniteProps } from "./../components/View/ViewInfinite";
 
-export { default as SimpleCheckbox } from './../components/SimpleCheckbox/SimpleCheckbox';
-export type { SimpleCheckboxProps } from './../components/SimpleCheckbox/SimpleCheckbox';
+export { default as SimpleCheckbox } from "./../components/SimpleCheckbox/SimpleCheckbox";
+export type { SimpleCheckboxProps } from "./../components/SimpleCheckbox/SimpleCheckbox";

package/src/vkui.js

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

package/stylelint.config.js

@@ -1,30 +1,46 @@
-const { cssPropSources } = require('./postcss.config');
+const path = require("path");
+const { cssPropSources } = require("./postcss.config");
 
 module.exports = {
-  "extends": "stylelint-config-standard",
-  "plugins": [
+  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
+  plugins: [
     "stylelint-value-no-unknown-custom-properties",
     "./tasks/styleint-atomic",
   ],
-  "rules": {
-    "indentation": null,
-    "number-leading-zero": "never",
+  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,
-    "length-zero-no-unit": [true, {
-      "ignore": ["custom-properties"]
-    }],
+    "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
-    }],
+    "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"
-    }],
-  }
+    "vkui/atomic": [
+      process.env.LINT_PRECOMMIT_RUN ? null : true,
+      {
+        severity: "warning",
+      },
+    ],
+  },
 };

package/tasks/generate_scheme.js

@@ -1,13 +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 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');
+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

@@ -1,10 +1,10 @@
-const { readFileSync } = require('fs');
-const postcss = require('postcss');
-const findAnimationName = require('stylelint/lib/utils/findAnimationName');
+const { readFileSync } = require("fs");
+const postcss = require("postcss");
+const findAnimationName = require("stylelint/lib/utils/findAnimationName");
 
 function getAnimations(root) {
   const animations = {};
-  root.walkAtRules('keyframes', atrule => {
+  root.walkAtRules("keyframes", (atrule) => {
     if (animations[atrule.params]) {
       throw atrule.error(`duplicate @keyframes ${atrule.params}`);
     }
@@ -15,20 +15,22 @@ function getAnimations(root) {
 
 module.exports = ({ importFrom } = {}) => {
   const sharedAnimations = importFrom
-    ? getAnimations(postcss.parse(readFileSync(importFrom), { from: importFrom }))
+    ? getAnimations(
+        postcss.parse(readFileSync(importFrom), { from: importFrom })
+      )
     : {};
   return {
-    postcssPlugin: 'postcss-scope-keyframes',
+    postcssPlugin: "postcss-scope-keyframes",
     Once: (root) => {
       const animations = { ...sharedAnimations, ...getAnimations(root) };
-      root.walkDecls(/^animation(-name)?/, decl => {
+      root.walkDecls(/^animation(-name)?/, (decl) => {
         findAnimationName(decl.value).forEach(({ value }) => {
-          if (value !== 'none' && !animations[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

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