How to use the @stylable/core.parseSelector function in @stylable/core

To help you get started, we’ve selected a few @stylable/core examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github wix / stylable / packages / optimizer / src / classname-optimizer.ts View on Github external
public rewriteSelector(
        selector: string,
        usageMapping: Record,
        globals: Record = {}
    ) {
        const ast = parseSelector(selector);
        traverseNode(ast, node => {
            if (node.type === 'class' && !globals[node.name]) {
                const isState = Object.keys(usageMapping).some(namespace => {
                    return node.name.startsWith(
                        '' + namespace + pseudoStates.booleanStateDelimiter
                    );
                });

                if (!isState) {
                    // is not a state
                    if (!this.context.names[node.name]) {
                        this.generateName(node.name);
                    }
                    node.name = this.context.names[node.name];
                }
            }
github wix / stylable / packages / dom-test-kit / src / stylable-dom-util.ts View on Github external
public scopeSelector(selector?: string): string {
        if (!selector) {
            return this.scopeSelector('.root');
        }
        const ast = parseSelector(selector);
        traverseNode(ast, (node: any) => {
            if (node.type === 'class') {
                node.name = this.stylesheet.classes[node.name] || node.name;
            } else if (node.type === 'pseudo-class') {
                const param = node.content;
                if (!param) {
                    node.type = 'class';
                    node.name = this.stylesheet.cssStates({ [node.name]: true });
                } else {
                    const state = this.stylesheet.cssStates({ [node.name]: param });
                    if (isValidClassName(param)) {
                        node.type = 'class';
                        node.name = state;
                    } else {
                        node.type = 'attribute';
                        node.content = state;
github wix / stylable / packages / optimizer / src / stylable-optimizer.ts View on Github external
const outputSelectors = rule.selectors!.filter(selector => {
                const selectorAst = parseSelector(selector);
                return !this.isContainsUnusedParts(selectorAst, usageMapping, matchNamespace);
            });
            if (outputSelectors.length) {
github wix / stylable / packages / webpack-extensions / src / stylable-forcestates-plugin.ts View on Github external
ast.walkRules(rule => {
        const selectorAst = parseSelector(rule.selector);

        const overrideSelectors = selectorAst.nodes.reduce((selectors, selector) => {
            if (hasStates(selector, context)) {
                selectors.push(transformStates(cloneDeep(selector), context));
            }
            return selectors;
        }, [] as SelectorAstNode[]);

        if (overrideSelectors.length) {
            selectorAst.nodes.push(...overrideSelectors);
            rule.selector = stringifySelector(selectorAst);
        }
    });
}