@vkontakte/vkui 4.23.0 → 4.24.0

package/tasks/styleint-atomic.js

@@ -1,59 +1,57 @@
-const path = require('path');
-const stylelint = require('stylelint');
-const selectorParser = require('postcss-selector-parser');
+const path = require("path");
+const stylelint = require("stylelint");
+const selectorParser = require("postcss-selector-parser");
 
-const ruleName = 'vkui/atomic';
+const ruleName = "vkui/atomic";
 const messages = stylelint.utils.ruleMessages(ruleName, {});
-const isPseudo = sel => sel.type === 'pseudo' || sel.parent && isPseudo(sel.parent);
+const isPseudo = (sel) =>
+  sel.type === "pseudo" || (sel.parent && isPseudo(sel.parent));
 
-module.exports = stylelint.createPlugin(
-  ruleName,
-  function () {
-    return function (root, result) {
-      const { file } = root.source.input;
-      // Only apply to component CSS, not styles/*.css
-      if (file.split(path.sep).includes('styles')) {
+module.exports = stylelint.createPlugin(ruleName, function () {
+  return function (root, result) {
+    const { file } = root.source.input;
+    // Only apply to component CSS, not styles/*.css
+    if (file.split(path.sep).includes("styles")) {
+      return;
+    }
+    const cssCmp = path.basename(file).split(".")[0];
+    root.walkRules((node) => {
+      if (node.parent.name === "keyframes") {
         return;
       }
-      const cssCmp = path.basename(file).split('.')[0];
-      root.walkRules(node => {
-        if (node.parent.name === 'keyframes') {
-          return;
+      node.selector.split(/,\s*/).forEach((sel) => {
+        let hasComponentScope = false;
+        let selTarget = "";
+        selectorParser((selectors) => {
+          selectors.walk((selector) => {
+            // exclude :not contents
+            if (isPseudo(selector)) {
+              return;
+            }
+            if (selector.type === "combinator") {
+              hasComponentScope = false;
+              selTarget = "";
+              return;
+            }
+            selTarget += String(selector);
+            if (selector.type === "class") {
+              const ruleCmp = selector.value.split(/(--|__)/g)[0];
+              hasComponentScope = hasComponentScope || ruleCmp === cssCmp;
+            }
+          });
+        }).processSync(sel);
+        if (!hasComponentScope) {
+          stylelint.utils.report({
+            ruleName,
+            node,
+            result,
+            message: `"${selTarget}" must reference .${cssCmp}`,
+          });
         }
-        node.selector.split(/,\s*/).forEach(sel => {
-          let hasComponentScope = false;
-          let selTarget = '';
-          selectorParser(selectors => {
-            selectors.walk(selector => {
-              // exclude :not contents
-              if (isPseudo(selector)) {
-                return;
-              }
-              if (selector.type === 'combinator') {
-                hasComponentScope = false;
-                selTarget = '';
-                return;
-              }
-              selTarget += String(selector);
-              if (selector.type === 'class') {
-                const ruleCmp = selector.value.split(/(--|__)/g)[0];
-                hasComponentScope = hasComponentScope || ruleCmp === cssCmp;
-              }
-            });
-          }).processSync(sel);
-          if (!hasComponentScope) {
-            stylelint.utils.report({
-              ruleName,
-              node,
-              result,
-              message: `"${selTarget}" must reference .${cssCmp}`,
-            });
-          }
-        })
       });
-    };
-  }
-);
+    });
+  };
+});
 
 module.exports.ruleName = ruleName;
-module.exports.messages = messages;
+module.exports.messages = messages;

package/tsconfig.dist.json

@@ -4,13 +4,13 @@
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": [
     "node_modules",
-    "src/**/*.test.ts", "src/**/*.test.tsx",
-    "src/**/*.spec.ts", "src/**/*.spec.tsx",
-    "src/**/*.e2e.ts", "src/**/*.e2e.tsx",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.e2e.ts",
+    "src/**/*.e2e.tsx",
     "src/testing/"
   ],
-  "files": [
-    "src/lib/jsxRuntime.d.ts",
-    "types/global.d.ts"
-  ]
+  "files": ["src/lib/jsxRuntime.d.ts", "types/global.d.ts"]
 }

package/tsconfig.json

@@ -21,7 +21,16 @@
       "@react-playwright": ["../e2e"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "e2e/**/*.ts", "e2e/**/*.tsx", "e2e/**/*.js"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "e2e/**/*.ts",
+    "e2e/**/*.tsx",
+    "e2e/**/*.js",
+    "tasks/**/*.js",
+    ".github/**/*.js",
+    "*.js"
+  ],
   "files": [
     "node_modules/jest-playwright-preset/types/global.d.ts",
     "node_modules/expect-playwright/global.d.ts",

package/types/global.d.ts

@@ -1,6 +1,6 @@
-import 'react';
+import "react";
 
-declare module 'react' {
+declare module "react" {
   interface Attributes {
     vkuiClass?: string | string[];
   }

package/unstable/index.d.ts

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

package/unstable/package.json

@@ -1,4 +1,4 @@
 {
   "main": "../dist/cjs/unstable/index.js",
   "module": "../dist/unstable/index.js"
-}
+}

package/webpack.config.js

@@ -1,27 +1,27 @@
-const path = require('path');
-const merge = require('webpack-merge');
+const path = require("path");
+const merge = require("webpack-merge");
 
-const isProduction = process.env.NODE_ENV === 'production';
-process.env.BABEL_KEEP_CSS = '1';
+const isProduction = process.env.NODE_ENV === "production";
+process.env.BABEL_KEEP_CSS = "1";
 const styleLoader = {
-  loader: 'style-loader',
+  loader: "style-loader",
   options: {
     // singleton is faster, but does not support sourcemaps
-    injectType: isProduction ? 'singletonStyleTag' : 'styleTag',
+    injectType: isProduction ? "singletonStyleTag" : "styleTag",
     attributes: {
-      class: 'vkui-style'
+      class: "vkui-style",
     },
   },
 };
 
 const config = {
   entry: {
-    vkui: './src/vkui.js',
+    vkui: "./src/vkui.js",
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js',
-    libraryTarget: 'umd',
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].js",
+    libraryTarget: "umd",
     globalObject: `typeof self !== 'undefined' ? self : this`,
   },
   module: {
@@ -29,54 +29,54 @@ const config = {
       {
         test: /\.[jt]sx?$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
+        loader: "babel-loader",
       },
       {
         test: /\.(jpeg|jpg|png|woff|woff2|svg|otf)$/,
         use: {
-          loader: 'file-loader',
+          loader: "file-loader",
           options: {
             esModule: false,
-            outputPath: 'static/',
-            name: '[name].[hash:8].[ext]',
+            outputPath: "static/",
+            name: "[name].[hash:8].[ext]",
           },
         },
       },
       {
         test: /\.css$/,
         exclude: /styleguide/,
-        use: [styleLoader, 'css-loader', 'postcss-loader']
+        use: [styleLoader, "css-loader", "postcss-loader"],
       },
       {
         test: /\.css$/,
         include: /styleguide/,
-        use: [styleLoader, 'css-loader']
+        use: [styleLoader, "css-loader"],
       },
     ],
   },
   resolve: {
-    extensions: ['.ts', '.tsx', '.js'],
+    extensions: [".ts", ".tsx", ".js"],
   },
-  devtool: 'source-map',
+  devtool: "source-map",
   stats: {
     children: false,
   },
   externals: [
     {
-      'react': 'react',
-      'prop-types': 'prop-types',
-      'react-dom': 'react-dom',
+      react: "react",
+      "prop-types": "prop-types",
+      "react-dom": "react-dom",
     },
     /@vkontakte\/icons/i,
   ],
 };
 
 const devConfig = {
-  mode: 'development',
+  mode: "development",
 };
 
 const prodConfig = {
-  mode: 'production',
+  mode: "production",
 };
 
 module.exports = isProduction

package/webpack.styles.config.js

@@ -1,61 +1,64 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const path = require('path');
-const { defaultSchemeId } = require('./package.json');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
+const { defaultSchemeId } = require("./package.json");
 
-process.env.BABEL_KEEP_CSS = '1';
+process.env.BABEL_KEEP_CSS = "1";
 
 module.exports = {
   // CSS is optimized via postcss, we dont care about JS
-  mode: 'none',
+  mode: "none",
   // TODO: Once CSS is modular, replace
   // './src/styles/components.css' -> './src/index.ts'
   // './src/styles/unstable.css' -> './src/unstable/index.ts'
   entry: {
-    stable: ['./src/styles/themes.css', './src/styles/components.css'],
-    unstable: './src/styles/unstable.css',
-    components: './src/styles/components.css',
+    stable: ["./src/styles/themes.css", "./src/styles/components.css"],
+    unstable: "./src/styles/unstable.css",
+    components: "./src/styles/components.css",
     default_scheme: `./src/styles/${defaultSchemeId}.css`,
+    fonts: "./src/fonts/fonts.css",
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: '[name].js.tmp',
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].js.tmp",
   },
   module: {
     rules: [
       {
         test: /\.[jt]sx?$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
+        loader: "babel-loader",
       },
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
+        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
+      },
+      {
+        test: /\.woff|woff2$/,
+        use: ["file-loader"],
       },
     ],
   },
   optimization: {
     splitChunks: {
-      chunks: chunk => ['stable', 'unstable'].includes(chunk.name),
+      chunks: (chunk) => ["stable", "unstable"].includes(chunk.name),
       cacheGroups: {
         // capture all common deps between stable & unstable
         vkui: {
-          name: 'vkui',
-          test: (_, chunks) => chunks.some(chunk => chunk.name === 'stable'),
-        }
+          name: "vkui",
+          test: (_, chunks) => chunks.some((chunk) => chunk.name === "stable"),
+        },
       },
-    }
+    },
   },
   resolve: {
-    extensions: ['.ts', '.tsx', '.js'],
+    extensions: [".ts", ".tsx", ".js"],
   },
-  devtool: 'source-map',
-  plugins: [
-    new MiniCssExtractPlugin({ filename: '[name].css' }),
-  ],
+  devtool: "source-map",
+  plugins: [new MiniCssExtractPlugin({ filename: "[name].css" })],
   stats: {
     all: false,
     assets: true,
     errors: true,
     warnings: true,
-  }
+  },
 };