build-plugin-fusion-css/src/index.js

用于修改fusion css-prefix & css-variable作用域

module.exports = ({ onGetWebpackConfig, log }, pluginOptions = {}) => {
  const { oldSelector = ':root', newSelector = '' } = pluginOptions;
  onGetWebpackConfig(config => {
    config.module
      .rule('css')
      .oneOf('fusionPrefix|fusionVarScope')
      .resourceQuery(/fusionPrefix|fusionVarScope/)
      .use('fusion-css-loader')
      .loader(require.resolve('@alicloud/console-toolkit-fusion-css-loader'))
      .after('css-loader');
    if (
      newSelector &&
      newSelector.includes(',') &&
      oldSelector &&
      oldSelector.includes(',')
    ) {
      log.info(
        '自定义 css-variable 作用域（多个自定义作用域）',
        `${oldSelector} => ${newSelector}`,
      );
      config.module
        .rule('css')
        .oneOf('customVarScope')
        .resourceQuery(/customVarScope/)
        .use('fusion-css-loader')
        .loader(require.resolve('@alicloud/console-toolkit-fusion-css-loader'))
        .options({
          selectorTransformer: selector => {
            const oldSelectors = oldSelector.split(',');
            const newSelectors = newSelector.split(',');
            if (oldSelectors.includes(selector)) {
              const oldIndex = oldSelectors.indexOf(selector);
              return newSelectors[oldIndex];
            }
          },
        })
        .after('css-loader');
    } else if (
      newSelector &&
      !newSelector.includes(',') &&
      oldSelector &&
      oldSelector.includes(',')
    ) {
      log.info(
        '自定义 css-variable 作用域（多个）',
        `${oldSelector} => ${newSelector}`,
      );
      config.module
        .rule('css')
        .oneOf('customVarScope')
        .resourceQuery(/customVarScope/)
        .use('fusion-css-loader')
        .loader(require.resolve('@alicloud/console-toolkit-fusion-css-loader'))
        .options({
          selectorTransformer: selector => {
            const oldSelectors = oldSelector.split(',');
            // log.info('oldSelectors', oldSelectors);
            // oldSelectors.forEach(s => {
            //   if (selector === s) {
            //     return newSelector;
            //   }
            // });
            if (oldSelectors.includes(selector)) {
              return newSelector;
            }
          },
        })
        .after('css-loader');
    } else if (newSelector && oldSelector && !oldSelector.includes(',')) {
      log.info(
        '自定义 css-variable 作用域（单个）',
        `${oldSelector} => ${newSelector}`,
      );
      config.module
        .rule('css')
        .oneOf('customVarScope')
        .resourceQuery(/customVarScope/)
        .use('fusion-css-loader')
        .loader(require.resolve('@alicloud/console-toolkit-fusion-css-loader'))
        .options({
          selectorTransformer: selector => {
            if (selector === oldSelector) {
              return newSelector;
            }
          },
        })
        .after('css-loader');
    }
  });
};