How to use @stylable/core - 10 common examples

if (!meta.mappedSymbols[word]) {
            return { word, meta: null };
        } else if (meta.mappedSymbols[word]._kind === 'var') {
            // deepResolve doesn't do local symbols
            return { word, meta };
        }
        const resolvedVar = stylable.resolver.deepResolve(meta.mappedSymbols[word]);
        if (resolvedVar) {
            return { word, meta: resolvedVar.meta };
        } else {
            return { word, meta: null };
        }
    }

    const transformer = new StylableTransformer({
        diagnostics: new Diagnostics(),
        fileProcessor: stylable.fileProcessor,
        requireModule: () => {
            throw new Error('Not implemented, why are we here');
        }
    });

    const expandedLine: string = expandCustomSelectors(
        postcss.rule({ selector: lineChunkAtCursor }),
        meta.customSelectors
    )
        .split(' ')
        .pop()!; // TODO: replace with selector parser
    const resolvedElements = transformer.resolveSelectorElements(meta, expandedLine);

    let reso: CSSResolve | undefined;
    if (word.charAt(0) !== word.charAt(0).toLowerCase()) {

// we're looking at a var usage
        if (!meta.mappedSymbols[word]) {
            return { word, meta: null };
        } else if (meta.mappedSymbols[word]._kind === 'var') {
            // deepResolve doesn't do local symbols
            return { word, meta };
        }
        const resolvedVar = stylable.resolver.deepResolve(meta.mappedSymbols[word]);
        if (resolvedVar) {
            return { word, meta: resolvedVar.meta };
        } else {
            return { word, meta: null };
        }
    }

    const transformer = new StylableTransformer({
        diagnostics: new Diagnostics(),
        fileProcessor: stylable.fileProcessor,
        requireModule: () => {
            throw new Error('Not implemented, why are we here');
        }
    });

    const expandedLine: string = expandCustomSelectors(
        postcss.rule({ selector: lineChunkAtCursor }),
        meta.customSelectors
    )
        .split(' ')
        .pop()!; // TODO: replace with selector parser
    const resolvedElements = transformer.resolveSelectorElements(meta, expandedLine);

    let reso: CSSResolve | undefined;

? (astAtCursor as SRule)
                : null;

        const { lineChunkAtCursor, fixedCharIndex } = getChunkAtCursor(
            fullLineText,
            cursorPosInLine
        );
        const ps = parseSelector(lineChunkAtCursor, fixedCharIndex);
        const chunkStrings: string[] = ps.selector.reduce((acc, s) => {
            return acc.concat(s.text);
        }, [] as string[]);
        const currentSelector =
            (ps.selector[0] as SelectorChunk).classes[0] ||
            (ps.selector[0] as SelectorChunk).customSelectors[0] ||
            chunkStrings[0];
        const expandedLine: string = expandCustomSelectors(
            postcss.rule({ selector: lineChunkAtCursor }),
            meta.customSelectors
        )
            .split(' ')
            .pop()!; // TODO: replace with selector parser
        const resolvedElements = transformer.resolveSelectorElements(meta, expandedLine);

        let resolved: CSSResolve[] = [];
        if (currentSelector && resolvedElements[0].length) {
            const clas = resolvedElements[0].find(
                e => e.type === 'class' || (e.type === 'element' && e.resolved.length > 1)
            ); // TODO: better type parsing
            resolved = clas ? clas.resolved : [];
        }

        return {

if (resolvedVar) {
            return { word, meta: resolvedVar.meta };
        } else {
            return { word, meta: null };
        }
    }

    const transformer = new StylableTransformer({
        diagnostics: new Diagnostics(),
        fileProcessor: stylable.fileProcessor,
        requireModule: () => {
            throw new Error('Not implemented, why are we here');
        }
    });

    const expandedLine: string = expandCustomSelectors(
        postcss.rule({ selector: lineChunkAtCursor }),
        meta.customSelectors
    )
        .split(' ')
        .pop()!; // TODO: replace with selector parser
    const resolvedElements = transformer.resolveSelectorElements(meta, expandedLine);

    let reso: CSSResolve | undefined;
    if (word.charAt(0) !== word.charAt(0).toLowerCase()) {
        reso = resolvedElements[0][resolvedElements[0].length - 1].resolved.find(
            res => !!(res.symbol as ClassSymbol)['-st-root']
        );
    } else {
        reso = resolvedElements[0][resolvedElements[0].length - 1].resolved.find(res => {
            let symbolStates;
            if (res.symbol._kind === 'class') {

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];
                }
            }
        });

private isContainsUnusedParts(
        selectorAst: SelectorAstNode,
        usageMapping: Record,
        matchNamespace: RegExp
    ) {
        // TODO: !!-!-!! last working point
        let isContainsUnusedParts = false;
        traverseNode(selectorAst, node => {
            if (isContainsUnusedParts) {
                return false;
            }
            if (node.type === 'class') {
                const parts = matchNamespace.exec(node.name);
                if (parts) {
                    if (usageMapping[parts[1]] === false) {
                        isContainsUnusedParts = true;
                    }
                }
            } else if (node.type === 'nested-pseudo-element') {
                return false;
            }
            return undefined;
        });
        return isContainsUnusedParts;

Object.values(defMeta.mappedSymbols).some(sym => {
            const symbolStates = sym._kind === 'class' && sym[valueMapping.states];
            // states
            return (
                sym._kind === 'class' &&
                symbolStates &&
                Object.keys(symbolStates).some(k => {
                    if (k === word && !!pos) {
                        const postcsspos = new ProviderPosition(pos.line + 1, pos.character);
                        const pfp = pathFromPosition(callingMeta.rawAst, postcsspos, [], true);
                        const selec = (pfp[pfp.length - 1] as postcss.Rule).selector;
                        // If called from -st-state, i.e. inside node, pos is not in selector.
                        // Use 1 and not 0 for selector that starts with'.'
                        const char = isInNode(postcsspos, pfp[pfp.length - 1]) ? 1 : pos.character;
                        const parsel = parseSelector(selec, char);
                        const t = parsel.target;
                        const arr = Array.isArray(t.focusChunk)
                            ? (t.focusChunk as SelectorQuery[])[t.index].text

const newStates = lastNode.resolved.reduce((acc, cur) => {
                let relPath = path.relative(path.dirname(meta.source), cur.meta.source);
                if (!relPath.startsWith('.')) {
                    relPath = './' + relPath;
                }
                const symbol = cur.symbol;
                if (symbol._kind === 'class') {
                    const symbolStates = symbol[valueMapping.states];

                    if (symbolStates) {
                        Object.keys(symbolStates).forEach(k => {
                            if (
                                !acc[k] &&
                                // selectoid is a substring of current state
                                (k.slice(0, -1).startsWith(lastSelectoid.replace(':', '')) ||
                                    // selectoid is a CSS native pseudo-sclass
                                    nativePseudoClasses.indexOf(lastSelectoid.replace(':', '')) !==
                                        -1 ||
                                    allStates.hasOwnProperty(lastSelectoid.replace(':', ''))) &&
                                chunkyStates.every(cs => cs !== k)
                            ) {
                                const symbolStates = symbol[valueMapping.states];
                                const stateDef = symbolStates && symbolStates[k];

Object.values(meta.mappedSymbols).some(k => {
                if (k._kind === 'class') {
                    const symbolStates = k[valueMapping.states];

                    if (symbolStates && Object.keys(symbolStates).some(key => key === word)) {
                        const postcsspos = new ProviderPosition(
                            position.line + 1,
                            position.character
                        );
                        const pfp = pathFromPosition(callingMeta.rawAst, postcsspos, [], true);
                        const selec = (pfp[pfp.length - 1] as postcss.Rule).selector;

                        // If called from -st-state, i.e. inside node, pos is not in selector.
                        // Use 1 and not 0 for selector that starts with'.'
                        const char = isInNode(postcsspos, pfp[pfp.length - 1])
                            ? 1
                            : position.character;
                        const parsel = parseSelector(selec, char);
                        const t = parsel.target;

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];
                }
            }