Support for pseudo tags

[RiksGitHubThing]

Not sure if this is by design, or a configuration option, but something like

<style> a:hover { text-decoration: none; } </style>

doesn't seem to get inlined

[jrit]

There isn't a way I know of to inline a hover state that is only active on hover. Do you know of one?

[Yankovsky]

@jrit What do you think about automatically adding !important to every pseudo selector?
Suppose I have html:

<style>
.myClass {
  color: red;
}
.myClass:hover {
  color: green;
}
</style>
<h1 class="myClass">My Title</h1>

and juice outputs:

<style>
.myClass:hover {
  color: green;
}
</style>
<h1 class="myClass" style="color: red;">My Title</h1>

Obviously, hover won't work because inline style has higher specificity and I have to manually put !important to every pseudo class rule. Same goes to media queries.

I understand that such option is a breaking change for existing codebases, but it could be disabled by default.

[jrit]

That seems like a very reasonable transform to add and likely default that option to OFF to avoid breaking a bunch of people's styles on the update. If anyone wants to submit a PR, seems relatively straightforward to tackle

[Yankovsky]

@jrit I am very happy that you like the idea.
I can try, but I am unfamiliar with codebase.

[Yankovsky]

@jrit can you suggest a name for such option?

[jrit]

addImportantToPseudoClasses ? I'm also not very active in the codebase the last few years, there is very good test coverage so don't be afraid to dive in