fix(taro-cli): 修复小程序端非生产模式下不应用 csso 配置问题 close #3622

[Garfield550]

这个 PR 做了什么? (简要描述所做更改)

修复小程序端非生产模式(dev)下，配置了 csso 但是不能应用的问题。

这个 PR 是什么类型? (至少选择一个)

• 错误修复(Bugfix) issue id 【微信小程序】scss生成wxss时能否去掉注释 #3622
• 新功能(Feature)
• 代码重构(Refactor)
• TypeScript 类型定义修改(Typings)
• 文档修改(Docs)
• 代码风格更新(Code style update)
• 其他，请描述(Other, please describe):

这个 PR 满足以下需求:

• 提交到 master 分支
• Commit 信息遵循 Angular Style Commit Message Conventions
• 所有测试用例已经通过
• 代码遵循相关包中的 .eslintrc, .tslintrc, .stylelintrc 所规定的规范
• 在本地测试可用，不会影响到其它功能

这个 PR 涉及以下平台:
理论上这个 PR 可以应用到所有小程序端

• 微信小程序
• 支付宝小程序
• 百度小程序
• 头条小程序
• QQ 轻应用
• 快应用平台（QuickApp）
• Web 平台（H5）
• 移动端（React-Native）

其它需要 Reviewer 或社区知晓的内容：

测试步骤

测试用例 app.scss 如下：

/* I'm a comment 1. */
/*! I'm a comment 2. */
/** I'm a comment 3. */
// I'm a comment 4.

.test-class {
  /* I'm a comment 5. */
  /*! I'm a comment 6. */
  /** I'm a comment 7. */
  // I'm a comment 8.
  color: red;
}

dev 模式使用命令 ~/Projects/Test/taro/packages/taro-cli/bin/taro build --type weapp --watch
prod 模式使用命令 ~/Projects/Test/taro/packages/taro-cli/bin/taro build --type weapp

1. taro init 一个使用 default 模版的项目

2. config/index.js 使用默认配置保持不变

3. config/dev.js 为默认，如下：

module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {},
  weapp: {},
  h5: {}
};

3.1 app.wxss 结果：

/* I'm a comment 1. */
/*! I'm a comment 2. */
/** I'm a comment 3. */
.test-class {
  /* I'm a comment 5. */
  /*! I'm a comment 6. */
  /** I'm a comment 7. */
  color: red; }

4. 修改 config/dev.js 配置，启用 csso，如下：

module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {},
  weapp: {},
  h5: {},
  plugins: {
    csso: {
      enable: true
    }
  }
};

4.1 app.wxss 结果：

/*! I'm a comment 2. */
.test-class{color:red}

5. 修改 config/dev.js 配置，启用 csso，并配置 compress 选项，如下：

module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {},
  weapp: {},
  h5: {},
  plugins: {
    csso: {
      enable: true,
      config: {
        comments: false
      }
    }
  }
};

5.1 app.wxss 结果：

.test-class{color:red}

6. config/prod.js 为默认，如下：

module.exports = {
  env: {
    NODE_ENV: '"production"'
  },
  defineConstants: {},
  weapp: {},
  h5: {
    /**
     * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
     * 参考代码如下：
     * webpackChain (chain) {
     *   chain.plugin('analyzer')
     *     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
     * }
     */
  }
};

6.1 app.wxss 结果：

/*! I'm a comment 2. */
.test-class{color:red}

[luckyadam]

Good!