vue-simple-compiler/dist/style.js

A lib to compile Vue Single-File Component into plain JavaScript & CSS.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.resolveStyles = void 0;
const options_1 = require("./options");
const resolveStyles = (descriptor, context) => {
    const errors = [];
    const cssImportList = [];
    const cssFileList = [];
    descriptor.styles.every((style, index) => {
        // validate lang
        if (style.lang &&
            style.lang !== 'css' &&
            style.lang !== 'scss' &&
            style.lang !== 'sass' &&
            style.lang !== 'less') {
            errors.push(new Error(`Unsupported style lang: ${style.lang}.`));
            return false;
        }
        const scopedId = context.id.toString();
        const moduleName = style.module ? (typeof style.module === 'string' ? style.module : '$style') : '';
        // validate ext
        // collect external css files
        if (style.src) {
            if ((!style.lang || style.lang === 'css') &&
                !(0, options_1.checkExtensionName)(style.src, ['css'])) {
                errors.push(new Error(`The extension name doesn't match the style language "css": ${style.src}.`));
                return false;
            }
            if ((style.lang === 'sass' || style.lang === 'scss') &&
                !(0, options_1.checkExtensionName)(style.src, ['scss', 'sass'])) {
                errors.push(new Error(`The extension name doesn't match the style language "scss/sass": ${style.src}.`));
                return false;
            }
            if (style.lang === 'less' && !(0, options_1.checkExtensionName)(style.src, ['less'])) {
                errors.push(new Error(`The extension name doesn't match the style language "less": ${style.src}.`));
                return false;
            }
            const externalCss = {
                filename: style.src,
                query: {},
            };
            if (style.lang) {
                externalCss.query.lang = style.lang;
            }
            if (style.module) {
                externalCss.query.module = style.module.toString();
                externalCss.module = moduleName;
            }
            if (style.scoped) {
                externalCss.query.scoped = style.scoped.toString();
                externalCss.query.id = scopedId;
                externalCss.scoped = scopedId;
            }
            context.externalCssList.push(externalCss);
        }
        // e.g. `css`
        const lang = style.lang || 'css';
        // e.g. `style0` (only for css modules)
        const styleVar = style.module ? `style${index}` : '';
        // e.g. `./filename.vue__0.css` (only for non-src styles)
        const cssFilePath = (0, options_1.getCssPath)(context.filename, index, lang);
        // check css files
        if (!style.src) {
            const cssFile = {
                filename: cssFilePath,
                code: style.content,
                sourceMap: style.map,
            };
            if (style.lang) {
                cssFile.lang = style.lang;
            }
            if (style.module) {
                cssFile.module = moduleName;
            }
            if (style.scoped) {
                cssFile.scoped = scopedId;
            }
            cssFileList.push(cssFile);
        }
        // add js code for css modules
        if (style.module) {
            if (!context.options?.autoImportCss) {
                // work around for testing purposes
                // e.g. `const style0 = new Proxy({}, { get: (_, key) => key })`
                context.addedCodeList.push(`const ${styleVar} = new Proxy({}, { get: (_, key) => key })`);
            }
            // e.g. `cssModules["$style"] = style0`
            context.addedCodeList.push(`cssModules["${moduleName}"] = ${styleVar}`);
        }
        // check css imports
        // - scoped x module x src
        // - auto import css
        if (context.options?.autoImportCss) {
            const baseCssPath = style.src || `./${cssFilePath}`;
            const destCssFilePath = (0, options_1.getExternalCssPath)(baseCssPath, {
                module: !!style.module,
                scoped: style.scoped,
                id: context.id
            });
            const cssImport = (0, options_1.genCssImport)(destCssFilePath, styleVar);
            cssImportList.push(cssImport);
        }
        return true;
    });
    if (errors.length) {
        return { errors };
    }
    return {
        importList: cssImportList,
        files: cssFileList,
    };
};
exports.resolveStyles = resolveStyles;