PostCSS support

[kaelig]

I'd really love to see PostCSS support land in Backlight so that I can benefit from its amazing ecosystem and avoid using Sass wherever possible!

---

My personal use-case

Here's my rudimentary PostCSS config:

// postcss.config.mjs
export default {
  plugins: [
    [
      'postcss-preset-env',
      {
        stage: 1,
        importFrom: ['./design-system/styles/viewports.css'],
      },
    ],
    [
      'postcss-plugin-px2rem',
      {
        rootValue: 16,
        minPixelValue: 2,
        mediaQuery: true,
      },
    ],
  ],
};

postcss-preset-env with stage: 1

I'm particularly interested in using custom media queries rather than having to use breakpoint management utilities such as Sass MQ.

postcss-plugin-px2rem

I have strong opinions about the fact that the pixel unit is a great way to reason about dimensions across platforms (Pixels are a convenient unit when defining cross-platform design tokens).

I also have strong opinions on web accessibility, and that the CSS output should have rem units where appropriate (in my project's case: almost everywhere - YMMV).

[bashmish]

Your use cases are fully valid! Internally I have another feature request for PostCSS to be able to configure CSS entry points, because right now we have Vite which exports just a single root style.css which is not always sufficient. I feel like PostCSS can give more flexibiltiy for that without the need to introduce custom Backlight configs. So given 2 requests now, I think we should increase the prio of the PostCSS integration.