Add support for :has() selector

Author: wooorm

index.js

@@ -1,22 +1,12 @@
 'use strict'
 
-var Parser = require('css-selector-parser').CssSelectorParser
-var attributes = require('./lib/attribute')
-var pseudos = require('./lib/pseudo')
-var any = require('./lib/any')
-var nesting = require('./lib/nest')
-var compile = require('./lib/compile')
-
-var parser = new Parser()
-
-parser.registerAttrEqualityMods.apply(parser, attributes.support)
-parser.registerSelectorPseudos.apply(parser, pseudos.selectorPseudoSupport)
-parser.registerNestingOperators.apply(parser, nesting.support)
-
 exports.matches = matches
 exports.selectAll = selectAll
 exports.select = select
 
+var any = require('./lib/any')
+var parse = require('./lib/parse')
+
 function matches(selector, node, space) {
   return Boolean(
     any(parse(selector), node, {space: space, one: true, shallow: true})[0]
@@ -30,11 +20,3 @@ function select(selector, node, space) {
 function selectAll(selector, node, space) {
   return any(parse(selector), node, {space: space})
 }
-
-function parse(selector) {
-  if (typeof selector !== 'string') {
-    throw new Error('Expected `string` as selector, not `' + selector + '`')
-  }
-
-  return compile(parser.parse(selector))
-}

lib/any.js

@@ -47,6 +47,7 @@ function rule(query, tree, state) {
     language: undefined,
     direction: 'ltr',
     editableOrEditingHost: false,
+    scopeElements: tree.type === 'root' ? tree.children : [tree],
     iterator: match,
     one: state.one,
     shallow: state.shallow

lib/attribute.js

@@ -11,8 +11,6 @@ var commaSeparated = require('comma-separated-tokens').stringify
 var handle = zwitch('operator')
 var handlers = handle.handlers
 
-match.support = ['~', '|', '^', '$', '*']
-
 handle.unknown = unknownOperator
 handle.invalid = exists
 handlers['='] = exact

lib/enter-state.js

@@ -2,6 +2,8 @@
 
 /* eslint-disable complexity */
 
+module.exports = enter
+
 var svg = require('property-information/svg')
 var direction = require('direction')
 var visit = require('unist-util-visit')
@@ -15,9 +17,7 @@ var valueTypes = ['text', 'search', 'tel', 'url', 'email']
 var validDirections = [ltr, rtl, auto]
 var ignoreElements = ['bdi', 'script', 'style', 'textare']
 
-module.exports = config
-
-function config(state, node) {
+function enter(state, node) {
   var schema = state.schema
   var space = schema.space
   var language = state.language

lib/nest.js

@@ -1,25 +1,27 @@
 'use strict'
 
+module.exports = match
+
 var zwitch = require('zwitch')
 var enter = require('./enter-state')
 
-module.exports = zwitch('nestingOperator')
-
 var own = {}.hasOwnProperty
 var slice = [].slice
 
-var handle = module.exports
+var handle = zwitch('nestingOperator')
 var handlers = handle.handlers
 
-handle.support = ['>', '+', '~']
-
 handle.unknown = unknownNesting
 handle.invalid = topScan /* `undefined` is the top query selector. */
 handlers.null = descendant /* `null` is the descendant combinator. */
 handlers['>'] = child
 handlers['+'] = adjacentSibling
 handlers['~'] = generalSibling
 
+function match(query, node, index, parent, state) {
+  return handle(query, node, index, parent, state)
+}
+
 /* istanbul ignore next - Shouldn’t be invoked, parser gives correct data. */
 function unknownNesting(query) {
   throw new Error('Unexpected nesting `' + query.nestingOperator + '`')

lib/compile.js renamed to lib/parse.js

@@ -1,19 +1,33 @@
 'use strict'
 
+module.exports = parse
+
+var Parser = require('css-selector-parser').CssSelectorParser
 var zwitch = require('zwitch')
 var nthCheck = require('nth-check')
 
-module.exports = zwitch('type')
+var nth = ['nth-child', 'nth-last-child', 'nth-of-type', 'nth-last-of-type']
 
-var compile = module.exports
+var parser = new Parser()
+var compile = zwitch('type')
 var handlers = compile.handlers
 
-var nth = ['nth-child', 'nth-last-child', 'nth-of-type', 'nth-last-of-type']
+parser.registerAttrEqualityMods('~', '|', '^', '$', '*')
+parser.registerSelectorPseudos('any', 'matches', 'not', 'has')
+parser.registerNestingOperators('>', '+', '~')
 
 handlers.selectors = selectors
 handlers.ruleSet = ruleSet
 handlers.rule = rule
 
+function parse(selector) {
+  if (typeof selector !== 'string') {
+    throw new Error('Expected `string` as selector, not `' + selector + '`')
+  }
+
+  return compile(parser.parse(selector))
+}
+
 function selectors(query) {
   var selectors = query.selectors
   var length = selectors.length

lib/pseudo.js

@@ -1,5 +1,9 @@
 'use strict'
 
+/* eslint-disable complexity */
+
+module.exports = match
+
 var commaSeparated = require('comma-separated-tokens').parse
 var filter = require('bcp-47-match').extendedFilter
 var zwitch = require('zwitch')
@@ -8,10 +12,6 @@ var is = require('hast-util-is-element')
 var has = require('hast-util-has-property')
 var whitespace = require('hast-util-whitespace')
 
-module.exports = match
-
-match.selectorPseudoSupport = ['any', 'matches', 'not']
-
 match.needsIndex = [
   'first-child',
   'first-of-type',
@@ -56,6 +56,7 @@ handlers.empty = empty
 handlers.enabled = not(disabled)
 handlers['first-child'] = firstChild
 handlers['first-of-type'] = firstOfType
+handlers.has = hasSelector
 handlers.lang = lang
 handlers['last-child'] = lastChild
 handlers['last-of-type'] = lastOfType
@@ -96,7 +97,7 @@ function matches(query, node, index, parent, state) {
   state.shallow = true
   state.one = true
 
-  result = Boolean(anything(query.value, node, state)[0])
+  result = anything(query.value, node, state)[0] === node
 
   state.shallow = shallow
   state.one = one
@@ -155,8 +156,8 @@ function root(query, node, index, parent, state) {
   )
 }
 
-function scope(query, node, index, parent) {
-  return (!parent || parent.type === 'root') && is(node)
+function scope(query, node, index, parent, state) {
+  return is(node) && state.scopeElements.indexOf(node) !== -1
 }
 
 function empty(query, node) {
@@ -267,3 +268,55 @@ function assertDeep(state, query) {
     throw new Error('Cannot use `:' + query.name + '` without parent')
   }
 }
+
+function hasSelector(query, node, index, parent, state) {
+  var shallow = state.shallow
+  var one = state.one
+  var scopeElements = state.scopeElements
+  var value = appendScope(query.value)
+  var result
+
+  state.shallow = false
+  state.one = true
+  state.scopeElements = [node]
+
+  result = anything(value, node, state)[0]
+
+  state.shallow = shallow
+  state.one = one
+  state.scopeElements = scopeElements
+
+  return result
+}
+
+function appendScope(selector) {
+  var selectors
+  var length
+  var index
+  var rule
+
+  if (selector.type === 'ruleSet') {
+    selector = {type: 'selectors', selectors: [selector]}
+  }
+
+  selectors = selector.selectors
+  length = selectors.length
+  index = -1
+
+  while (++index < length) {
+    rule = selectors[index].rule
+    rule.nestingOperator = null
+
+    if (
+      !rule.pseudos ||
+      rule.pseudos.length !== 1 ||
+      rule.pseudos[0].name !== 'scope'
+    ) {
+      rule = {type: 'rule', rule: rule, pseudos: [{name: 'scope'}]}
+    }
+
+    selectors[index] = rule
+  }
+
+  return selector
+}

readme.md

@@ -153,23 +153,28 @@ Yields:
 
 ## Support
 
-*   [x] `*` (universal selector, namespaces not supported)
+*   [x] `*` (universal selector)
 *   [x] `,` (multiple selector)
 *   [x] `p` (type selector)
 *   [x] `.class` (class selector)
 *   [x] `#id` (id selector)
+*   [x] `article p` (combinator: descendant selector)
+*   [x] `article > p` (combinator: child selector)
+*   [x] `h1 + p` (combinator: adjacent sibling selector)
+*   [x] `h1 ~ p` (combinator: general sibling selector)
 *   [x] `[attr]` (attribute existence)
 *   [x] `[attr=value]` (attribute equality)
 *   [x] `[attr~=value]` (attribute contains in space-separated list)
 *   [x] `[attr|=value]` (attribute equality or prefix)
 *   [x] `[attr^=value]` (attribute begins with)
 *   [x] `[attr$=value]` (attribute ends with)
 *   [x] `[attr*=value]` (attribute contains)
-*   [x] `:any()` (pseudo-class, use `:matches` instead)
-*   [x] `:dir()` (pseudo-class)
-*   [x] `:lang()` (pseudo-class)
-*   [x] `:matches()` (pseudo-class)
-*   [x] `:not()` (pseudo-class)
+*   [x] `:any()` (functional pseudo-class, use `:matches` instead)
+*   [x] `:dir()` (functional pseudo-class)
+*   [x] `:has()` (functional pseudo-class)
+*   [x] `:lang()` (functional pseudo-class)
+*   [x] `:matches()` (functional pseudo-class)
+*   [x] `:not()` (functional pseudo-class)
 *   [x] `:any-link` (pseudo-class)
 *   [x] `:blank` (pseudo-class)
 *   [x] `:checked` (pseudo-class)
@@ -182,47 +187,60 @@ Yields:
 *   [x] `:required` (pseudo-class)
 *   [x] `:root` (pseudo-class)
 *   [x] `:scope` (pseudo-class):
-*   [x] `article p` (combinator: descendant selector)
-*   [x] `article > p` (combinator: child selector)
-*   [x] `h1 + p` (combinator: adjacent sibling selector)
-*   [x] `h1 ~ p` (combinator: general sibling selector)
 *   [x] \* `:first-child` (pseudo-class)
 *   [x] \* `:first-of-type` (pseudo-class)
 *   [x] \* `:last-child` (pseudo-class)
 *   [x] \* `:last-of-type` (pseudo-class)
 *   [x] \* `:only-child` (pseudo-class)
 *   [x] \* `:only-of-type` (pseudo-class)
-*   [x] \* `:nth-child()` (pseudo-class)
-*   [x] \* `:nth-last-child()` (pseudo-class)
-*   [x] \* `:nth-last-of-type()` (pseudo-class)
-*   [x] \* `:nth-of-type()` (pseudo-class)
+*   [x] \* `:nth-child()` (functional pseudo-class)
+*   [x] \* `:nth-last-child()` (functional pseudo-class)
+*   [x] \* `:nth-last-of-type()` (functional pseudo-class)
+*   [x] \* `:nth-of-type()` (functional pseudo-class)
 
 ## Unsupported
 
-*   [ ] `>>` (explicit descendant combinator)
-*   [ ] `||` (column combinator)
+*   [ ] † `||` (column combinator)
+*   [ ] ‡ `ns|E` (namespace type selector)
+*   [ ] ‡ `*|E` (any namespace type selector)
+*   [ ] ‡ `|E` (no namespace type selector)
+*   [ ] ‡ `[ns|attr]` (namespace attribute)
+*   [ ] ‡ `[*|attr]` (any namespace attribute)
+*   [ ] ‡ `[|attr]` (no namespace attribute)
 *   [ ] ‡ `[attr=value i]` (attribute case-insensitive)
+*   [ ] ‡ `:has()` (functional pseudo class)
+*   [ ] ‖ `:nth-child(n of S)` (scoped to parent S)
+*   [ ] ‖ `:nth-last-child(n of S)` (scoped to parent S)
 *   [ ] † `:active` (pseudo-class)
 *   [ ] † `:current` (pseudo-class)
+*   [ ] † `:current()` (functional pseudo-class)
 *   [ ] † `:default` (pseudo-class)
 *   [ ] † `:defined` (pseudo-class)
-*   [ ] † `:fullscreen` (pseudo-class)
+*   [ ] † `:drop` (pseudo-class)
+*   [ ] † `:drop()` (functional pseudo-class)
 *   [ ] † `:focus` (pseudo-class)
+*   [ ] † `:focus-visible` (pseudo-class)
+*   [ ] † `:focus-within` (pseudo-class)
+*   [ ] † `:fullscreen` (pseudo-class)
 *   [ ] † `:future` (pseudo-class)
-*   [ ] § `:has()` (pseudo-class)
+*   [ ] ‖ `:host()` (functional pseudo-class)
+*   [ ] ‖ `:host-context()` (functional pseudo-class)
 *   [ ] † `:hover` (pseudo-class)
-*   [ ] † `:indeterminate` (pseudo-class)
 *   [ ] § `:in-range` (pseudo-class)
+*   [ ] † `:indeterminate` (pseudo-class)
 *   [ ] § `:invalid` (pseudo-class)
 *   [ ] † `:link` (pseudo-class)
 *   [ ] † `:local-link` (pseudo-class)
-*   [ ] † `nth-column()` (pseudo-class)
-*   [ ] † `nth-last-column()` (pseudo-class)
+*   [ ] † `:nth-column()` (functional pseudo-class)
+*   [ ] † `:nth-last-column()` (functional pseudo-class)
 *   [ ] § `:out-of-range` (pseudo-class)
 *   [ ] † `:past` (pseudo-class)
 *   [ ] † `:paused` (pseudo-class)
 *   [ ] † `:placeholder-shown` (pseudo-class)
 *   [ ] † `:playing` (pseudo-class)
+*   [ ] ‖ `:something()` (functional pseudo-class)
+*   [ ] † `:target` (pseudo-class)
+*   [ ] † `:target-within` (pseudo-class)
 *   [ ] † `:user-error` (pseudo-class)
 *   [ ] † `:user-invalid` (pseudo-class)
 *   [ ] § `:valid` (pseudo-class)
@@ -235,6 +253,7 @@ Yields:
 *   † — Needs a user, browser, interactivity, or scripting to make sense
 *   ‡ — Not supported by the underlying algorithm
 *   § — Not very interested in writing / including the code for this
+*   ‖ — Too new, the spec is still changing
 
 ## Contribute