How to use the @stylable/core.valueMapping.extends 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 / language-service / src / lib / provider.ts View on Github external
while (val.nodes && val.nodes.length > 0) {
        if (findNode(val.nodes, position.character).sourceIndex >= 0) {
            val = findNode(val.nodes, position.character);
        } else {
            break;
        }
    }

    const word: string = val.value;

    const { lineChunkAtCursor } = getChunkAtCursor(
        res.currentLine.slice(0, val.sourceIndex + val.value.length),
        position.character
    );
    const directiveRegex = new RegExp(
        valueMapping.extends +
            '|' +
            valueMapping.named +
            '|' +
            valueMapping.default +
            '|' +
            valueMapping.mixin
    );
    if (lineChunkAtCursor.startsWith(':global')) {
        return { word: ':global(' + word + ')', meta };
    }

    const match = lineChunkAtCursor.match(directiveRegex);
    if (match && !!meta.mappedSymbols[word]) {
        // We're in an -st directive
        let imp;
        if (meta.mappedSymbols[word]._kind === 'import') {
github wix / stylable / packages / schema-extract / src / main.ts View on Github external
};

    for (const entry of Object.keys(meta.mappedSymbols)) {
        if (!schema.properties) {
            schema.properties = {};
        }

        const symbol = meta.mappedSymbols[entry];

        if (typeof schema.properties[entry] === 'boolean') {
            continue;
        } else {
            if (symbol._kind === 'class' || symbol._kind === 'element') {
                schema.properties[entry] = {};
                const schemaEntry = schema.properties[entry] as StylableSymbolSchema;
                const { [valueMapping.states]: states, [valueMapping.extends]: extended } = symbol;

                if (symbol.alias && symbol.alias.import) {
                    addModuleDependency(schema, filePath, symbol.alias.import.from, basePath, path);

                    schemaEntry.$ref = getImportedRef(filePath, symbol.alias, basePath, path);
                } else {
                    schemaEntry.$ref = `stylable/${symbol._kind}`;
                }

                if (states) {
                    schemaEntry.states = getStatesForSymbol(states);
                }

                if (extended) {
                    schemaEntry.extends =
                        extended._kind === 'import' && extended.import
github wix / stylable / packages / language-service / src / lib / completion-providers.ts View on Github external
provide({ lineChunkAtCursor, position, meta, stylable }: ProviderOptions): Completion[] {
        if (lineChunkAtCursor.startsWith(valueMapping.extends)) {
            const value = lineChunkAtCursor.slice((valueMapping.extends + ':').length);
            const spaces = value.search(/\S|$/);
            const str = value.slice(spaces);
            const comps: string[][] = [[]];
            comps.push(
                ...Object.keys(meta.classes)
                    .filter(s => s.startsWith(str))
                    .map(s => [s, 'Local file'])
            );
            meta.imports.forEach(i => {
                if (
                    i.defaultExport &&
                    i.defaultExport.startsWith(str) &&
                    i.from.endsWith('st.css')
                ) {
                    comps.push([i.defaultExport, i.fromRelative]);
                }
github wix / stylable / packages / language-service / src / lib / provider.ts View on Github external
public findMyState(
        origMeta: StylableMeta,
        elementName: string,
        state: string
    ): CSSResolve | null {
        const importedSymbol = origMeta.classes[elementName][valueMapping.extends];
        let res;

        if (importedSymbol && importedSymbol._kind === 'import') {
            res = this.stylable.resolver.resolveImport(importedSymbol);
        }

        if (
            !!res &&
            res._kind === 'css' &&
            Object.keys(res.symbol[valueMapping.states]).indexOf(state) !== -1
        ) {
            return res as CSSResolve;
        } else if (
            !!res &&
            res._kind === 'css' &&
            !!(origMeta.mappedSymbols[elementName] as ClassSymbol)[valueMapping.extends]
github wix / stylable / packages / language-service / src / lib / completion-providers.ts View on Github external
provide({ lineChunkAtCursor, position, meta, stylable }: ProviderOptions): Completion[] {
        if (lineChunkAtCursor.startsWith(valueMapping.extends)) {
            const value = lineChunkAtCursor.slice((valueMapping.extends + ':').length);
            const spaces = value.search(/\S|$/);
            const str = value.slice(spaces);
            const comps: string[][] = [[]];
            comps.push(
                ...Object.keys(meta.classes)
                    .filter(s => s.startsWith(str))
                    .map(s => [s, 'Local file'])
            );
            meta.imports.forEach(i => {
                if (
                    i.defaultExport &&
                    i.defaultExport.startsWith(str) &&
                    i.from.endsWith('st.css')
                ) {
                    comps.push([i.defaultExport, i.fromRelative]);
github wix / stylable / packages / language-service / src / lib / provider.ts View on Github external
: t.focusChunk.text;
                        let name = findLast(
                            arr,
                            (str: string) => !str.startsWith(':') || str.startsWith('::')
                        );
                        name = name!.replace('.', '').replace(/:/g, '');
                        if (
                            name === k.name ||
                            (name.charAt(0) !== name.charAt(0).toLowerCase() && k.name === 'root')
                        ) {
                            temp = k;
                            stateMeta = meta;
                            return true;
                        } else if (
                            !!callingMeta.mappedSymbols[name] &&
                            !!(callingMeta.mappedSymbols[name] as ClassSymbol)[valueMapping.extends]
                        ) {
                            const res = this.findMyState(callingMeta, name, word);
                            if (!!res) {
                                temp = k;
                                stateMeta = res.meta!;
                                return true;
                            }
                        }
                    }
                }
                return false;
            })
        ) {