@yinxulai/babel-plugin-less/lib/esnext/transform.js

一个 `Babel` 插件，用来帮助你对文件中引用的 `less` 进行预处理、转换成 `css` 并自动管理, 支持 `cssModule`, `autoPrefix`

import path from 'path';
import less from 'less';
import postcss from 'postcss';
import cssnano from 'cssnano';
import { readFileSync } from 'fs';
import autoprefixer from 'autoprefixer';
import postcssModules from 'postcss-modules';
const optionsArgs = process.argv.slice(2);
const options = JSON.parse(optionsArgs[0]);
// 预处理语法
async function transformStyleSyntax(source, options) {
    const data = await less.render(source, options);
    return data.css || '';
}
// 处理 css module, 同时会补充浏览器前缀
async function transformStyleByPostCss(source, options) {
    const result = {};
    const plugins = [];
    const { cssModule, autoPrefix, ...postcssOptions } = options;
    plugins.push(cssnano());
    // 开启补充浏览器前缀
    if (autoPrefix) {
        plugins.push(autoprefixer());
    }
    // 开启 css Module
    if (cssModule) {
        // 如果开启了 cssModule
        // 保证一定有 tokens 对象
        // 因为使用者会调用 style.className
        result.tokens = {};
        const options = {
            // TODO: 考虑设置一份默认配置、merge 用户配置
            ...(typeof cssModule === 'object' ? cssModule : {}),
            getJSON: (_, token) => result.tokens = token || {},
        };
        plugins.push(postcssModules(options));
    }
    const postcssResult = await postcss(plugins)
        .process(source || '', postcssOptions);
    result.css = postcssResult.css;
    return result;
}
async function transform() {
    const { fileName, cssModule } = options;
    const dirname = path.dirname(fileName);
    const source = readFileSync(fileName).toString();
    const styleString = await transformStyleSyntax(source, { paths: [dirname] });
    return await transformStyleByPostCss(styleString, { from: fileName, autoPrefix: true, cssModule });
}
transform()
    .catch(error => console.error(JSON.stringify(error)))
    .then(result => console.log(JSON.stringify(result)));
//# sourceMappingURL=transform.js.map