We lost so much when dropping Sass for PostCSS.

CSS built-in nesting is awkward, static variables can be useful actually, and what's the point of dropping a consistent API with good DX if we're still transforming our stylesheets anyways?

Chaining together interoperable PostCSS modules to accomplish half of what Sass can do is nearly impossible.

#CSS #Sass #PostCSS #WebDev

After reading this, checked my existing styling as processed through autoprefixer, found the few vendor prefixes that had been added, and manually added them to my styling — so it now doesn’t require any additional tools for cross-browser compatibility.

https://weser.io/blog/vendor-prefixes-in-2024

#WebDev #VendorPrefix #Browsers #CSS #PostCSS #Autoprefixer

I'm playing with Bulma and Astro and I'm having a weird error trying to overwrite a Bulma Sass variable.

```
[postcss] Found unknown node. Make sure to provided all involved nodes. Unknown node: "--color-100"
```

This is my `global.scss` file:

```
@use "sass:color";
@use "../../node_modules/bulma/sass";

$family-primary: 'system-ui, sans-serif'
```

(I tried earlier using `@use with` and got the same error)

I had disabled postcss on my `astro.config.mjs`:

```js
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
postcss: false,
});

```

What can be happening? Yes, I know is recognizing all the other variables but, do I have to disable postcss anywhere else? Any idea how can I avoid this error without checking every other Bulma variable?

Thank you!

#astro #css #postcss #bulma #webdev #frontend

Post >> TIL some info about PostCSS Preset Env and Browserslist • When all else fails, I go to the source and ask.

https://www.brycewray.com/posts/2024/02/til-some-info-postcss-preset-env-browserslist/

#WebDev #CSS #PostCSS #Browserslist

Just learned something I’d hoped was true: if your project has a more updated version of browserslist than what’s in postcss-preset-env, postcss-preset-env will use the better data instead of what’s in its own browserslist dependency:

https://github.com/csstools/postcss-plugins/discussions/1299

#WebDev #CSS #PostCSS #browserslist

Post >> Using Lightning CSS with Hugo: back to the workaround • Why a clear separation between dev mode and prod mode made sense.

https://www.brycewray.com/posts/2024/02/using-lightning-css-hugo-back-workaround/

#WebDev #CSS #LightningCSS #PostCSS #SSG #Hugo

I made a contribution to browserslist:

https://github.com/browserslist/browserslist/pull/819

I have been trying to get the Lume static site generator to run inside a #Dropserver sandbox, but I have been running into all kinds of issues: some modules written for #NodeJS assume they have read permissions for the entire disk, and error out when you run them with restrictive permissions. Any project that uses #PostCSS + #autoprefixer (ie most build systems) will hit this.

https://github.com/browserslist/browserslist/issues/813

1/2

(Restoring an earlier item that I briefly removed when I encountered, and subsequently fixed, a local glitch...)

Post >> Using Lightning CSS with Hugo — without workarounds • With a little tinkering, there’s no need for that PostCSS plugin I recently mentioned.

https://www.brycewray.com/posts/2024/02/using-lightning-css-hugo-without-workarounds/

#Hugo #WebDev #CSS #LightningCSS #PostCSS #SSG