css-selector-parser / Exports / AstFactory
AST structure generators and matchers.
For instance, ast.selector({rules: [...]}) creates AstSelector and ast.isSelector(...) checks if
AstSelector was specified.
Example
// Represents CSS selector: ns|div#user-34.user.user-active[role="button"]:lang(en)::before > *
const selector = ast.selector({
rules: [
ast.rule({
items: [
ast.tagName({name: 'div', namespace: ast.namespaceName({name: 'ns'})}),
ast.id({name: 'user-34'}),
ast.className({name: 'user'}),
ast.className({name: 'user-active'}),
ast.attribute({
name: 'role',
operator: '=',
value: ast.string({value: 'button'})
}),
ast.pseudoClass({
name: 'lang',
argument: ast.string({value: 'en'})
}),
ast.pseudoElement({name: 'before'})
],
nestedRule: ast.rule({combinator: '>', items: [ast.wildcardTag()]})
})
]
});
console.log(ast.isSelector(selector)); // prints true
console.log(ast.isRule(selector)); // prints false- attribute
- className
- formula
- formulaOfSelector
- id
- isAttribute
- isClassName
- isFormula
- isFormulaOfSelector
- isId
- isNamespaceName
- isNestingSelector
- isNoNamespace
- isPseudoClass
- isPseudoElement
- isRule
- isSelector
- isString
- isSubstitution
- isTagName
- isWildcardNamespace
- isWildcardTag
- namespaceName
- nestingSelector
- noNamespace
- pseudoClass
- pseudoElement
- rule
- selector
- string
- substitution
- tagName
- wildcardNamespace
- wildcardTag
• attribute: (props: { caseSensitivityModifier?: string ; name: string ; namespace?: AstNamespaceName | AstWildcardNamespace | AstNoNamespace ; operator?: string ; value?: AstSubstitution | AstString }) => AstAttribute
▸ (props): AstAttribute
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.caseSensitivityModifier? |
string |
Comparison case sensitivity modifier (i.e. "i" in case if "[role='button' i]"). |
props.name |
string |
Attribute name (i.e. "href" in case if "[href]"). |
props.namespace? |
AstNamespaceName | AstWildcardNamespace | AstNoNamespace |
Namespace according to https://drafts.csswg.org/selectors/#attrnmsp. |
props.operator? |
string |
Comparison operator (i.e. "|=" in case if "[role|=button]"). |
props.value? |
AstSubstitution | AstString |
Comparison value (i.e. "button" in case if "[role=button]"). |
• className: (props: { name: string }) => AstClassName
▸ (props): AstClassName
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.name |
string |
ID name. I.e. .user -> "user". |
• formula: (props: { a: number ; b: number }) => AstFormula
▸ (props): AstFormula
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.a |
number |
Multiplier of n. |
props.b |
number |
Constant added to a*n. |
• formulaOfSelector: (props: { a: number ; b: number ; selector: AstRule }) => AstFormulaOfSelector
▸ (props): AstFormulaOfSelector
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.a |
number |
Multiplier of n. |
props.b |
number |
Constant added to a*n. |
props.selector |
AstRule |
Selector that goes after formula (i.e. "div -> span" in case of ":nth-child(2n + 1 of div > span)" |
• id: (props: { name: string }) => AstId
▸ (props): AstId
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.name |
string |
ID name. I.e. #root -> "root". |
• isAttribute: (entity: unknown) => entity is AstAttribute
▸ (entity): entity is AstAttribute
| Name | Type |
|---|---|
entity |
unknown |
entity is AstAttribute
• isClassName: (entity: unknown) => entity is AstClassName
▸ (entity): entity is AstClassName
| Name | Type |
|---|---|
entity |
unknown |
entity is AstClassName
• isFormula: (entity: unknown) => entity is AstFormula
▸ (entity): entity is AstFormula
| Name | Type |
|---|---|
entity |
unknown |
entity is AstFormula
• isFormulaOfSelector: (entity: unknown) => entity is AstFormulaOfSelector
▸ (entity): entity is AstFormulaOfSelector
| Name | Type |
|---|---|
entity |
unknown |
entity is AstFormulaOfSelector
• isId: (entity: unknown) => entity is AstId
▸ (entity): entity is AstId
| Name | Type |
|---|---|
entity |
unknown |
entity is AstId
• isNamespaceName: (entity: unknown) => entity is AstNamespaceName
▸ (entity): entity is AstNamespaceName
| Name | Type |
|---|---|
entity |
unknown |
entity is AstNamespaceName
• isNestingSelector: (entity: unknown) => entity is AstNestingSelector
▸ (entity): entity is AstNestingSelector
| Name | Type |
|---|---|
entity |
unknown |
entity is AstNestingSelector
• isNoNamespace: (entity: unknown) => entity is AstNoNamespace
▸ (entity): entity is AstNoNamespace
| Name | Type |
|---|---|
entity |
unknown |
entity is AstNoNamespace
• isPseudoClass: (entity: unknown) => entity is AstPseudoClass
▸ (entity): entity is AstPseudoClass
| Name | Type |
|---|---|
entity |
unknown |
entity is AstPseudoClass
• isPseudoElement: (entity: unknown) => entity is AstPseudoElement
▸ (entity): entity is AstPseudoElement
| Name | Type |
|---|---|
entity |
unknown |
entity is AstPseudoElement
• isRule: (entity: unknown) => entity is AstRule
▸ (entity): entity is AstRule
| Name | Type |
|---|---|
entity |
unknown |
entity is AstRule
• isSelector: (entity: unknown) => entity is AstSelector
▸ (entity): entity is AstSelector
| Name | Type |
|---|---|
entity |
unknown |
entity is AstSelector
• isString: (entity: unknown) => entity is AstString
▸ (entity): entity is AstString
| Name | Type |
|---|---|
entity |
unknown |
entity is AstString
• isSubstitution: (entity: unknown) => entity is AstSubstitution
▸ (entity): entity is AstSubstitution
| Name | Type |
|---|---|
entity |
unknown |
entity is AstSubstitution
• isTagName: (entity: unknown) => entity is AstTagName
▸ (entity): entity is AstTagName
| Name | Type |
|---|---|
entity |
unknown |
entity is AstTagName
• isWildcardNamespace: (entity: unknown) => entity is AstWildcardNamespace
▸ (entity): entity is AstWildcardNamespace
| Name | Type |
|---|---|
entity |
unknown |
entity is AstWildcardNamespace
• isWildcardTag: (entity: unknown) => entity is AstWildcardTag
▸ (entity): entity is AstWildcardTag
| Name | Type |
|---|---|
entity |
unknown |
entity is AstWildcardTag
• namespaceName: (props: { name: string }) => AstNamespaceName
▸ (props): AstNamespaceName
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.name |
string |
Namespace name (i.e. "ns" in case of "ns|div"). " |
• nestingSelector: (props?: {}) => AstNestingSelector
▸ (props?): AstNestingSelector
| Name | Type |
|---|---|
props? |
Object |
• noNamespace: (props?: {}) => AstNoNamespace
▸ (props?): AstNoNamespace
| Name | Type |
|---|---|
props? |
Object |
• pseudoClass: (props: { argument?: AstSelector | AstSubstitution | AstString | AstFormula | AstFormulaOfSelector ; name: string }) => AstPseudoClass
▸ (props): AstPseudoClass
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.argument? |
AstSelector | AstSubstitution | AstString | AstFormula | AstFormulaOfSelector |
Pseudo-class value (i.e. "en" in case of ":lang(en)"). |
props.name |
string |
Pseudo-class name (i.e. "hover" in case of ":hover"). |
• pseudoElement: (props: { argument?: AstSelector | AstSubstitution | AstString ; name: string }) => AstPseudoElement
▸ (props): AstPseudoElement
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.argument? |
AstSelector | AstSubstitution | AstString |
Pseudo-element value (i.e. "foo" in case of "::part(foo)"). |
props.name |
string |
Pseudo-element name (i.e. "before" in case of "::before"). |
• rule: (props: { combinator?: string ; items: (AstTagName | AstWildcardTag | AstId | AstClassName | AstNestingSelector | AstPseudoClass | AstAttribute | AstPseudoElement)[] ; nestedRule?: AstRule }) => AstRule
▸ (props): AstRule
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.combinator? |
string |
Rule combinator which was used to nest this rule (i.e. ">" in case of "div > span" if the current rule is "span"). |
props.items |
(AstTagName | AstWildcardTag | AstId | AstClassName | AstNestingSelector | AstPseudoClass | AstAttribute | AstPseudoElement)[] |
Items of a CSS rule. Can be tag, ids, class names, pseudo-classes and pseudo-elements. |
props.nestedRule? |
AstRule |
Nested rule if specified (i.e. "div > span"). |
• selector: (props: { rules: AstRule[] }) => AstSelector
▸ (props): AstSelector
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.rules |
AstRule[] |
List of CSS rules. Every rule contains conditions. Selector is considered matched once at least one rule matches. |
• string: (props: { value: string }) => AstString
▸ (props): AstString
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.value |
string |
The actual string value. |
• substitution: (props: { name: string }) => AstSubstitution
▸ (props): AstSubstitution
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.name |
string |
Substitution name (i.e. "var" in case of "[role=$var]" or ":lang($var)"). |
• tagName: (props: { name: string ; namespace?: AstNamespaceName | AstWildcardNamespace | AstNoNamespace }) => AstTagName
▸ (props): AstTagName
| Name | Type | Description |
|---|---|---|
props |
Object |
- |
props.name |
string |
Tag name, i.e. "div". |
props.namespace? |
AstNamespaceName | AstWildcardNamespace | AstNoNamespace |
Namespace according to https://www.w3.org/TR/css3-namespace/. |
• wildcardNamespace: (props?: {}) => AstWildcardNamespace
▸ (props?): AstWildcardNamespace
| Name | Type |
|---|---|
props? |
Object |
• wildcardTag: (props?: { namespace?: AstNamespaceName | AstWildcardNamespace | AstNoNamespace }) => AstWildcardTag
▸ (props?): AstWildcardTag
| Name | Type | Description |
|---|---|---|
props? |
Object |
- |
props.namespace? |
AstNamespaceName | AstWildcardNamespace | AstNoNamespace |
Namespace according to https://www.w3.org/TR/css3-namespace/. |