Process CSS selectors with states and add as style block

[peterfox]

Currently if you process CSS with state CSS selectors e.g. :hover these selectors get lost in the inline process. Instead it would be ideal if they're added to the HTML as a style block instead in the same way the media is.

[roman-1983]

+1

[JakeQZ]

I'll be proposing a PR for this next week, so if anyone has had any more thoughts, or tried any code changes, let us know here.

[oliverklee]

Sounds good to me. I say: Go for it! @jjriv, @zoliszabo: More thoughts?

[zoliszabo]

Sounds good to me. I say: Go for it! @jjriv, @zoliszabo: More thoughts?

Sounds good to me too!
By the way: Nice PRs @JakeQZ!

[jjriv]

I'm with @zoliszabo and @oliverklee

[JakeQZ]

Proposed solution...

Currently we have in process():

    $cssParts = $this->splitCssAndMediaQuery($allCss);
    //...
    $cssRules = $this->parseCssRules($cssParts['css']);
    foreach ($cssRules as $cssRule) {
        //...

Here $cssRules does not currently contain rules from media queries or with selectors involving pseudo -classes or -elements whose rules cannot be inlined.

I suggest changing this so that $cssRules contains all rules, with each entry having additional keys:

• "media" - Media query string if rule is from within a media query block;
• "hasPseudo" - Boolean indicating whether the selector involves a pseudo -class or -element such that the rules cannot be inlined;
• "uninlineable" - Convenience Boolean indicating either "media" is nonempty or "hasPseudo" is true (or both).

Alternatively, $cssRules could contain two arrays:

• Inlineable rules (as before), sorted by selector precedence;
• Uninlineable rules, i.e. those from media queries and/or with selectors involving psuedo-elements or behavioural pseudo-classes, with additional keys "media" and "hasPseudo" described above, and which do not need sorting by selector precedence.

The rationale is that original 'line number' information from media queries will also be required so that in the added style element they can be correctly ordered with respect to other rules for selectors involving pseudo-elements or behavioural psuedo-classes (and their rule blocks are currently parsed later anyway).

The loop which follows would ignore uninlineable rules.

For copying uninlineable rules to a style element, I suggest renaming copyCssWithMediaToStyleNode to a more general name like copyUninlineableCssToStyleNode. This would

• iterate through the uninlineable CSS rules (sorted back into line number order if needed, depending on the above);
• use existsMatchForCssSelector to test if each rule is relevant for the document;
• for selectors involving pseudo-elements or behavioural psuedo-classes, strip these components from the selector passed to existsMatchForCssSelector (e.g. so "a:hover" becomes "a" for the test);
• append each relevant rule to a CSS string, re-combining rules from the same original line number, and those from the same original media query block.

A simple CssConcatenator class may help with the final item, making the code clearer (though I note that reliance on autoloading is not until 4.0.0, so would any additional classes need to be defined in the same source file for now, or require'd if !class_exists(...)?).

Returning to $cssRules and its creation, and firstly splitCssAndMediaQuery. This would need to retain the ordering of the CSS media query blocks and any CSS rules between them. I suggest it returns an ordered array of such content in which each element is an array with the following keys:

• "css" - The CSS content, either from between supported media query blocks (cleaned, with @import, @charset and unsupported media query blocks removed), or the content of a supported media query block (i.e. that within {...});
• "media" - Media query string if the CSS is from within a media query block

Finally, parseCssRules would be changed to take the returned data from splitCssAndMediaQuery as its parameter, and return the value for $cssRules described above. It would include selectors for pseudo-elements and unsupported pseudo-classes, setting the "hasPseudo" flag, and copy the value for "media" from the input data. Alternatively it could call splitCssAndMediaQuery itself and be passed the full original CSS as its parameter.

The changes can be separated into two PRs, one for the preliminary refactoring, and one for actually adding the feature.

Thoughts? Comments? Questions?

[oliverklee]

@JakeQZ Sounds good! I'd say: Go for it!

As for the two approaches: I'm for taking the one that is simpler or provides better performance.

And please let's have small, incremental PRs.