tailwindcss 0.0.0-oxide-insiders.cc1eec6 → 0.0.0-oxide-insiders.ba54545

package/lib/lib/expandApplyAtRules.js

@@ -11,7 +11,7 @@ const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("pos
 const _generateRules = require("./generateRules");
 const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("../util/escapeClassName"));
 const _applyImportantSelector = require("../util/applyImportantSelector");
-const _formatVariantSelectorJs = require("../util/formatVariantSelector.js");
+const _pseudoElements = require("../util/pseudoElements");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -490,12 +490,7 @@ function processApply(root, context, localCache) {
                         });
                         // Move pseudo elements to the end of the selector (if necessary)
                         let selector = (0, _postcssSelectorParser.default)().astSync(rule.selector);
-                        selector.each((sel)=>{
-                            let [pseudoElements] = (0, _formatVariantSelectorJs.collectPseudoElements)(sel);
-                            if (pseudoElements.length > 0) {
-                                sel.nodes.push(...pseudoElements.sort(_formatVariantSelectorJs.sortSelector));
-                            }
-                        });
+                        selector.each((sel)=>(0, _pseudoElements.movePseudos)(sel));
                         rule.selector = selector.toString();
                     });
                 }

package/lib/util/applyImportantSelector.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "applyImportantSelector", {
     get: ()=>applyImportantSelector
 });
 const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser"));
-const _formatVariantSelectorJs = require("./formatVariantSelector.js");
+const _pseudoElements = require("./pseudoElements");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -28,10 +28,7 @@ function applyImportantSelector(selector, important) {
                 })
             ];
         }
-        let [pseudoElements] = (0, _formatVariantSelectorJs.collectPseudoElements)(sel);
-        if (pseudoElements.length > 0) {
-            sel.nodes.push(...pseudoElements.sort(_formatVariantSelectorJs.sortSelector));
-        }
+        (0, _pseudoElements.movePseudos)(sel);
     });
     return `${important} ${sel.toString()}`;
 }

package/lib/util/formatVariantSelector.js

@@ -12,14 +12,13 @@ _export(exports, {
     formatVariantSelector: ()=>formatVariantSelector,
     eliminateIrrelevantSelectors: ()=>eliminateIrrelevantSelectors,
     finalizeSelector: ()=>finalizeSelector,
-    handleMergePseudo: ()=>handleMergePseudo,
-    collectPseudoElements: ()=>collectPseudoElements,
-    sortSelector: ()=>sortSelector
+    handleMergePseudo: ()=>handleMergePseudo
 });
 const _postcssSelectorParser = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser"));
 const _unesc = /*#__PURE__*/ _interopRequireDefault(require("postcss-selector-parser/dist/util/unesc"));
 const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("../util/escapeClassName"));
 const _prefixSelector = /*#__PURE__*/ _interopRequireDefault(require("../util/prefixSelector"));
+const _pseudoElements = require("./pseudoElements");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -203,12 +202,7 @@ function finalizeSelector(current, formats, { context , candidate , base  }) {
         }
     });
     // Move pseudo elements to the end of the selector (if necessary)
-    selector.each((sel)=>{
-        let [pseudoElements] = collectPseudoElements(sel);
-        if (pseudoElements.length > 0) {
-            sel.nodes.push(...pseudoElements.sort(sortSelector));
-        }
-    });
+    selector.each((sel)=>(0, _pseudoElements.movePseudos)(sel));
     return selector.toString();
 }
 function handleMergePseudo(selector, format) {
@@ -259,85 +253,3 @@ function handleMergePseudo(selector, format) {
         format
     ];
 }
-// Note: As a rule, double colons (::) should be used instead of a single colon
-// (:). This distinguishes pseudo-classes from pseudo-elements. However, since
-// this distinction was not present in older versions of the W3C spec, most
-// browsers support both syntaxes for the original pseudo-elements.
-let pseudoElementsBC = [
-    ":before",
-    ":after",
-    ":first-line",
-    ":first-letter"
-];
-// These pseudo-elements _can_ be combined with other pseudo selectors AND the order does matter.
-let pseudoElementExceptions = [
-    "::file-selector-button",
-    // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
-    "::-webkit-scrollbar",
-    "::-webkit-scrollbar-button",
-    "::-webkit-scrollbar-thumb",
-    "::-webkit-scrollbar-track",
-    "::-webkit-scrollbar-track-piece",
-    "::-webkit-scrollbar-corner",
-    "::-webkit-resizer"
-];
-function collectPseudoElements(selector, force = false) {
-    /** @type {Node[]} */ let nodes = [];
-    let seenPseudoElement = null;
-    for (let node of [
-        ...selector.nodes
-    ]){
-        if (isPseudoElement(node, force)) {
-            nodes.push(node);
-            selector.removeChild(node);
-            seenPseudoElement = node.value;
-        } else if (seenPseudoElement !== null) {
-            if (pseudoElementExceptions.includes(seenPseudoElement) && isPseudoClass(node, force)) {
-                nodes.push(node);
-                selector.removeChild(node);
-            } else {
-                seenPseudoElement = null;
-            }
-        }
-        if (node === null || node === void 0 ? void 0 : node.nodes) {
-            let hasPseudoElementRestrictions = node.type === "pseudo" && (node.value === ":is" || node.value === ":has");
-            let [collected, seenPseudoElementInSelector] = collectPseudoElements(node, force || hasPseudoElementRestrictions);
-            if (seenPseudoElementInSelector) {
-                seenPseudoElement = seenPseudoElementInSelector;
-            }
-            nodes.push(...collected);
-        }
-    }
-    return [
-        nodes,
-        seenPseudoElement
-    ];
-}
-function sortSelector(a, z) {
-    // Both nodes are non-pseudo's so we can safely ignore them and keep
-    // them in the same order.
-    if (a.type !== "pseudo" && z.type !== "pseudo") {
-        return 0;
-    }
-    // If one of them is a combinator, we need to keep it in the same order
-    // because that means it will start a new "section" in the selector.
-    if (a.type === "combinator" ^ z.type === "combinator") {
-        return 0;
-    }
-    // One of the items is a pseudo and the other one isn't. Let's move
-    // the pseudo to the right.
-    if (a.type === "pseudo" ^ z.type === "pseudo") {
-        return (a.type === "pseudo") - (z.type === "pseudo");
-    }
-    // Both are pseudo's, move the pseudo elements (except for
-    // ::file-selector-button) to the right.
-    return isPseudoElement(a) - isPseudoElement(z);
-}
-function isPseudoElement(node, force = false) {
-    if (node.type !== "pseudo") return false;
-    if (pseudoElementExceptions.includes(node.value) && !force) return false;
-    return node.value.startsWith("::") || pseudoElementsBC.includes(node.value);
-}
-function isPseudoClass(node, force) {
-    return node.type === "pseudo" && !isPseudoElement(node, force);
-}

package/lib/util/pseudoElements.js

@@ -0,0 +1,223 @@
+/** @typedef {import('postcss-selector-parser').Root} Root */ /** @typedef {import('postcss-selector-parser').Selector} Selector */ /** @typedef {import('postcss-selector-parser').Pseudo} Pseudo */ /** @typedef {import('postcss-selector-parser').Node} Node */ // There are some pseudo-elements that may or may not be:
+// **Actionable**
+// Zero or more user-action pseudo-classes may be attached to the pseudo-element itself
+// structural-pseudo-classes are NOT allowed but we don't make
+// The spec is not clear on whether this is allowed or not — but in practice it is.
+// **Terminal**
+// It MUST be placed at the end of a selector
+//
+// This is the required in the spec. However, some pseudo elements are not "terminal" because
+// they represent a "boundary piercing" that is compiled out by a build step.
+// **Jumpable**
+// Any terminal element may "jump" over combinators when moving to the end of the selector
+//
+// This is a backwards-compat quirk of :before and :after variants.
+/** @typedef {'terminal' | 'actionable' | 'jumpable'} PseudoProperty */ /** @type {Record<string, PseudoProperty[]>} */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "movePseudos", {
+    enumerable: true,
+    get: ()=>movePseudos
+});
+let elementProperties = {
+    "::after": [
+        "terminal",
+        "jumpable"
+    ],
+    "::backdrop": [
+        "terminal"
+    ],
+    "::before": [
+        "terminal",
+        "jumpable"
+    ],
+    "::cue": [
+        "terminal"
+    ],
+    "::cue-region": [
+        "terminal"
+    ],
+    "::first-letter": [
+        "terminal",
+        "jumpable"
+    ],
+    "::first-line": [
+        "terminal",
+        "jumpable"
+    ],
+    "::grammar-error": [
+        "terminal"
+    ],
+    "::marker": [
+        "terminal"
+    ],
+    "::part": [
+        "terminal",
+        "actionable"
+    ],
+    "::placeholder": [
+        "terminal"
+    ],
+    "::selection": [
+        "terminal"
+    ],
+    "::slotted": [
+        "terminal"
+    ],
+    "::spelling-error": [
+        "terminal"
+    ],
+    "::target-text": [
+        "terminal"
+    ],
+    // other
+    "::file-selector-button": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-progress-bar": [
+        "terminal",
+        "actionable"
+    ],
+    // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
+    "::-webkit-scrollbar": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-scrollbar-button": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-scrollbar-thumb": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-scrollbar-track": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-scrollbar-track-piece": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-scrollbar-corner": [
+        "terminal",
+        "actionable"
+    ],
+    "::-webkit-resizer": [
+        "terminal",
+        "actionable"
+    ],
+    // Note: As a rule, double colons (::) should be used instead of a single colon
+    // (:). This distinguishes pseudo-classes from pseudo-elements. However, since
+    // this distinction was not present in older versions of the W3C spec, most
+    // browsers support both syntaxes for the original pseudo-elements.
+    ":after": [
+        "terminal",
+        "jumpable"
+    ],
+    ":before": [
+        "terminal",
+        "jumpable"
+    ],
+    ":first-letter": [
+        "terminal",
+        "jumpable"
+    ],
+    ":first-line": [
+        "terminal",
+        "jumpable"
+    ],
+    // The default value is used when the pseudo-element is not recognized
+    // Because it's not recognized, we don't know if it's terminal or not
+    // So we assume it can't be moved AND can have user-action pseudo classes attached to it
+    __default__: [
+        "actionable"
+    ]
+};
+function movePseudos(sel) {
+    let [pseudos] = movablePseudos(sel);
+    // Remove all pseudo elements from their respective selectors
+    pseudos.forEach(([sel, pseudo])=>sel.removeChild(pseudo));
+    // Re-add them to the end of the selector in the correct order.
+    // This moves terminal pseudo elements to the end of the
+    // selector otherwise the selector will not be valid.
+    //
+    // Examples:
+    //  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
+    //  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
+    //
+    // The selector `::before:hover` does not work but we
+    // can make it work for you by flipping the order.
+    sel.nodes.push(...pseudos.map(([, pseudo])=>pseudo));
+    return sel;
+}
+/** @typedef {[sel: Selector, pseudo: Pseudo, attachedTo: Pseudo | null]} MovablePseudo */ /** @typedef {[pseudos: MovablePseudo[], lastSeenElement: Pseudo | null]} MovablePseudosResult */ /**
+ * @param {Selector} sel
+ * @returns {MovablePseudosResult}
+ */ function movablePseudos(sel) {
+    /** @type {MovablePseudo[]} */ let buffer = [];
+    /** @type {Pseudo | null} */ let lastSeenElement = null;
+    for (let node of sel.nodes){
+        if (node.type === "combinator") {
+            buffer = buffer.filter(([, node])=>propertiesForPseudo(node).includes("jumpable"));
+            lastSeenElement = null;
+        } else if (node.type === "pseudo") {
+            if (isMovablePseudoElement(node)) {
+                lastSeenElement = node;
+                buffer.push([
+                    sel,
+                    node,
+                    null
+                ]);
+            } else if (lastSeenElement && isAttachablePseudoClass(node, lastSeenElement)) {
+                buffer.push([
+                    sel,
+                    node,
+                    lastSeenElement
+                ]);
+            } else {
+                lastSeenElement = null;
+            }
+            var _node_nodes;
+            for (let sub of (_node_nodes = node.nodes) !== null && _node_nodes !== void 0 ? _node_nodes : []){
+                let [movable, lastSeenElementInSub] = movablePseudos(sub);
+                lastSeenElement = lastSeenElementInSub || lastSeenElement;
+                buffer.push(...movable);
+            }
+        }
+    }
+    return [
+        buffer,
+        lastSeenElement
+    ];
+}
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */ function isPseudoElement(node) {
+    return node.value.startsWith("::") || elementProperties[node.value] !== undefined;
+}
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */ function isMovablePseudoElement(node) {
+    return isPseudoElement(node) && propertiesForPseudo(node).includes("terminal");
+}
+/**
+ * @param {Node} node
+ * @param {Pseudo} pseudo
+ * @returns {boolean}
+ */ function isAttachablePseudoClass(node, pseudo) {
+    if (node.type !== "pseudo") return false;
+    if (isPseudoElement(node)) return false;
+    return propertiesForPseudo(pseudo).includes("actionable");
+}
+/**
+ * @param {Pseudo} pseudo
+ * @returns {PseudoProperty[]}
+ */ function propertiesForPseudo(pseudo) {
+    var _elementProperties_pseudo_value;
+    return (_elementProperties_pseudo_value = elementProperties[pseudo.value]) !== null && _elementProperties_pseudo_value !== void 0 ? _elementProperties_pseudo_value : elementProperties.__default__;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-oxide-insiders.cc1eec6",
+  "version": "0.0.0-oxide-insiders.ba54545",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -70,7 +70,7 @@
     "postcss": "^8.0.9"
   },
   "dependencies": {
-    "@tailwindcss/oxide": "0.0.0-oxide-insiders.cc1eec6",
+    "@tailwindcss/oxide": "0.0.0-oxide-insiders.ba54545",
     "arg": "^5.0.2",
     "browserslist": "^4.21.5",
     "chokidar": "^3.5.3",

package/src/lib/expandApplyAtRules.js

@@ -4,7 +4,7 @@ import parser from 'postcss-selector-parser'
 import { resolveMatches } from './generateRules'
 import escapeClassName from '../util/escapeClassName'
 import { applyImportantSelector } from '../util/applyImportantSelector'
-import { collectPseudoElements, sortSelector } from '../util/formatVariantSelector.js'
+import { movePseudos } from '../util/pseudoElements'
 
 /** @typedef {Map<string, [any, import('postcss').Rule[]]>} ApplyCache */
 
@@ -566,13 +566,7 @@ function processApply(root, context, localCache) {
 
             // Move pseudo elements to the end of the selector (if necessary)
             let selector = parser().astSync(rule.selector)
-            selector.each((sel) => {
-              let [pseudoElements] = collectPseudoElements(sel)
-              if (pseudoElements.length > 0) {
-                sel.nodes.push(...pseudoElements.sort(sortSelector))
-              }
-            })
-
+            selector.each((sel) => movePseudos(sel))
             rule.selector = selector.toString()
           })
         }

package/src/util/applyImportantSelector.js

@@ -1,5 +1,5 @@
 import parser from 'postcss-selector-parser'
-import { collectPseudoElements, sortSelector } from './formatVariantSelector.js'
+import { movePseudos } from './pseudoElements'
 
 export function applyImportantSelector(selector, important) {
   let sel = parser().astSync(selector)
@@ -20,10 +20,7 @@ export function applyImportantSelector(selector, important) {
       ]
     }
 
-    let [pseudoElements] = collectPseudoElements(sel)
-    if (pseudoElements.length > 0) {
-      sel.nodes.push(...pseudoElements.sort(sortSelector))
-    }
+    movePseudos(sel)
   })
 
   return `${important} ${sel.toString()}`

package/src/util/formatVariantSelector.js

@@ -2,6 +2,7 @@ import selectorParser from 'postcss-selector-parser'
 import unescape from 'postcss-selector-parser/dist/util/unesc'
 import escapeClassName from '../util/escapeClassName'
 import prefixSelector from '../util/prefixSelector'
+import { movePseudos } from './pseudoElements'
 
 /** @typedef {import('postcss-selector-parser').Root} Root */
 /** @typedef {import('postcss-selector-parser').Selector} Selector */
@@ -245,12 +246,7 @@ export function finalizeSelector(current, formats, { context, candidate, base })
   })
 
   // Move pseudo elements to the end of the selector (if necessary)
-  selector.each((sel) => {
-    let [pseudoElements] = collectPseudoElements(sel)
-    if (pseudoElements.length > 0) {
-      sel.nodes.push(...pseudoElements.sort(sortSelector))
-    }
-  })
+  selector.each((sel) => movePseudos(sel))
 
   return selector.toString()
 }
@@ -318,121 +314,3 @@ export function handleMergePseudo(selector, format) {
 
   return [selector, format]
 }
-
-// Note: As a rule, double colons (::) should be used instead of a single colon
-// (:). This distinguishes pseudo-classes from pseudo-elements. However, since
-// this distinction was not present in older versions of the W3C spec, most
-// browsers support both syntaxes for the original pseudo-elements.
-let pseudoElementsBC = [':before', ':after', ':first-line', ':first-letter']
-
-// These pseudo-elements _can_ be combined with other pseudo selectors AND the order does matter.
-let pseudoElementExceptions = [
-  '::file-selector-button',
-
-  // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
-  '::-webkit-scrollbar',
-  '::-webkit-scrollbar-button',
-  '::-webkit-scrollbar-thumb',
-  '::-webkit-scrollbar-track',
-  '::-webkit-scrollbar-track-piece',
-  '::-webkit-scrollbar-corner',
-  '::-webkit-resizer',
-]
-
-/**
- * This will make sure to move pseudo's to the correct spot (the end for
- * pseudo elements) because otherwise the selector will never work
- * anyway.
- *
- * E.g.:
- *  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
- *  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
- *
- * `::before:hover` doesn't work, which means that we can make it work for you by flipping the order.
- *
- * @param {Selector} selector
- * @param {boolean} force
- **/
-export function collectPseudoElements(selector, force = false) {
-  /** @type {Node[]} */
-  let nodes = []
-  let seenPseudoElement = null
-
-  for (let node of [...selector.nodes]) {
-    if (isPseudoElement(node, force)) {
-      nodes.push(node)
-      selector.removeChild(node)
-      seenPseudoElement = node.value
-    } else if (seenPseudoElement !== null) {
-      if (pseudoElementExceptions.includes(seenPseudoElement) && isPseudoClass(node, force)) {
-        nodes.push(node)
-        selector.removeChild(node)
-      } else {
-        seenPseudoElement = null
-      }
-    }
-
-    if (node?.nodes) {
-      let hasPseudoElementRestrictions =
-        node.type === 'pseudo' && (node.value === ':is' || node.value === ':has')
-
-      let [collected, seenPseudoElementInSelector] = collectPseudoElements(
-        node,
-        force || hasPseudoElementRestrictions
-      )
-
-      if (seenPseudoElementInSelector) {
-        seenPseudoElement = seenPseudoElementInSelector
-      }
-
-      nodes.push(...collected)
-    }
-  }
-
-  return [nodes, seenPseudoElement]
-}
-
-// This will make sure to move pseudo's to the correct spot (the end for
-// pseudo elements) because otherwise the selector will never work
-// anyway.
-//
-// E.g.:
-//  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
-//  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
-//
-// `::before:hover` doesn't work, which means that we can make it work
-// for you by flipping the order.
-export function sortSelector(a, z) {
-  // Both nodes are non-pseudo's so we can safely ignore them and keep
-  // them in the same order.
-  if (a.type !== 'pseudo' && z.type !== 'pseudo') {
-    return 0
-  }
-
-  // If one of them is a combinator, we need to keep it in the same order
-  // because that means it will start a new "section" in the selector.
-  if ((a.type === 'combinator') ^ (z.type === 'combinator')) {
-    return 0
-  }
-
-  // One of the items is a pseudo and the other one isn't. Let's move
-  // the pseudo to the right.
-  if ((a.type === 'pseudo') ^ (z.type === 'pseudo')) {
-    return (a.type === 'pseudo') - (z.type === 'pseudo')
-  }
-
-  // Both are pseudo's, move the pseudo elements (except for
-  // ::file-selector-button) to the right.
-  return isPseudoElement(a) - isPseudoElement(z)
-}
-
-function isPseudoElement(node, force = false) {
-  if (node.type !== 'pseudo') return false
-  if (pseudoElementExceptions.includes(node.value) && !force) return false
-
-  return node.value.startsWith('::') || pseudoElementsBC.includes(node.value)
-}
-
-function isPseudoClass(node, force) {
-  return node.type === 'pseudo' && !isPseudoElement(node, force)
-}

package/src/util/pseudoElements.js

@@ -0,0 +1,170 @@
+/** @typedef {import('postcss-selector-parser').Root} Root */
+/** @typedef {import('postcss-selector-parser').Selector} Selector */
+/** @typedef {import('postcss-selector-parser').Pseudo} Pseudo */
+/** @typedef {import('postcss-selector-parser').Node} Node */
+
+// There are some pseudo-elements that may or may not be:
+
+// **Actionable**
+// Zero or more user-action pseudo-classes may be attached to the pseudo-element itself
+// structural-pseudo-classes are NOT allowed but we don't make
+// The spec is not clear on whether this is allowed or not — but in practice it is.
+
+// **Terminal**
+// It MUST be placed at the end of a selector
+//
+// This is the required in the spec. However, some pseudo elements are not "terminal" because
+// they represent a "boundary piercing" that is compiled out by a build step.
+
+// **Jumpable**
+// Any terminal element may "jump" over combinators when moving to the end of the selector
+//
+// This is a backwards-compat quirk of :before and :after variants.
+
+/** @typedef {'terminal' | 'actionable' | 'jumpable'} PseudoProperty */
+
+/** @type {Record<string, PseudoProperty[]>} */
+let elementProperties = {
+  '::after': ['terminal', 'jumpable'],
+  '::backdrop': ['terminal'],
+  '::before': ['terminal', 'jumpable'],
+  '::cue': ['terminal'],
+  '::cue-region': ['terminal'],
+  '::first-letter': ['terminal', 'jumpable'],
+  '::first-line': ['terminal', 'jumpable'],
+  '::grammar-error': ['terminal'],
+  '::marker': ['terminal'],
+  '::part': ['terminal', 'actionable'],
+  '::placeholder': ['terminal'],
+  '::selection': ['terminal'],
+  '::slotted': ['terminal'],
+  '::spelling-error': ['terminal'],
+  '::target-text': ['terminal'],
+
+  // other
+  '::file-selector-button': ['terminal', 'actionable'],
+  '::-webkit-progress-bar': ['terminal', 'actionable'],
+
+  // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
+  '::-webkit-scrollbar': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-button': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-thumb': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-track': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-track-piece': ['terminal', 'actionable'],
+  '::-webkit-scrollbar-corner': ['terminal', 'actionable'],
+  '::-webkit-resizer': ['terminal', 'actionable'],
+
+  // Note: As a rule, double colons (::) should be used instead of a single colon
+  // (:). This distinguishes pseudo-classes from pseudo-elements. However, since
+  // this distinction was not present in older versions of the W3C spec, most
+  // browsers support both syntaxes for the original pseudo-elements.
+  ':after': ['terminal', 'jumpable'],
+  ':before': ['terminal', 'jumpable'],
+  ':first-letter': ['terminal', 'jumpable'],
+  ':first-line': ['terminal', 'jumpable'],
+
+  // The default value is used when the pseudo-element is not recognized
+  // Because it's not recognized, we don't know if it's terminal or not
+  // So we assume it can't be moved AND can have user-action pseudo classes attached to it
+  __default__: ['actionable'],
+}
+
+/**
+ * @param {Selector} sel
+ * @returns {Selector}
+ */
+export function movePseudos(sel) {
+  let [pseudos] = movablePseudos(sel)
+
+  // Remove all pseudo elements from their respective selectors
+  pseudos.forEach(([sel, pseudo]) => sel.removeChild(pseudo))
+
+  // Re-add them to the end of the selector in the correct order.
+  // This moves terminal pseudo elements to the end of the
+  // selector otherwise the selector will not be valid.
+  //
+  // Examples:
+  //  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
+  //  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
+  //
+  // The selector `::before:hover` does not work but we
+  // can make it work for you by flipping the order.
+  sel.nodes.push(...pseudos.map(([, pseudo]) => pseudo))
+
+  return sel
+}
+
+/** @typedef {[sel: Selector, pseudo: Pseudo, attachedTo: Pseudo | null]} MovablePseudo */
+/** @typedef {[pseudos: MovablePseudo[], lastSeenElement: Pseudo | null]} MovablePseudosResult */
+
+/**
+ * @param {Selector} sel
+ * @returns {MovablePseudosResult}
+ */
+function movablePseudos(sel) {
+  /** @type {MovablePseudo[]} */
+  let buffer = []
+
+  /** @type {Pseudo | null} */
+  let lastSeenElement = null
+
+  for (let node of sel.nodes) {
+    if (node.type === 'combinator') {
+      buffer = buffer.filter(([, node]) => propertiesForPseudo(node).includes('jumpable'))
+      lastSeenElement = null
+    } else if (node.type === 'pseudo') {
+      if (isMovablePseudoElement(node)) {
+        lastSeenElement = node
+        buffer.push([sel, node, null])
+      } else if (lastSeenElement && isAttachablePseudoClass(node, lastSeenElement)) {
+        buffer.push([sel, node, lastSeenElement])
+      } else {
+        lastSeenElement = null
+      }
+
+      for (let sub of node.nodes ?? []) {
+        let [movable, lastSeenElementInSub] = movablePseudos(sub)
+        lastSeenElement = lastSeenElementInSub || lastSeenElement
+        buffer.push(...movable)
+      }
+    }
+  }
+
+  return [buffer, lastSeenElement]
+}
+
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+function isPseudoElement(node) {
+  return node.value.startsWith('::') || elementProperties[node.value] !== undefined
+}
+
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+function isMovablePseudoElement(node) {
+  return isPseudoElement(node) && propertiesForPseudo(node).includes('terminal')
+}
+
+/**
+ * @param {Node} node
+ * @param {Pseudo} pseudo
+ * @returns {boolean}
+ */
+function isAttachablePseudoClass(node, pseudo) {
+  if (node.type !== 'pseudo') return false
+  if (isPseudoElement(node)) return false
+
+  return propertiesForPseudo(pseudo).includes('actionable')
+}
+
+/**
+ * @param {Pseudo} pseudo
+ * @returns {PseudoProperty[]}
+ */
+function propertiesForPseudo(pseudo) {
+  return elementProperties[pseudo.value] ?? elementProperties.__default__
+}