Hi,
I really like this package, we recently integrated it for generating a state table, showing links and inputs in various states. I stumbled upon an article about considering contrast for various scenarios (https://css-tricks.com/a-whole-bunch-of-places-to-consider-contrast-in-a-single-paragraph/) lately, so I tried to integrate ::selection in this state table, too, using your package. As this did not work, I checked the docs, source code and pull requests, so I'm now aware, that pseudo-selectors are excluded on purpose (I probably could have also guessed it from the name 🙄 ), but I am curious about the background, why this decision was made and if you could consider some exceptions, like mentioned ::selection, or e.g. ::placeholder?

When designing reusable components, I prefer not to expose classNames as a prop, as it breaks encapsulation and encourages the modification of a finalized design.

It would be great if the following approach worked:

<!-- "hover" may also be called "hover-all" -->
<div class="hover">
  <custom-button>I’m hovered</custom-button>
</div>

Hi,

I encountered a problem while using Angular:

The :host pseudo class is in the blacklist configuration.

The following element is given:

<my-button class="vairant"></mybutton>

where <my-button> is the host tag and could be styled with :host {...}

Imagine the following scss as used in Angular

:host {
    &.variant {
          .block .element:active { color: blue} 
    }
}

The same as css:

:host.hostVariant .block .element:active {
  color: blue;
}

The result is:

:host.hostVariant .block .element:active,
.\:host.hostVariant .block .element.\:active {
  color: blue;
}

The expected result:

:host.hostVariant .block .element:active,
:host.hostVariant .block .element.\:active {
  color: blue;
}

The styling is broken when using a class (.) on the host (:host) element.
The same problem will occur when using IDs (#) on the host (:host) element.

I will submit my PR in a few minutes.

I would really appreciate to get the next release published on npm, too.

All the best,
Philipp

Hello,

I would like to preserve css pseudo class functions like :host() but currently all pseudo class functions are escaped.

Example:

:host(.selector) {...}

:host(:active) {...}

is resolved to:

:host(.selector),
// `host` is in blacklist: last parenthesis is escaped
:host(.selector\) {...}
// `host` not in blacklist:
./:host\(.selector\) {...}

:host(:active),
.\:host\(.\:active\) {...}

I need the following output:

// function remains unchanged
:host(.selector) {...}

:host(:active),
// function remains unchanged, only pseudo state is resolved
:host(.\:active) {...}