How to integrate `exclude: Features.Nesting` into Chris Coyier’s lightningcss CSS processing pipeline?

44 Views Asked by At

The context

In my bid to wrest myself off of Sass (and Codekit as a GUI processor of it), I have with some success been implementing, in dev, Chris Coyier’s Super Basic CSS Processing Setup, which uses lightningcss to do the processing and turbowatch for file change detection and orchestration.

My years-long Sass habit means I have become used to nesting in my authoring files, but I don't (yet) want any nesting in my compiled CSS.

The stumbling block

I note that with lightningcss’s feature flags I could invoke something like:

import { transform, Features } from 'lightningcss';

let { code, map } = transform({
  targets,
  exclude: Features.Nesting
});

…but, because I am stumbling in the dark, and I am not authoring a Node.js based app (I’m only using Node for the processing pipeline), I don’t know where/how to integrate this in Chris’s ‘Super Basic’ schema.

The setup

package.json  <-- invoking lightningcss and turbowatch as dependencies
turbowatch.ts <-- working CSS compiler/minifier but retains nesting

My adaptation of Chris’s turbowatch.ts is below.

import { defineConfig } from "turbowatch";

export default defineConfig({
  project: __dirname,
  triggers: [
    {
      expression: ["match", "*.css", "basename"],
      name: "build",
      onChange: async ({ spawn }) => {
        await spawn`lightningcss --minify --bundle --targets 'last 2 years' ./src/css/_index.css -o ./web/css/styles-min.css`;
      },
    },
  ],
});

Any clues as to how to integrate exclude: Features.Nesting much appreciated.


Update

Setting the browser targets to > 0.2% and not dead has the effect of removing nesting in the compiled CSS but that's not the means to the end that I'm hoping for.

0

There are 0 best solutions below