@mindev/min-cli/lib/class/WxSFMStyle.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const url = require("url");
const path = require("path");
const less = require("less");
const postcss = require("postcss");
const class_1 = require("../class");
const declare_1 = require("../declare");
const util_1 = require("../util");
const plugin_1 = require("../plugin");
/* precss-start */
// const precss = require('precss')
// import 插件有wxc工具提供
// const postcssPartialImport = require('postcss-partial-import')
const postcssMixins = require('postcss-mixins');
const postcssAdvancedVariables = require('postcss-advanced-variables');
const postcssCustomMedia = require('postcss-custom-media');
const postcssCustomProperties = require('postcss-custom-properties');
const postcssMediaMinmax = require('postcss-media-minmax');
const postcssColorFunction = require('postcss-color-function');
const postcssNesting = require('postcss-nesting');
const postcssNested = require('postcss-nested');
const postcssCustomSelectors = require('postcss-custom-selectors');
const postcssAtroot = require('postcss-atroot');
const postcssPropertyLookup = require('postcss-property-lookup');
const postcssExtend = require('postcss-extend');
const postcssSelectorMatches = require('postcss-selector-matches');
const postcssSelectorNot = require('postcss-selector-not');
/* precss-end */
const postcssBem = require('postcss-bem');
const postcssCalc = require('postcss-calc');
// bem 选项
const postcssBemOptions = {
    defaultNamespace: undefined,
    style: 'suit',
    separators: {
        descendent: '__',
        modifier: '--'
    },
    shortcuts: {
        utility: 'u',
        component: 'b',
        descendent: 'e',
        modifier: 'm',
        when: 'is'
    }
};
// postcss 处理器
const processor = postcss([
    postcssBem(postcssBemOptions),
    postcssMixins,
    postcssAdvancedVariables,
    postcssCustomMedia,
    postcssCustomProperties,
    postcssMediaMinmax,
    postcssColorFunction,
    postcssNesting,
    postcssNested,
    postcssCustomSelectors,
    postcssAtroot,
    postcssPropertyLookup,
    postcssExtend,
    postcssSelectorMatches,
    postcssSelectorNot,
    postcssCalc,
    plugin_1.postcssUnit2rpx
]);
/**
 * STYLE 模块类
 *
 * @export
 * @class WxSFMStyle
 * @extends {WxSFM}
 */
class WxSFMStyle extends class_1.WxSFM {
    /**
     * Creates an instance of WxSFMStyle.
     * @param {string} source
     * @param {Request} request
     * @param {CompileType} compileType
     * @memberof WxSFMStyle
     */
    constructor(source, request, options) {
        super(source, request, {
            destExt: util_1.config.ext.wxss
        });
        this.options = options;
        /**
         * 依赖列表
         *
         * @private
         * @type {Depend[]}
         * @memberof WxSFMStyle
         */
        this.depends = [];
        this.initDepends();
    }
    /**
     * style 基础编译
     *
     * @returns
     * @memberof WxSFMStyle
     */
    compileStyle() {
        return tslib_1.__awaiter(this, void 0, void 0, function* () {
            if (!this.result)
                return '';
            // 更新依赖路径后，重新编译
            return yield postcss([
                plugin_1.postcssUnit2rpx
            ]).process(this.result).then(result => result.css);
        });
    }
    /**
     * style less 编译
     *
     * @returns
     * @memberof WxSFMStyle
     */
    compileLess() {
        return tslib_1.__awaiter(this, void 0, void 0, function* () {
            if (!this.source)
                return '';
            // 1.0.5 版本以前，less 编译不支持 @import 外部文件
            // 1.0.5 版本开始，less 编译会将所有 @import 外部文件打包在一个入口文件
            // 将来的某个版本可能会调整 @import 外部文件分离编译
            let source = '';
            let options = {
                filename: this.request.src
            };
            source = this.source;
            // 全局 style 样式
            source = util_1.Global.config.style.lessCode + '\n' + source;
            // less 编译
            source = yield less.render(source, options).then(result => result.css);
            // 经 postcss 编译 unit2px 转换
            source = yield postcss([
                plugin_1.postcssUnit2rpx
            ]).process(source).then(result => result.css);
            return source;
        });
    }
    /**
     * style postcss 编译
     *
     * @returns
     * @memberof WxSFMStyle
     */
    compilePcss() {
        return tslib_1.__awaiter(this, void 0, void 0, function* () {
            if (!this.result)
                return '';
            // TODO 由于使用style样式全局变量，编译后的代码会存在多个 换行问题
            let source = '';
            // 从 result 中提取文件内容（依赖已更新）
            source = yield postcss().process(this.result).then(result => result.css);
            // 全局 style 样式
            source = util_1.Global.config.style.pcssCode + '\n' + source;
            // postcss 编译（bem、precss集合插件中排除import插件、unit2rpx）
            source = yield processor.process(source).then(result => result.css);
            return source;
        });
    }
    /**
     * 生成代码
     *
     * @returns {Promise<string>}
     * @memberof WxSFMStyle
     */
    generator() {
        return tslib_1.__awaiter(this, void 0, void 0, function* () {
            switch (this.options.compileType) {
                case declare_1.CompileType.LESS:
                    return yield this.compileLess();
                case declare_1.CompileType.PCSS:
                    return yield this.compilePcss();
                default:
                    return yield this.compileStyle();
            }
        });
    }
    /**
     * 保存文件
     *
     * @memberof WxSFMStyle
     */
    save() {
        super.save();
    }
    /**
     * 移除文件
     *
     * @memberof WxSFMStyle
     */
    remove() {
        super.remove();
    }
    /**
     * 获取依赖列表
     *
     * @returns {Depend[]}
     * @memberof WxSFMStyle
     */
    getDepends() {
        return this.depends;
    }
    /**
     * 更新依赖列表
     *
     * @param {Request.Core[]} useRequests 可用的请求列表
     * @memberof WxSFMStyle
     */
    updateDepends(useRequests) {
        let depends = this.getDepends();
        if (!depends.length)
            return;
        useRequests.forEach(useRequest => {
            depends
                .filter(depend => {
                return depend.requestType === useRequest.requestType && depend.request === useRequest.request;
            })
                .forEach(depend => {
                let request = '';
                request = path.relative(path.dirname(this.dest), path.dirname(useRequest.dest));
                request = path.join(request, path.basename(useRequest.dest, useRequest.ext));
                request = request.charAt(0) !== '.' ? `./${request}` : request;
                request = request.split(path.sep).join('/');
                switch (depend.requestType) {
                    case declare_1.RequestType.STYLE:
                        // ② 更新依赖引用路径，将所有的扩展名统一改成 .wxss
                        depend.$atRule.params = `'${request}${util_1.config.ext.wxss}'`;
                        break;
                    case declare_1.RequestType.ICONFONT:
                        let requestURL = url.parse(depend.request);
                        // depend.request => ./iconfont.eot?t=1515059114217
                        // depend.$decl.value => url('./iconfont.eot?t=1515059114217')
                        depend.$decl.value = depend.$decl.value.replace(depend.request, `${request}${useRequest.ext}${requestURL.search}`);
                        break;
                }
            });
        });
    }
    /**
     * 初始化 depends 依赖列表
     *
     * @private
     * @memberof WxSFMStyle
     */
    initDepends() {
        if (!this.source)
            return;
        if (this.options.compileType === declare_1.CompileType.LESS)
            return;
        let transformer = root => {
            // @import
            root.walkAtRules((rule, index) => {
                if (rule.name !== 'import') {
                    return;
                }
                // ① 收集所有的依赖，用于后续的依赖加载和路径更新
                this.depends.push({
                    request: rule.params.replace(/^('|")(.*)('|")$/g, (match, quotn, filename) => filename),
                    requestType: declare_1.RequestType.STYLE,
                    $atRule: rule
                });
            });
            // background background-image
            root.walkDecls((decl, index) => {
                // WXSS 里不用本地资源
                // background background-image => IMAGE
                // decl.prop !== 'background' && decl.prop !== 'background-image'
                // src => ICONFONT
                if (decl.prop !== 'src') {
                    return;
                }
                // src: url('./iconfont.eot?t=1515059114217');
                if (decl.value.indexOf('url') === -1) {
                    return;
                }
                // src: url('./iconfont.eot?t') format('embedded-opentype'), /* IE6-IE8 */
                //      url('./iconfont.ttf?t=1515059114217') format('truetype')
                let urls = decl.value.split(/format\([\'\"][a-z-]+[\'\"]\),/);
                urls.forEach(url => {
                    let matchs = url.match(util_1.ICONFONT_PATTERN);
                    if (!matchs) {
                        return;
                    }
                    // url('./iconfont.eot?t=1515059114217#iefix')
                    url = matchs[1];
                    // Check local file
                    if (!util_1.default.checkLocalFile(url)) {
                        return;
                    }
                    this.depends.push({
                        request: url,
                        requestType: declare_1.RequestType.ICONFONT,
                        $decl: decl
                    });
                });
            });
        };
        let lazyResult = postcss([transformer]).process(this.source);
        lazyResult.toString();
        this.result = lazyResult['result'];
    }
}
exports.WxSFMStyle = WxSFMStyle;
// import wxss 保留引用，不被插件编译
// class ImportWxssPlugin {
//   pick: postcss.Plugin<any>
//   revert: postcss.Plugin<any>
//   private atRules: postcss.AtRule[] = []
//   constructor () {
//     this._pick()
//     this._revert()
//   }
//   /**
//    * 摘取 @import *.wxss 扩展的路径引用
//    *
//    * @private
//    * @memberof ImportWxssPlugin
//    */
//   private _pick() {
//     this.pick = postcss.plugin('postcss-plugin-pick-import-wxss', () => {
//       return root => {
//         root.walkAtRules((rule, index) => {
//           if (rule.name === 'import' && /\.wxss('|")$/.test(rule.params)) {
//             root.removeChild(rule)
//             this.atRules.push(rule)
//           }
//         })
//       }
//     })
//   }
//   /**
//    * 归还 @import *.wxss 扩展的路径引用
//    *
//    * @private
//    * @memberof ImportWxssPlugin
//    */
//   private _revert() {
//     this.revert = postcss.plugin('postcss-plugin-revert-import-wxss', () => {
//       return root => {
//         if (root.nodes && this.atRules.length > 0) {
//           root.prepend(this.atRules)
//         }
//       }
//     })
//   }
// }