# Add support for Lighning CSS

**URL:** <https://zola.discourse.group/t/add-support-for-lighning-css/1756>\
**Category:** Feature requests\
**Created:** [May 26, 2023, 12:46pm UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756 "2023-05-26T12:46:10Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![kytta](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/kytta/32/1437_2.png) [@kytta](https://zola.discourse.group/u/kytta)\
**Post date:** [May 26, 2023, 12:46pm UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/1 "2023-05-26T12:46:10Z")

</div>

[There were already requests for PostCSS support](https://zola.discourse.group/t/add-postcss-support/556), but keats declined it as not being Rust-based, which is a good argument.

Well, let me introduce you all to [Lightning CSS](https://lightningcss.dev/). It’s a CSS powerhouse, which can bundle, transform, and minify CSS and replace 30-ish PostCSS plugins. The most important feature for everyone would be auto-prefixing, I suppose. It can also generate source maps (including from already generated maps), which will make it a good addition to Zola’s CSS pipeline, perhaps even replace it, since one can extend its functionality with custom Visitors.

The best thing: It’s written in Rust and is available as a crate. I really urge you to look into this, because I think this is a better option than interfacing with or bootstrapping Node, or whatever nonsense it is that others do 😛

---

<div class="post-metadata">

**Author:** ![kytta](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/kytta/32/1437_2.png) [@kytta](https://zola.discourse.group/u/kytta)\
**Post date:** [July 17, 2023, 7:20pm UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/2 "2023-07-17T19:20:00Z")

</div>

[I have now tried it out in a fork](https://github.com/getzola/zola/compare/master...kytta:zola:lightning-css). The tests run fine, and I could run it on my personal website without any hiccups 👍

---

<div class="post-metadata">

**Author:** ![bryantbiggs](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/bryantbiggs/32/1068_2.png) [@bryantbiggs](https://zola.discourse.group/u/bryantbiggs)\
**Post date:** [August 25, 2023, 3:41pm UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/3 "2023-08-25T15:41:38Z")

</div>

This looks quite promising - @keats what are your thoughts? It seems to align with some of your past comments (which I appreciate and align with) - doesn’t pull in node, still fits into the single binary concept

---

<div class="post-metadata">

**Author:** ![kytta](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/kytta/32/1437_2.png) [@kytta](https://zola.discourse.group/u/kytta)\
**Post date:** [August 26, 2023, 10:37am UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/4 "2023-08-26T10:37:49Z")

</div>

To give this even more weight: Andrey Sitnik, the creator of PostCSS, [urges others to start using Lightning CSS](https://www.youtube.com/watch?v=R9f3qOpJYXg&t=1253s) instead, too 🙂

---

<div class="post-metadata">

**Author:** ![kytta](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/kytta/32/1437_2.png) [@kytta](https://zola.discourse.group/u/kytta)\
**Post date:** [December 9, 2023, 3:37pm UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/5 "2023-12-09T15:37:05Z")

</div>

I have just now realized that the development does not happen on `master`, but on `next` and have updated the commits accordingly: [compare/`next...lightning-css`](https://github.com/getzola/zola/compare/next...kytta:zola:lightning-css)

@keats is there any interest in this becoming a part of Zola?

---

<div class="post-metadata">

**Author:** ![spence](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/spence/32/1022_2.png) [@spence](https://zola.discourse.group/u/spence)\
**Post date:** [December 9, 2023, 5:34pm UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/6 "2023-12-09T17:34:17Z")

</div>

Does this pass all the tests? It might be better to just open a PR and continue the discussion there.

---

<div class="post-metadata">

**Author:** ![kytta](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/kytta/32/1437_2.png) [@kytta](https://zola.discourse.group/u/kytta)\
**Post date:** [December 10, 2023, 9:41pm UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/7 "2023-12-10T21:41:02Z")

</div>

The tests needed a small adjustment, but they pass. I decided to follow the “do not create a PR adding a new feature without discussing it first” rule 😄

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [December 12, 2023, 8:51am UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/8 "2023-12-12T08:51:35Z")

</div>

Are there issues doing sass → lightning? Eg some syntax that might not be valid in Sass.

Either way which part of it is appealing to people? The minifying, the vendor prefixes (is that still a thing now?) or the syntax lowering? I’m assuming we will not add configuration options for it in `config.toml` but it should still be a configuration option to have it enabled.

---

<div class="post-metadata">

**Author:** ![kytta](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/kytta/32/1437_2.png) [@kytta](https://zola.discourse.group/u/kytta)\
**Post date:** [December 12, 2023, 9:26am UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/9 "2023-12-12T09:26:33Z")

</div>

> Are there issues doing sass → lightning? Eg some syntax that might not be valid in Sass.

AFAIK, grass outputs valid CSS, and Ligthning parses and rewrites valid CSS, so no issues there.

> Either way which part of it is appealing to people?

1. Better minifying (in comparison to Sass, esbuild, cssnano)
2. Support for newer CSS features (colours, ,ath, etc.) and CSS modules, and the backport of those to the browsers matching the `defaults` Browserslist query. This is basically what many people who askes for PostCSS wanted (excluding those, who were _actually_ asking for Tailwind)

> I’m assuming we will not add configuration options for it in `config.toml` but it should still be a configuration option to have it enabled.

Valid point. I think, for now, if `compile_sass` is off, the CSS files remain untouched. It would make sense to use Lightning CSS on those, too, and have a separate config setting, like `compile_css` or smth…

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [December 12, 2023, 2:58pm UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/10 "2023-12-12T14:58:28Z")

</div>

Yeah we can bikeshed the name to make sense and be better than `css_prefix_vendor_and_minify = true`. Maybe minify should be a separate option. Eg `css_prefix_vendor` and `minify_css` being 2 different options

---

<div class="post-metadata">

**Author:** ![kytta](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/kytta/32/1437_2.png) [@kytta](https://zola.discourse.group/u/kytta)\
**Post date:** [February 25, 2024, 11:44pm UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/11 "2024-02-25T23:44:42Z")

</div>

I’d propose the following new configuration parameters:

- `transpile_css` — when set to “true”, the CSS files will be transformed using Lightning CSS. This allows you to use modern CSS features and future syntax in older browsers
  - `transpile_css_target` — browser versions to compile CSS for, as a valid [Browserslist](https://browsersl.ist/) string
    - (although we can just use `defaults`, which are pretty good)

- `minify_css` — when set to “true”, the generated CSS files are minified

Transpiling and minifying can be done separately. Transpilation/prefixing happens at `minify()` (yes, counter-intuitive, but this one refers to optimization of queries), while minification happens at `to_css()`

---

<div class="post-metadata">

**Author:** ![BobRocke](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/bobrocke/32/1439_2.png) [@BobRocke](https://zola.discourse.group/u/BobRocke)\
**Post date:** [December 3, 2025, 9:32pm UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/12 "2025-12-03T21:32:32Z")

</div>

I’m coming to this topic, and Zola, a little late. But LightningCSS looks like a great addition to Zola.

As CSS adds features that reduce the need for SCSS/SASS, a first-class CSS, Rust-based option to PostCSS would be great.

Has its addition been ruled out?

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [December 4, 2025, 8:51am UTC](https://zola.discourse.group/t/add-support-for-lighning-css/1756/13 "2025-12-04T08:51:27Z")

</div>

I think CSS has made huge progress since Zola started (where Sass was kinda mandatory). I can see a future where Sass support will be optional and we would use LightningCSS instead. There are lots of upcoming breaking changes though (new syntax highlighter, new version of Tera) so it would be done after those
