ShopperCove
Menu
All writingBlogTopicsCategoriesAboutRSS
Blog
Categories
Observability & SRE62All categories
Topics
sre111localhost lab102performance70python58javascript47bundle size36benchmarking35node.js35web development21typescript19benchmark16content creation15All topics
About
Loading article…

ShopperCove

Hands-on notes on developer tools, written after the tool has actually been run.

All writingBlogCategoriesTopicsAboutPrivacyRSS

© 2026 ShopperCove

On this page

  1. What I tested
  2. Is Lightning CSS faster than PostCSS?
  3. What do you lose leaving PostCSS?
  4. Should you leave PostCSS for Lightning CSS?
  5. Sources
  6. Related
  1. Blog

Should You Leave PostCSS? 3ms vs 106ms

Lightning CSS 1.33.0 vs PostCSS 8.5.29 + Autoprefixer 10.6.1 + cssnano 6.1.2 on a 76,864-byte CSS fixture: medians 3.16 ms vs 105.75 ms (~33x). Outputs 70498 vs 68474 B. Leave Autoprefixer+cssnano-only stacks for Lightning; keep PostCSS for plugins Lightning does not replace.

5 October 2026·4 min read

Summary
On this page
  1. What I tested
  2. Is Lightning CSS faster than PostCSS?
  3. What do you lose leaving PostCSS?
  4. Should you leave PostCSS for Lightning CSS?
  5. Sources
  6. Related

On a 77 KB CSS fixture (80 generated card stylesheets flattened into one file), Lightning CSS 1.33.0 took a median 3.2 ms to minify with vendor targets. PostCSS 8.5.29 with Autoprefixer 10.6.1 and cssnano 6.1.2 took 106 ms. Same machine, same input, library APIs for each pipeline.

Short answer: leave a PostCSS Autoprefixer + cssnano stack for Lightning CSS if your CSS is modern enough for Lightning's targets and you want the minify+prefix job in a few milliseconds. Keep PostCSS when you depend on PostCSS plugins Lightning does not replace. No affiliate links in this post.

What I tested

  • Machine: 8 vCPU Intel Xeon / 15 GB RAM Linux cloud box, Node 20.19.2, tested 5 Oct 2026 (about 23:05 to 23:15 IST). Shared box; tools interleaved each round.
  • Fixture: 80 synthetic .card-N stylesheets with flex/grid, gradients, user-select, appearance, backdrop-filter, color-mix, container queries, and media queries, concatenated to fixture.css (76,864 bytes). No Sass, no Tailwind, no CSS Modules.
  • Tools: lightningcss 1.33.0 (transform with minify: true, targets chrome 90 / firefox 90 / safari 14). PostCSS 8.5.29 + autoprefixer 10.6.1 (> 0.5%, last 2 versions, not dead) + cssnano 6.1.2 (preset: 'default').
  • Timing: five interleaved warm runs after one warmup each. Median wall-clock of the transform/process call only.
  • Output sizes: Lightning CSS 70,498 B; PostCSS stack 68,474 B. PostCSS was about 3% smaller here; Lightning was about 33x faster.
  • One surprise: prefix sets differed. Lightning emitted more -webkit- hits on this fixture (240) while PostCSS added -moz-appearance pairs (160 moz / 160 webkit counted). Speed is not the only diff.
  • Not tested: Sass/Less, Tailwind v4 pipeline, PostCSS plugins beyond Autoprefixer+cssnano, Lightning CSS bundler @import resolve on many files, source maps, visual regression, Windows/macOS, Vite css.transformer switch on a real app.

Is Lightning CSS faster than PostCSS?

PipelineMedianRuns (ms)Output bytes
Lightning CSS 1.33.03.2 ms3.5 / 3.0 / 3.2 / 3.0 / 3.270,498
PostCSS 8 + Autoprefixer + cssnano 6106 ms134 / 107 / 106 / 103 / 9468,474

On this fixture Lightning CSS was about 33x faster than the PostCSS Autoprefixer + cssnano path. PostCSS still won raw size by about 2 KB. If your CI CSS step is already under 100 ms, the absolute win is small; if you run PostCSS on large design-system CSS repeatedly, the multiplier matters.

For browser-facing CSS changes on this site, see the Chrome 155 CSS notes and the Firefox 157 CSS notes. Those are browser releases, not toolchain switches; this post is the build-pipeline decision.

What do you lose leaving PostCSS?

PostCSS is a plugin host. Autoprefixer + cssnano is only one common pair. Teams that rely on postcss-preset-env, custom polyfills, CSS Modules transforms, or design-token plugins may have no Lightning drop-in. Lightning CSS covers nesting, minification, and many prefix targets, but it is not a PostCSS-compatible plugin runner.

Also match the CSS tool to the bundler. Vite can use Lightning CSS as the transformer; other stacks still wire PostCSS by default. Swapping only minify while leaving a long PostCSS plugin list elsewhere does not remove the slow path. The Vite 8.3.2 post is the closer next step if your app is Vite-first.

Should you leave PostCSS for Lightning CSS?

SituationMy pick
PostCSS is only Autoprefixer + cssnano for production CSSPrefer Lightning CSS; re-time CI
Already on Vite with Lightning CSS enabledStay; do not add a second PostCSS minify pass
You need PostCSS plugins Lightning does not replaceKeep PostCSS for those files; split the pipeline if needed
You care more about smallest bytes than build timeCompare both outputs (and gzip); PostCSS was slightly smaller here
Large Sass or Tailwind-specific PostCSS chainMeasure that chain; this fixture was plain CSS

Bottom line: on a 77 KB CSS fixture, Lightning CSS took 3.2 ms and PostCSS + Autoprefixer + cssnano took 106 ms. Who should not switch yet: teams blocked on PostCSS-only plugins. Everyone else still running Autoprefixer + cssnano as the whole pipeline should measure their own CSS the same way before rewriting the config.

How this was made: I generated the stylesheets, ran both pipelines on the ShopperCove test box, and kept the timing JSON; the write-up was drafted with AI help and checked against that output.

Sources

  • 01lightningcss.dev/docs.html
  • 02github.com/parcel-bundler/lightningcss
  • 03postcss.org/docs/
  • 04github.com/postcss/autoprefixer
  • 05cssnano.cohttps://cssnano.co/
  • 06npmjs.com/package/lightningcss

Related

  • 01shoppercove.com/blog/vite-plus-1-0-unified-toolchain-october-2026
  • 02shoppercove.com/blog/biome-vs-eslint-prettier
  • 03shoppercove.com/blog/swc-vs-esbuild-babel
  • 04shoppercove.com/blog/rspack-vs-webpack
  • 05shoppercove.com/blog/oxfmt-0-72-native-markdown-formatter-prettier-parity-october-2026
lightning csspostcssautoprefixercssnanobenchmarkingminifyweb performancebuild tools

Lab evidence

What I found running this

Hands-on on ShopperCove box 5 Oct 2026 ~23:05-23:15 IST (8 vCPU Intel Xeon / 15 GB shared Linux, Node 20.19.2). Fixture: 80 synthetic card CSS files flattened to fixture.css (76864 bytes) with flex/grid, gradients, user-select, appearance, backdrop-filter, color-mix, container queries. Versions: lightningcss 1.33.0 (transform minify true, targets chrome 90 / firefox 90 / safari 14); postcss 8.5.29 + autoprefixer 10.6.1 (>0.5%, last 2 versions, not dead) + cssnano 6.1.2 default preset. Wall medians (5 interleaved after warmup): Lightning CSS 3.160 ms (3.468/2.986/3.160/2.972/3.239); PostCSS stack 105.752 ms (133.693/106.565/105.752/102.629/94.267). Output bytes: Lightning 70498; PostCSS 68474. Prefix counts on outputs: Lightning webkit 240 / moz 0; PostCSS webkit 160 / moz 160. Raw: /workspace/bench-css/res-css.json. Not tested: Sass/Less, Tailwind, other PostCSS plugins, Lightning multi-file @import bundling, source maps, visual regression, Windows/macOS, real Vite css.transformer migrate. No affiliate.

Notes when a lab post goes up

Occasional email for new hands-on reviews. No sequence and no sponsors.

Keep reading

  • SVGO vs SVGR: 34ms / 35% Smaller SVG Set

    svgo 4.1.0 vs @svgr/core 8.1.0 on 20 verbose 128×128 SVGs (18,990 B). Warm medians (7 rounds after 1 warm-up): SVGO 34 ms / 12,410 B; SVGR JSX 35 ms / 17,620 B; SVGR+plugin-svgo 63 ms / 12,920 B. Fixture /workspace/bench-svgo-svgr/.

    Hands-on6 Oct 20264 min read

  • Should You Leave Terser? 824ms vs 41ms

    Terser 5.51.2 vs esbuild 0.28.2 vs SWC 1.16.13 minify on a 403,418-byte unminified ESM bundle (800 modules): medians 824 ms / 41 ms / 70 ms. Output sizes 219492 / 207619 / 199712 B. Leave Terser if you only need fast minify; keep it for Terser-only compress options.

    Summary5 Oct 20265 min read

  • find-up vs locate-path: 47 µs Sync vs 596 µs Async

    Hands-on6 Oct 20268 min read