[postcss-extract] Extract class selectors only

[MrHBS]

I have been meaning to find a way to extract all class selectors in my project and I stumbled upon postcss-extract plugin. Unfortunately, I was not able to write a query that extracts class selectors only.

Any help is appreciated!

[romainmenke]

Hi @MrHBS,

That is something I've been wanting to add for some time.

Currently we only support the PostCSS API itself.
So only these constructs can be filtered and selected :

• at rules
• rules
• declarations
• comments

But specific values, selectors, media queries, ... can not be targeted.

I've been considering something like this :

/*
  - select all rules
  - use the selector parser
  - pass in the selector of each rule as an argument to the selector parser
  - select all classes
*/
rule::selector-parser(selector) class

But there are two use cases that need these kind of extra parsers and a new syntax :

1. parse selectors and select part of each selector
2. parse selectors and select rules, values, ... when a rule has a specific kind of selector

Example of 1

.foo {}
.bar, .baz {}
article {}

rule::selector-parser(selector) class

This would return .foo .bar and .baz.
It selects each class on each rule.

Example of 2

.foo { color: green; }
article { color: red; }

rule:matches(::selector-parser(selector) class) decl

This would return color: green;.
It selects each declaration when a rule has a selector with class.

---

If anyone has good ideas suggestions to express this with selectors that already exist in CSS?

For me the switch to a different parser and a different AST (from PostCSS to Selector parser) is similar to switching from regular DOM to pseudo elements. But it is also a bit like switching from light DOM to shadow DOM.

So things like :host, :part, :is, :has all feel relevant.

Expressing which parser to use could also be an argument : rule:part(selector, selector-parser).

---

The issues I think are here are :

• you want to be able to chose which parser is used (value parser for @media, or tokenizer for @supports, ...)
• the selector engine complexity will explode
• we will have to create something that works like :is and :has for this to be really useful

TL;DR;

I want to solve this but I want to get it right :)
Doing so will require a lot of time and headspace and I haven't gotten around to it yet.

[MrHBS]

Thank you for replying! Too bad this can’t be done with postcss-extract. It would be fantastic to implement what you described above. Meanwhile, do you happen to know what I can use instead?

[romainmenke]

You can do it by creating your own PostCSS plugin.
It might seem daunting at first, but it should work out if you take small steps.

This package is what we currently use to analyse and transform selectors for other plugins : https://www.npmjs.com/package/postcss-selector-parser

[MrHBS]

Thank you! I am new to all this. I will take a look at that package.