@tramvai/cli 5.53.94 → 5.53.112

package/src/library/webpack/blocks/css.ts

@@ -1,11 +1,12 @@
-import applyOrReturn from '@tinkoff/utils/function/applyOrReturn';
 import path from 'path';
 import type Config from 'webpack-chain';
 import ExtractCssChunks from 'mini-css-extract-plugin';
 import { createGenerator } from '@tinkoff/minicss-class-generator';
+
 import { safeRequire } from '../../../utils/safeRequire';
 import type { ConfigManager } from '../../../config/configManager';
 import type { CliConfigEntry } from '../../../typings/configEntry/cli';
+import { getActualTarget, getBrowserslistTargets } from '../utils/browserslist';
 
 const cssLocalIdentNameDevDefault = '[name]__[local]_[minicss]';
 const cssLocalIdentNameProdDefault = '[minicss]';
@@ -21,8 +22,9 @@ interface Options {
 export const cssWebpackRulesFactory =
   (configManager: ConfigManager<CliConfigEntry>, options: Options = {}) =>
   (config: Config) => {
-    const { env, sourceMap, buildType } = configManager;
+    const { env, sourceMap, buildType, experiments, target } = configManager;
     const {
+      rootDir,
       postcss: {
         config: postcssConfig,
         cssLocalIdentName = env === 'production'
@@ -31,6 +33,9 @@ export const cssWebpackRulesFactory =
         cssModulePattern,
       },
     } = configManager;
+    const isServer = configManager.buildType === 'server';
+    const actualTarget = getActualTarget(target, isServer);
+    const browsersListTargets = getBrowserslistTargets(rootDir, actualTarget);
     const localIdentName = options.localIdentName ?? cssLocalIdentName;
 
     const configCssLoader = (cfg) => {
@@ -73,17 +78,33 @@ export const cssWebpackRulesFactory =
         typeof postcssConfig === 'undefined'
       ) ?? {};
 
-    const postcssOptionsFn = (...args) => ({
-      ...postcssCfg,
-      plugins: [
-        require('postcss-modules-tilda'),
-        require('postcss-modules-values-replace')({ importsAsModuleRequests: true }),
+    // https://github.com/webpack-contrib/postcss-loader/blob/master/src/config.d.ts
+    const postcssOptionsFn = (loaderContext: any) => {
+      const isFnConfig = typeof postcssCfg === 'function';
+      // TODO: async config fn support?
+      const defaultConfig = isFnConfig ? postcssCfg(loaderContext) : postcssCfg;
+      // eslint-disable-next-line no-nested-ternary
+      const defaultPlugins = defaultConfig.plugins ? defaultConfig.plugins : [];
+
+      return {
+        config: false,
+        ...defaultConfig,
         // TODO: придумать как прокинуть настройки browserslist в autoprefixer - сейчас autoprefixer добавляется в самом приложении и из
         // конфига нет возможности задавать динамический env в зависимости от сборки. Подсунуть в сам autoprefixer после его инициализации тоже
         // тоже не получится - https://github.com/postcss/autoprefixer/blob/10.3.1/lib/autoprefixer.js#L108
-        ...(applyOrReturn(args, postcssCfg.plugins) || []),
-      ],
-    });
+        plugins: Array.isArray(defaultPlugins)
+          ? [
+              require('postcss-modules-tilda'),
+              require('postcss-modules-values-replace')({ importsAsModuleRequests: true }),
+              ...defaultPlugins,
+            ]
+          : {
+              'postcss-modules-tilda': {},
+              'postcss-modules-values-replace': { importsAsModuleRequests: true },
+              ...defaultPlugins,
+            },
+      };
+    };
 
     // otherwise postcss-loader will use cosmiconfig to resolve postcss configuration file
     // https://github.com/webpack-contrib/postcss-loader/blob/6f470db420f6febbea729080921050e8fe353226/src/index.js#L38
@@ -93,12 +114,27 @@ export const cssWebpackRulesFactory =
       .rule('css')
       .test(/\.css$/)
       .batch(configCssLoader)
-      .use('postcss')
-      .loader('postcss-loader')
-      .options({
-        sourceMap,
-        postcssOptions: postcssOptionsFn,
-      });
+      .when(
+        experiments.lightningcss,
+        (cfg) => {
+          const lightningcss = require('lightningcss');
+
+          return cfg
+            .use('lightningcss')
+            .loader('lightningcss-loader')
+            .options({
+              options: {
+                implementation: lightningcss,
+                targets: browsersListTargets,
+              },
+            });
+        },
+        (cfg) =>
+          cfg.use('postcss').loader('postcss-loader').options({
+            sourceMap,
+            postcssOptions: postcssOptionsFn,
+          })
+      );
   };
 
 export default cssWebpackRulesFactory;

package/src/library/webpack/utils/browserslist.ts

@@ -0,0 +1,29 @@
+import envTargets from '@tinkoff/browserslist-config';
+import browserslist from 'browserslist';
+
+import type { Target } from '../../../typings/target';
+
+export function getBrowserslistTargets(rootDir: string, actualTarget: Target) {
+  const browserslistConfigRaw = browserslist.findConfig(rootDir);
+
+  // Set defaults if the explicit config for browserslist was not found or the config does not contain the necessary targets
+  const browserslistQuery =
+    browserslistConfigRaw?.[actualTarget] ?? envTargets[actualTarget] ?? envTargets.defaults;
+
+  return browserslist(browserslistQuery, {
+    mobileToDesktop: true,
+    env: actualTarget,
+  });
+}
+
+export function getActualTarget(target, isServer) {
+  let actualTarget = target;
+
+  if (!target) {
+    if (isServer) {
+      actualTarget = 'node';
+    }
+  }
+
+  return actualTarget;
+}

package/src/library/webpack/utils/transpiler.ts

@@ -8,6 +8,7 @@ import { babelConfigFactory } from '../../babel';
 import type { Env } from '../../../typings/Env';
 import type { Target } from '../../../typings/target';
 import type { CliConfigEntry, ReactCompilerOptions } from '../../../typings/configEntry/cli';
+import { getActualTarget, getBrowserslistTargets } from './browserslist';
 
 export type TranspilerConfig = {
   env: Env;
@@ -84,24 +85,8 @@ export const getTranspilerConfig = (
 Just check or add configuration to your tsconfig file and remove alias from tramvai.json`);
   }
 
-  let actualTarget = target;
-
-  if (!target) {
-    if (isServer) {
-      actualTarget = 'node';
-    }
-  }
-
-  const browserslistConfigRaw = browserslist.findConfig(rootDir);
-
-  // Set defaults if the explicit config for browserslist was not found or the config does not contain the necessary targets
-  const browserslistQuery =
-    browserslistConfigRaw?.[actualTarget] ?? envTargets[actualTarget] ?? envTargets.defaults;
-
-  const browsersListTargets = browserslist(browserslistQuery, {
-    mobileToDesktop: true,
-    env: actualTarget,
-  });
+  const actualTarget = getActualTarget(target, isServer);
+  const browsersListTargets = getBrowserslistTargets(rootDir, actualTarget);
 
   return {
     isServer,

package/src/schema/autogeneratedSchema.json

@@ -846,6 +846,10 @@
               },
               "additionalProperties": false
             },
+            "lightningcss": {
+              "title": "experimental css building by [lightningcss](https://lightningcss.dev/)",
+              "type": "boolean"
+            },
             "transpilation": {
               "title": "experimental settings for code transpilation",
               "default": {},
@@ -1325,23 +1329,23 @@
                         "dotAll": {
                           "type": "boolean"
                         },
-                        "__@match@8175": {
+                        "__@match@8181": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@replace@8177": {
+                        "__@replace@8183": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@search@8180": {
+                        "__@search@8186": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@split@8182": {
+                        "__@split@8188": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@matchAll@8184": {
+                        "__@matchAll@8190": {
                           "type": "object",
                           "additionalProperties": false
                         }
@@ -1784,6 +1788,10 @@
               },
               "additionalProperties": false
             },
+            "lightningcss": {
+              "title": "experimental css building by [lightningcss](https://lightningcss.dev/)",
+              "type": "boolean"
+            },
             "transpilation": {
               "title": "experimental settings for code transpilation",
               "default": {},
@@ -2156,23 +2164,23 @@
                         "dotAll": {
                           "type": "boolean"
                         },
-                        "__@match@8175": {
+                        "__@match@8181": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@replace@8177": {
+                        "__@replace@8183": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@search@8180": {
+                        "__@search@8186": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@split@8182": {
+                        "__@split@8188": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@matchAll@8184": {
+                        "__@matchAll@8190": {
                           "type": "object",
                           "additionalProperties": false
                         }
@@ -2615,6 +2623,10 @@
               },
               "additionalProperties": false
             },
+            "lightningcss": {
+              "title": "experimental css building by [lightningcss](https://lightningcss.dev/)",
+              "type": "boolean"
+            },
             "transpilation": {
               "title": "experimental settings for code transpilation",
               "default": {},
@@ -2987,23 +2999,23 @@
                         "dotAll": {
                           "type": "boolean"
                         },
-                        "__@match@8175": {
+                        "__@match@8181": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@replace@8177": {
+                        "__@replace@8183": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@search@8180": {
+                        "__@search@8186": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@split@8182": {
+                        "__@split@8188": {
                           "type": "object",
                           "additionalProperties": false
                         },
-                        "__@matchAll@8184": {
+                        "__@matchAll@8190": {
                           "type": "object",
                           "additionalProperties": false
                         }

package/src/typings/configEntry/cli.ts

@@ -95,6 +95,11 @@ export interface Experiments {
    */
   minicss: MinicssExperiments;
 
+  /**
+   * @title experimental css building by [lightningcss](https://lightningcss.dev/)
+   */
+  lightningcss?: boolean;
+
   /**
    * @title experimental settings for code transpilation
    * @default {}

package/src/utils/commands/dependencies/getLatestPackageVersion.ts

@@ -3,6 +3,7 @@ import latestVersion from 'latest-version';
 
 export const getLatestPackageVersion = async (
   packageName: string,
+  registryUrl: string,
   version = 'latest',
   silent = false
 ) => {
@@ -11,7 +12,9 @@ export const getLatestPackageVersion = async (
     : ora(`Resolving the highest version satifying to ${version}`).start();
 
   try {
-    const result = await latestVersion(packageName, { version });
+    // underlying `registry-url` package uses only `.npmrc` file to resolve registry URL
+    // @ts-expect-error uncomplete type definition, `registryUrl` is supported
+    const result = await latestVersion(packageName, { version, registryUrl });
 
     return result;
   } finally {

package/src/utils/commands/dependencies/packageHasVersion.ts

@@ -1,8 +1,13 @@
 import latestVersion from 'latest-version';
 
-export const packageHasVersion = async (packageName: string, version: string): Promise<boolean> => {
+export const packageHasVersion = async (
+  packageName: string,
+  version: string,
+  registryUrl: string
+): Promise<boolean> => {
   try {
-    await latestVersion(packageName, { version });
+    // @ts-expect-error uncomplete type definition, `registryUrl` is supported
+    await latestVersion(packageName, { version, registryUrl });
     return true;
   } catch (e) {
     return false;