vue-simple-compiler
Version:
A lib to compile Vue Single-File Component into plain JavaScript & CSS.
49 lines (48 loc) • 2.24 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.checkExtensionName = exports.genCssImport = exports.getDestPath = exports.getExternalCssPath = exports.getCssPath = void 0;
// e.g. filename.vue__0.css
const getCssPath = (srcPath, index, lang) => `${srcPath}__${index}.${lang}`;
exports.getCssPath = getCssPath;
// - style[src=foo.css] -> foo.css
// - style[src=foo.scss] -> foo.scss
// - style[src=foo.css][scoped] -> foo.css?scoped=true&id=xxx&lang.css
// - style[src=foo.css][module] -> foo.css?module=true&lang.module.css
// - style[src=foo.scss][module] -> foo.scss?module=true&lang.module.scss
const getExternalCssPath = (srcPath, options) => {
// e.g. foo.css
const filename = srcPath.split('/').pop() || '';
// e.g. css
const ext = filename.split('.').pop() || '';
// validations
if (['css', 'scss', 'sass', 'less'].includes(ext) === false) {
throw new Error(`Unsupported CSS file: ${srcPath}`);
}
if (options.scoped && !options.id) {
throw new Error(`Missing id for scoped CSS: ${srcPath}`);
}
if (options.scoped && options.module) {
throw new Error(`Scoped CSS cannot be used with CSS modules: ${srcPath}`);
}
// normalizations
if (options.scoped && options.id) {
// to follow the current rules in @vitejs/plugin-vue and vue-loader
// e.g. foo.css?vue&type=style&scoped=true&id=xxx&src=xxx&lang.css
return `${srcPath}?vue&type=style&scoped=true&id=${options.id}&src=${options.id}&lang.${ext}`;
}
if (options.module) {
// e.g. foo.css?module=true&lang.module.css
return `${srcPath}?module=true&lang.module.${ext}`;
}
// e.g. foo.css
return srcPath;
};
exports.getExternalCssPath = getExternalCssPath;
const getDestPath = (srcPath) => srcPath.endsWith('.vue')
? `${srcPath}.js`
: srcPath.replace(/\.(j|t)sx?$/, '.js');
exports.getDestPath = getDestPath;
const genCssImport = (cssPath, styleVar) => styleVar ? `import ${styleVar} from '${cssPath}';` : `import '${cssPath}';`;
exports.genCssImport = genCssImport;
const checkExtensionName = (filename, ext) => ext.some((e) => filename.endsWith(`.${e}`));
exports.checkExtensionName = checkExtensionName;