allow any pseudo-element to be a functional-pseudo (#33)

csstree · Feb 2, 2017 · 49f6d4a · 49f6d4a
1 parent 9c894f2
commit 49f6d4a
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 14 deletions.
diff --git a/lib/parser/index.js b/lib/parser/index.js
@@ -109,7 +109,8 @@ Parser.prototype = {
         'nth-child': sequence.nthWithOfClause,
         'nth-last-child': sequence.nthWithOfClause,
         'nth-of-type': sequence.nth,
-        'nth-last-of-type': sequence.nth
+        'nth-last-of-type': sequence.nth,
+        'slotted': sequence.compoundSelectorList
     },
     context: {
         stylesheet: getStyleSheet,

diff --git a/lib/parser/sequence.js b/lib/parser/sequence.js
@@ -23,6 +23,7 @@ var RELATIVE = true;
 var ALLOW_OF_CLAUSE = true;
 var DISALLOW_OF_CLAUSE = false;
 var DISALLOW_VAR = false;
+var DISALLOW_COMBINATORS = true;
 
 function singleIdentifier() {
     return new List().appendData(
@@ -42,6 +43,12 @@ function relativeSelectorList() {
     );
 }
 
+function compoundSelectorList() {
+    return new List().appendData(
+        this.Selector(ABSOLUTE, DISALLOW_COMBINATORS)
+    );
+}
+
 function nth() {
     return new List().appendData(
         this.Nth(DISALLOW_OF_CLAUSE)
@@ -171,6 +178,7 @@ module.exports = {
     singleIdentifier: singleIdentifier,
     selectorList: selectorList,
     relativeSelectorList: relativeSelectorList,
+    compoundSelectorList: compoundSelectorList,
     nth: nth,
     nthWithOfClause: nthWithOfClause,
     default: defaultSequence

diff --git a/lib/parser/type/PseudoClass.js b/lib/parser/type/PseudoClass.js
@@ -3,17 +3,18 @@ var TYPE = require('../../scanner').TYPE;
 
 var COLON = TYPE.Colon;
 var LEFTPARENTHESIS = TYPE.LeftParenthesis;
-var RIGHTPARENTESIS = TYPE.RightParenthesis;
+var RIGHTPARENTHESIS = TYPE.RightParenthesis;
 var DISALLOW_VAR = false;
 var BALANCED = true;
 
-// : ( ident | function )
+// : ident [ '(' .. ')' ]?
 module.exports = function PseudoClass() {
     var start = this.scanner.tokenStart;
     var name;
     var children = null;
 
     this.scanner.eat(COLON);
+
     name = this.readIdent(DISALLOW_VAR);
 
     if (this.scanner.tokenType === LEFTPARENTHESIS) {
@@ -29,7 +30,7 @@ module.exports = function PseudoClass() {
             children = new List().appendData(this.Raw(BALANCED, 0, 0));
         }
 
-        this.scanner.eat(RIGHTPARENTESIS);
+        this.scanner.eat(RIGHTPARENTHESIS);
     }
 
     return {

diff --git a/lib/parser/type/PseudoElement.js b/lib/parser/type/PseudoElement.js
@@ -4,10 +4,10 @@ var TYPE = require('../../scanner').TYPE;
 var COLON = TYPE.Colon;
 var LEFTPARENTHESIS = TYPE.LeftParenthesis;
 var RIGHTPARENTHESIS = TYPE.RightParenthesis;
-var ABSOLUTE = false;
-var DISALLOW_COMBINATORS = true;
+var DISALLOW_VAR = false;
+var BALANCED = true;
 
-// :: ident
+// :: ident [ '(' .. ')' ]?
 module.exports = function PseudoElement() {
     var start = this.scanner.tokenStart;
     var name;
@@ -16,14 +16,22 @@ module.exports = function PseudoElement() {
     this.scanner.eat(COLON);
     this.scanner.eat(COLON);
 
-    // https://drafts.csswg.org/css-scoping/#slotted-pseudo
-    if (this.scanner.lookupValue(0, 'slotted')) {
-        name = this.readIdent(false);
-        this.scanner.eat(LEFTPARENTHESIS);
-        children = new List().appendData(this.Selector(ABSOLUTE, DISALLOW_COMBINATORS));
+    name = this.readIdent(DISALLOW_VAR);
+
+    if (this.scanner.tokenType === LEFTPARENTHESIS) {
+        var nameLowerCase = name.toLowerCase();
+
+        this.scanner.next();
+
+        if (this.pseudo.hasOwnProperty(nameLowerCase)) {
+            this.readSC();
+            children = this.pseudo[nameLowerCase].call(this);
+            this.readSC();
+        } else {
+            children = new List().appendData(this.Raw(BALANCED, 0, 0));
+        }
+
         this.scanner.eat(RIGHTPARENTHESIS);
-    } else {
-        name = this.readIdent(false);
     }
 
     return {

diff --git a/test/fixture/parse/selector/PseudoElement.json b/test/fixture/parse/selector/PseudoElement.json
@@ -22,5 +22,18 @@
             "name": "before",
             "children": null
         }
+    },
+    "functional pseudo element": {
+        "source": "::test(1 + 2)",
+        "ast": {
+            "type": "PseudoElement",
+            "name": "test",
+            "children": [
+                {
+                    "type": "Raw",
+                    "value": "1 + 2"
+                }
+            ]
+        }
     }
 }