Skip to content

inlineStyles plugin should not inline styles when pseudo-classes target the element #2067

@johnkenny54

Description

@johnkenny54

When pseudo-classes target an element, moving a style inline will disable the style in the pseudo-class selector (since styles in attributes have the greatest specificity).

To Reproduce
Process the following file with the inlineStyles plugin:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
  <style>
    #a {stroke:red;}
    #a:hover {stroke:green;}
    circle {fill:blue;}
    circle:active {fill:yellow;}
    g :first-child {stroke:orange;}
    g :first-child:hover {stroke:pink;}
    path.a {stroke:purple;}
    path.a:hover {stroke:silver;}
    path.a + path {stroke:lime;}
    path.a:hover + path {stroke:gray;}
  </style>
  <path id="a" d="M 2 2 h10"/>
  <circle cx="5" cy="10" r="1"/>
  <g>
    <path d="M 2 4 h10"/>
  </g>
  <path class="a" d="M 2 6 h10"/>
  <path d="M 2 8 h10"/>
</svg>

Expected behavior
No styles are inlined, since doing so disables the hover/click effects of the pseudo-classes.

SVGO Version 4.0.0-rc.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions