'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?

[ezze]

I am migrating existing web application built with react-scripts and craco to Rsbuild following this guide. The project is using LESS and CSS (LESS) modules pattern.

During a build step a receive a lot of such warnings:

File: /home/ezze/Development/sbercity-crm/frontend/src/components/button/button.module.less:1:1
  ⚠ 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo? at /home/ezze/Development/sbercity-crm/frontend/src/components/button/button.module.less:1287:26

for code snippets with :global or :local syntax like this:

@import "~antd/es/style/variable";
@import "../../variables";
@import "~antd/es/style/color/colorPalette";
@import "~antd/es/button/style/mixin";

@secondary-btn-text-color: @white;
@secondary-btn-bg-color: @secondary-color;
@secondary-btn-hover-color: color(~`colorPalette('@{secondary-btn-bg-color}', 5) `);
@secondary-btn-active-color: color(~`colorPalette('@{secondary-btn-bg-color}', 7) `);

.button {
  display: inline-flex;
  align-items: center;

  &.button-secondary {
    &:global {
      & {
        .button-variant-primary(@secondary-btn-text-color, @secondary-btn-bg-color, @secondary-btn-hover-color, @secondary-btn-active-color);
      }
    }
  }
}

or like this:

.tabs {
  :global {
    .ant-tabs-nav {
      padding: 0 1.5rem;
      margin-bottom: 0;
      border-bottom: 1px solid #e5e7eb;
      background: #fff;
      user-select: none;
    }
  }
}

At the moment, CSS seem to be built as expected. But I want to be sure that I don't miss something. What is the reason of the warning? And if it can be ignored how do I suppress it?

Here is my rsbuild.config.ts:

import { defineConfig, loadEnv } from '@rsbuild/core';
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginLess } from '@rsbuild/plugin-less';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSvgr } from '@rsbuild/plugin-svgr';
import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

const { rawPublicVars } = loadEnv({ prefixes: ['REACT_APP_'] });

const modifyLessVars: Record<string, string> = {
  '@primary-color': 'rgb(16, 127, 140)',
  '@font-family':
    "Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, " +
    "'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"
};

export default defineConfig({
  html: {
    template: './public/index.html'
  },
  output: {
    distPath: {
      root: './build'
    }
  },
  source: {
    define: {
      'process.env': JSON.stringify(rawPublicVars)
    }
  },
  server: {
    proxy: {
      '/api': {
        target: process.env.REACT_APP_PROXY_API_BASE_URL,
        changeOrigin: true,
        secure: false
      },
      '/api-ext': {
        target: process.env.REACT_APP_PROXY_API_BASE_URL,
        changeOrigin: true,
        secure: false
      }
    }
  },
  tools: {
    rspack: {
      plugins: [
        process.env.RSDOCTOR === 'true' &&
          new RsdoctorRspackPlugin({
            supports: {
              generateTileGraph: true
            }
          })
      ]
    }
  },
  plugins: [
    pluginBabel({
      babelLoaderOptions: {
        plugins: [['@babel/plugin-proposal-decorators', { version: '2023-05' }]]
      }
    }),
    pluginTypeCheck(),
    pluginReact(),
    pluginSvgr({ mixedImport: true }),
    pluginLess({
      lessLoaderOptions: {
        lessOptions: {
          modifyVars: modifyLessVars
        }
      }
    })
  ]
});

[chenjiahan]

This warning has been fixed, can you upgrade Rsbuild to the latest version and try again?

[ezze]

Thanks a lot! I confirm it's fixed. Just upgraded @rsbuild/core from 1.3.11 to 1.3.14 and @rspack/core from 1.3.6 to 1.3.8.

Seems it's fixed in @rspack/[email protected]: https://github.com/web-infra-dev/rspack/pull/10172/files