modules.md

css-selector-parser / Exports

css-selector-parser

Table of contents

Interfaces

• AstAttribute
• AstClassName
• AstFactory
• AstFormula
• AstFormulaOfSelector
• AstId
• AstNamespaceName
• AstNestingSelector
• AstNoNamespace
• AstPseudoClass
• AstPseudoElement
• AstRule
• AstSelector
• AstString
• AstSubstitution
• AstTagName
• AstWildcardNamespace
• AstWildcardTag
• ParserError
• SyntaxDefinition

Type Aliases

• AstEntity
• CssLevel
• CssModule
• Parser

Variables

• ast

Functions

• createParser
• render

Type Aliases

AstEntity

Ƭ AstEntity: AstSelector | AstRule | AstTagName | AstWildcardTag | AstId | AstClassName | AstNamespaceName | AstWildcardNamespace | AstNoNamespace | AstNestingSelector | AstSubstitution | AstString | AstFormula | AstFormulaOfSelector | AstPseudoClass | AstAttribute | AstPseudoElement

One of CSS AST entity types.

---

CssLevel

Ƭ CssLevel: "css1" | "css2" | "css3" | "selectors-3" | "selectors-4" | "latest" | "progressive"

---

CssModule

Ƭ CssModule: keyof typeof cssModules

CSS Module name.

Example

'css-position-3'

Example

'css-scoping-1'

---

Parser

Ƭ Parser: (input: string) => AstSelector

Type declaration

▸ (input): AstSelector

Parses CSS selector string and returns CSS selector AST.

Throws

Parameters

Name	Type
input	string

Returns

AstSelector

Variables

ast

• Const ast: 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

Functions

createParser

▸ createParser(options?): Parser

Creates a parse function to be used later to parse CSS selectors.

Parameters

Name	Type	Description
options	Object	-
options.modules?	("css-position-1" | "css-position-2" | "css-position-3" | "css-position-4" | "css-scoping-1" | "css-pseudo-4" | "css-shadow-parts-1" | "css-nesting-1")[]	Additional CSS modules to include in the syntax definition. These are specific CSS modules that add new selectors or modify existing ones. Example ts ['css-position-3', 'css-scoping-1']
options.strict?	boolean	CSS selector parser in modern browsers is very forgiving. For instance, it works fine with unclosed attribute selectors: "[attr=value". Set to false in order to mimic browser behaviour. Default: true
options.substitutes?	boolean	Flag to enable substitutes. This is not part of CSS syntax, but rather a useful feature to pass variables into CSS selectors. Default: false Example ts "[attr=$variable]"
options.syntax?	CssLevel | SyntaxDefinition	CSS Syntax options to be used for parsing. Can either be one of the predefined CSS levels (CssLevel) or a more detailed syntax definition (SyntaxDefinition). Default: "latest"

Returns

Parser

---

render

▸ render(entity): string

Renders CSS Selector AST back to a string.

Example

import {ast, render} from 'css-selector-parser';

const selector = ast.selector({
    rules: [
        ast.rule({
            items: [
                ast.tagName({name: 'a'}),
                ast.id({name: 'user-23'}),
                ast.className({name: 'user'}),
                ast.pseudoClass({name: 'visited'}),
                ast.pseudoElement({name: 'before'})
            ]
        })
    ]
});

console.log(render(selector)); // a#user-23.user:visited::before

Parameters

Name	Type
entity	AstEntity

Returns

string