Use lightningcss to process CSS

[OEvgeny]

Fixes #

Changelog Entry

(no changelog entry for build change)

Description

This configures tsup to process CSS via lightningcss package instead of the esbuild native css processing.

Design

The ebuild's CSS processing is still kind of experimental and not as flexible as needed for production usage.

The main concern is that it doesn't allow configuring generated class names prefix. When minified, ESbuild will use the shortest possible name for any class in the bundle. This becomes a problem when there are two different bundles build by ESbuild on the same page as their classes collide.

On the other hand LightningCSS is a tool developed to build and bundle CSS, so it is more flexible and it covers our use-cases well.

We use the package via unplugin-lightningcss which is a rather simple universal bundler plugin. Given I've already contributed a fix back to the package for the proper CSS modules support, and the code of the plugin is rather simple, I don't see any risks for long term maintenance of such approach.

Specific Changes

• tweaked build to include the new plugin for CSS processing and exclude everything we don't need
  • Svelte support as we don't use Svelte
  • PostCSS support as we now use a dedicated CSS processing pipeline
• removed previous workarounds
• cleaned-up derivative configurations, moved CSS preprocessing to base configuration

-

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[Copilot]

Pull Request Overview

This PR implements the use of lightningcss to process CSS across various build configurations and streamlines the TSUP configurations.

• Introduces the lightningCssPlugin in tsup.base.config.ts and adds its dependency in package.json.
• Removes the custom CSS loader configuration in several tsup.config.ts files in favor of the css plugin.
• Adjusts the plugin order and disables legacy plugins for consistency.

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
tsup.base.config.ts	Adds lightningcss plugin, introduces disablePlugin helper, and updates ESBuild plugin arrays.
packages/fluent-theme/tsup.config.ts	Removes custom CSS loader in favor of esbuildPlugins and standardizes configuration.
packages/fluent-theme/src/components/theme/Theme.module.css	Removes the :global block to simplify and reduce global CSS rules.
packages/component/tsup.config.ts	Removes the CSS loader override to rely solely on esbuildPlugins for processing.
packages/bundle/tsup.config.ts	Simplifies esbuildPlugins configuration by removing unnecessary spread of base plugins.
package.json	Adds the unplugin-lightningcss dependency for CSS processing.

Comments suppressed due to low confidence (6)

packages/component/tsup.config.ts:17

• Consider adding documentation or comments explaining the removal of the custom CSS loader override to clarify that CSS processing is now exclusively handled by the esbuildPlugins.

],

packages/fluent-theme/src/components/theme/Theme.module.css:1

• [nitpick] Verify that the removal of the previous :global block containing unused global class selectors is intentional and that all required global styles remain applied.

:global(.webchat-fluent).theme {

tsup.base.config.ts:17

• Confirm that disabling the plugin by overriding its setup function with an immediately resolved promise is the intended behavior and does not suppress any necessary initialization.

plugin.setup = () => Promise.resolve();

tsup.base.config.ts:85

• [nitpick] Ensure that the ordering of 'cssPlugin' in the ESBuild plugins array is correct and does not inadvertently interfere with other plugins' processing steps.

cssPlugin

packages/fluent-theme/tsup.config.ts:42

• Review the removal of the '.css': 'local-css' loader configuration to ensure that the lightningcss plugin handles all necessary CSS transformations as expected.

esbuildPlugins: [

packages/bundle/tsup.config.ts:41

• Confirm that removing the spread of baseConfig.esbuildPlugins in favor of a single plugin is intentional and does not lead to the omission of other necessary plugin functionalities.

esbuildPlugins: [resolveCognitiveServicesToES2015],