fix(inlineStyles): refactor how styles are collected (#1865)

plugins/_collections.js

@@ -2237,3 +2237,55 @@ exports.colorsProps = [
   'flood-color',
   'lighting-color',
 ];
+
+/** @see https://developer.mozilla.org/docs/Web/CSS/Pseudo-classes */
+exports.pseudoClasses = {
+  displayState: ['fullscreen', 'modal', 'picture-in-picture'],
+  input: [
+    'autofill',
+    'enabled',
+    'disabled',
+    'read-only',
+    'read-write',
+    'placeholder-shown',
+    'default',
+    'checked',
+    'indetermined',
+    'blank',
+    'valid',
+    'invalid',
+    'in-range',
+    'out-of-range',
+    'required',
+    'optional',
+    'user-invalid',
+  ],
+  linguistic: ['dir', 'lang'],
+  location: [
+    'any-link',
+    'link',
+    'visited',
+    'local-link',
+    'target',
+    'target-within',
+    'scope',
+  ],
+  resourceState: ['playing', 'paused'],
+  timeDimensional: ['current', 'past', 'future'],
+  treeStructural: [
+    'root',
+    'empty',
+    'nth-child',
+    'nth-last-child',
+    'first-child',
+    'last-child',
+    'only-child',
+    'nth-of-type',
+    'nth-last-of-type',
+    'first-of-type',
+    'last-of-type',
+    'only-of-type',
+  ],
+  userAction: ['hover', 'active', 'focus', 'focus-visible', 'focus-within'],
+  functional: ['is', 'not', 'where', 'has'],
+};

plugins/inlineStyles.js

@@ -16,11 +16,26 @@ const {
   detachNodeFromParent,
 } = require('../lib/xast.js');
 const { compareSpecificity, includesAttrSelector } = require('../lib/style');
-const { attrsGroups } = require('./_collections');
+const { attrsGroups, pseudoClasses } = require('./_collections');
 
 exports.name = 'inlineStyles';
 exports.description = 'inline styles (additional options)';
 
+/**
+ * Some pseudo-classes can only be calculated by clients, like :visited,
+ * :future, or :hover, but there are other pseudo-classes that we can evaluate
+ * during optimization.
+ *
+ * The list of pseudo-classes that we can evaluate during optimization, and so
+ * shouldn't be toggled conditionally through the `usePseudos` parameter.
+ *
+ * @see https://developer.mozilla.org/docs/Web/CSS/Pseudo-classes
+ */
+const preservedPseudos = [
+  ...pseudoClasses.functional,
+  ...pseudoClasses.treeStructural,
+];
+
 /**
  * Merges styles from style nodes into inline styles.
  *
@@ -88,13 +103,9 @@ exports.fn = (root, params) => {
 
         // collect selectors
         csstree.walk(cssAst, {
-          visit: 'Selector',
-          enter(node, item) {
+          visit: 'Rule',
+          enter(node) {
             const atrule = this.atrule;
-            const rule = this.rule;
-            if (rule == null) {
-              return;
-            }
 
             // skip media queries not included into useMqs param
             let mediaQuery = '';
@@ -108,44 +119,52 @@ exports.fn = (root, params) => {
               return;
             }
 
-            /**
-             * @type {Array<{
-             *   item: csstree.ListItem<csstree.CssNode>,
-             *   list: csstree.List<csstree.CssNode>
-             * }>}
-             */
-            const pseudos = [];
-            if (node.type === 'Selector') {
-              node.children.forEach((childNode, childItem, childList) => {
-                if (
-                  childNode.type === 'PseudoClassSelector' ||
-                  childNode.type === 'PseudoElementSelector'
-                ) {
-                  pseudos.push({ item: childItem, list: childList });
-                }
-              });
-            }
+            if (node.prelude.type === 'SelectorList') {
+              node.prelude.children.forEach((childNode, item) => {
+                if (childNode.type === 'Selector') {
+                  /**
+                   * @type {Array<{
+                   *   item: csstree.ListItem<csstree.CssNode>,
+                   *   list: csstree.List<csstree.CssNode>
+                   * }>}
+                   */
+                  const pseudos = [];
+
+                  childNode.children.forEach(
+                    (grandchildNode, grandchildItem, grandchildList) => {
+                      const isPseudo =
+                        grandchildNode.type === 'PseudoClassSelector' ||
+                        grandchildNode.type === 'PseudoElementSelector';
+
+                      if (
+                        isPseudo &&
+                        !preservedPseudos.includes(grandchildNode.name)
+                      ) {
+                        pseudos.push({
+                          item: grandchildItem,
+                          list: grandchildList,
+                        });
+                      }
+                    }
+                  );
 
-            // skip pseudo classes and pseudo elements not includes into usePseudos param
-            const pseudoSelectors = csstree.generate({
-              type: 'Selector',
-              children: new csstree.List().fromArray(
-                pseudos.map((pseudo) => pseudo.item.data)
-              ),
-            });
+                  const pseudoSelectors = csstree.generate({
+                    type: 'Selector',
+                    children: new csstree.List().fromArray(
+                      pseudos.map((pseudo) => pseudo.item.data)
+                    ),
+                  });
 
-            if (!usePseudos.includes(pseudoSelectors)) {
-              return;
-            }
+                  if (usePseudos.includes(pseudoSelectors)) {
+                    for (const pseudo of pseudos) {
+                      pseudo.list.remove(pseudo.item);
+                    }
+                  }
 
-            // remove pseudo classes and elements to allow querySelector match elements
-            // TODO this is not very accurate since some pseudo classes like first-child
-            // are used for selection
-            for (const pseudo of pseudos) {
-              pseudo.list.remove(pseudo.item);
+                  selectors.push({ node: childNode, rule: node, item: item });
+                }
+              });
             }
-
-            selectors.push({ node, item, rule });
           },
         });
       },