How to use @lwc/style-compiler - 3 common examples

To help you get started, we’ve selected a few @lwc/style-compiler 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 salesforce / lwc / packages / @lwc / compiler / src / transformers / style.ts View on Github external
const styleCompilerConfig = {
        customProperties: {
            allowDefinition: customProperties.allowDefinition,
            resolverModule:
                customProperties.resolution.type === 'module'
                    ? customProperties.resolution.name
                    : undefined,
        },
        outputConfig: {
            minify,
        },
    };

    let res;
    try {
        res = styleCompiler.transform(src, filename, styleCompilerConfig);
    } catch (e) {
        throw normalizeToCompilerError(TransformerErrors.CSS_TRANSFORMER_ERROR, e, { filename });
    }

    // Rollup only cares about the mappings property on the map. Since producing a source map for
    // the styles doesn't make sense, the transform returns an empty mappings.
    return {
        code: res.code,
        map: { mappings: '' },
    };
}
github salesforce / lwc / packages / @lwc / compiler / src / transformers / style.ts View on Github external
const styleCompilerConfig = {
        customProperties: {
            allowDefinition: customProperties.allowDefinition,
            resolverModule:
                customProperties.resolution.type === 'module'
                    ? customProperties.resolution.name
                    : undefined,
        },
        outputConfig: {
            minify,
        },
    };

    let res;
    try {
        res = styleCompiler.transform(src, filename, styleCompilerConfig);
    } catch (e) {
        throw normalizeToCompilerError(TransformerErrors.CSS_TRANSFORMER_ERROR, e, { filename });
    }

    // Rollup only cares about the mappings property on the map. Since producing a source map for
    // the styles doesn't make sense, the transform returns an empty mappings.
    return {
        code: res.code,
        map: { mappings: '' },
    };
}
github salesforce / lwc / packages / @lwc / template-compiler / src / codegen / styles.ts View on Github external
export default function parseInlineStyles(
    src: string,
    stylesheetConfig: StylesheetConfig
): Statement[] {
    let result;
    try {
        result = styleCompiler.transform(src, 'template_inline_styles', stylesheetConfig);
    } catch (e) {
        throw normalizeToCompilerError(TransformerErrors.CSS_IN_HTML_ERROR, e);
    }
    // The style compiler produces a module string
    const { code } = result;
    // Convert it to an AST
    const parsed = babylon.parse(code, { sourceType: 'module' });

    // Return the body of the module
    return parsed.program.body;
}

@lwc/style-compiler

Transform style sheet to be consumed by the LWC engine

MIT
Latest version published 2 days ago

Package Health Score

90 / 100
Full package analysis

Popular @lwc/style-compiler functions