[WIP] Migrate project from PostCSS to Lightning CSS

[Copilot]

Migration Plan: PostCSS to Lightning CSS

• Update package.json
  • Remove PostCSS dependencies (postcss, postcss-cli, postcss-nesting, cssnano)
  • Add lightningcss-cli dependency
  • Add lightningcss dependency (needed for Vite)
  • Update build-css script to use lightningcss
  • Update build-css:min script to use lightningcss with minification
• Update vite.config.js
  • Remove postcss-nesting import
  • Replace postcss configuration with Lightning CSS transformer
  • Configure nesting support in lightningcss options
• Test the changes
  • Build CSS files with new scripts
  • Run the development server to verify Vite config
  • Verify the build completes successfully
  • Run linting to ensure no regressions

Original prompt

Objective

Migrate the project from PostCSS to Lightning CSS for faster CSS processing and built-in modern CSS features support.

Changes Required

1. Update package.json

• Remove the following devDependencies:

  • postcss
  • postcss-cli
  • postcss-nesting
  • cssnano

• Add the following devDependencies:

  • lightningcss-cli (latest version)

• Update build scripts to use Lightning CSS instead of PostCSS:

  • build-css: Change from postcss src/index.css --use postcss-nesting > dist/index.css to lightningcss --nesting --bundle --targets '>= 0.25%' src/index.css -o dist/index.css
  • build-css:min: Change from postcss src/index.css --use cssnano postcss-nesting > dist/index.min.css to lightningcss --nesting --bundle --minify --targets '>= 0.25%' src/index.css -o dist/index.min.css

2. Update vite.config.js

Replace the PostCSS configuration with Lightning CSS. The current file at vite.config.js uses:

import postcssNesting from 'postcss-nesting'

css: {
    postcss: {
        plugins: [
            postcssNesting
        ],
    },
}

Change it to use Lightning CSS with Vite's built-in support:

css: {
    transformer: 'lightningcss',
    lightningcss: {
        drafts: {
            nesting: true
        }
    }
}

Remove the import postcssNesting from 'postcss-nesting' line.

3. CSS Files

The CSS files in src/index.css and example/index.css use CSS nesting which is already supported natively by Lightning CSS - no changes needed to the CSS syntax.

Context

• Lightning CSS is a faster CSS parser, transformer, and minifier written in Rust
• It has built-in support for CSS nesting (currently used via postcss-nesting)
• It provides built-in minification (replacing cssnano)
• This migration is based on the pattern used in @substrate-system/stream

Files to Modify

1. package.json - Update dependencies and build scripts
2. vite.config.js - Replace PostCSS configuration with Lightning CSS

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	lightningcss-cli@​1.31.1
	lightningcss@​1.31.1

View full report