Parsing a CSS file (if possible with nesting, variables) into a normalized file I can work with

[BlueNebulaDev]

I would like to transform a CSS file that uses CSS nesting and possibly CSS custom properties (variables) into a simplified AST without nesting and variable, and with selectors parsed into an AST as well.

For instance, take the following CSS:

:root {
  --my-variable: 1px;
}

#obj > .cl1.cl2 {
  p {
    margin-left: var(--my-variable);
  }
  &:hover {
    border-width: var(--my-variable);
  }
}

I would like to parse it into simplified set of rules that could look like this if rendered as CSS:

#obj > .cl1.cl2 p {
  margin-left: 1px;
}
#obj > .cl1.cl2:hover {
  border-width: var(--my-variable);
}

I would need that in an AST format I can work with using JavaScript, with selectors parsed into AST Nodes too:

[
  {
    selector: Descendant( Child( ID("obj"), [Class("cl1"), Class("cl2")] ), Element("p") ),
    declarations: {
      "margin-left": "1px"
    }
  },
  {
    selector: Child( ID("obj"), [ Class("cl1"), Class("cl2"), PseudoClass(":hover") ] )
    declarations: {
      "margin-left": "1px"
    }
  },
]

This Javascript object is what I would need.

Is it possible to achieve this with PostCSS? Can anyone point me to an example or the right resources? The API and the set of plugins available is too large and I couldn't find what I need.

[ai]

If I understand you correctly, you can do it with postcss-nested and postcss-custom-vairables.

You can use postcss-cli, create PostCSS config (see plugin docs) and process CSS.

[BlueNebulaDev]

Thank you. I had checked out postcss-nesting, but somehow I couldn't get it to work. The plugins you linked work perfectly.

With the following postcss.config.cjs, postcss-cli transforms the first CSS in my original question into the CSS I expected, awesome!

module.exports = {
	plugins: [
		require('postcss-nesting')({}),
		require('postcss-custom-properties')({ preserve:false }),
	],
};

The only thing I'm now missing, is an AST for the selectors.

I'm guessing that I have to parse them with some other tool, like css-selector-parse?

[ai]

Yeap. You need to separated parser. There is also https://github.com/postcss/postcss-selector-parser