import ChainableWebpackConfig from 'webpack-chain'

// @ css优化器 - 主要解决样式重复写入问题
const CleanCSSPlugin = require('less-plugin-clean-css')

type TRule = ChainableWebpackConfig.Rule<ChainableWebpackConfig.Rule<ChainableWebpackConfig.Module>>

const injectGlobalVarOptions = (rule: TRule, lang: string) => {
    rule.use('style-resources-loader')
        .loader('style-resources-loader')
        .options({
            patterns: [
                process.cwd() + `/src/assets/**/variable.${lang}`,
                //
                process.cwd() + `/src/assets/**/var.${lang}`
            ]
        })
        .end()
}

const injectLessOptions = (rule: TRule) => {
    rule.use('less-loader')
        .loader('less-loader')
        .options({
            lessOptions: {
                javascriptEnabled: true,
                plugins: [new CleanCSSPlugin({ advanced: true, level: 2 })]
            }
        })
        .end()
}

const injectPostcssOptions = (rule: TRule) => {
    rule.use('postcss-loader')
        .loader('postcss-loader')
        .options({
            postcssOptions: {
                plugins: [
                    require('autoprefixer'),
                    require('postcss-flexbugs-fixes'),
                    require('postcss-normalize'),
                    require('postcss-selector-matches')
                ]
            }
        })
        .end()
}

/** 注入样式优化选项 */
export const injectStlyusOptimization = (config: ChainableWebpackConfig) => {
    const support: Array<string> = ['less', 'css', 'scss', 'sass']
    const modules: Array<string> = ['normal', 'normal-modules', 'vue', 'vue-modules']
    for (const lang of support) {
        for (const oneOf of modules) {
            const rule: TRule = config.module.rule(lang).oneOf(oneOf)
            // inject postcss plugin
            injectPostcssOptions(rule)
            // inject global var
            injectGlobalVarOptions(rule, lang)
            // inject less plugin
            if (lang === 'less') {
                injectLessOptions(rule)
            }
        }
    }
}