gulpfile.js

const fs = require('fs')

const gulp = require('gulp')
const postcss = require('gulp-postcss')
const cssvars = require('postcss-css-variables')
const rename = require('gulp-rename')
const replace = require('gulp-replace')
const gulpIf = require('gulp-if')
const gulpIgnore = require('gulp-ignore')

gulp.task('transform-css-vars', () => {
  const plugins = [
    cssvars({
      preserve: false,
      variables: {
        "--weui-BTN-DISABLED-FONT-COLOR": "rgba(0, 0, 0, .2)",
        "--weui-BTN-DEFAULT-BG": "#f2f2f2",
        "--weui-BTN-DEFAULT-COLOR": "#06ae56",
        "--weui-BTN-DEFAULT-ACTIVE-BG": "#e6e6e6",
        "--weui-DIALOG-LINE-COLOR": "rgba(0, 0, 0, .1)",
        "--weui-BG-0": "#ededed",
        "--weui-BG-1": "#f7f7f7",
        "--weui-BG-2": "#fff",
        "--weui-BG-3": "#f7f7f7",
        "--weui-BG-4": "#4c4c4c",
        "--weui-BG-5": "#fff",
        "--weui-FG-0": "rgba(0, 0, 0, .9)",
        "--weui-FG-HALF": "rgba(0, 0, 0, .9)",
        "--weui-FG-1": "rgba(0, 0, 0, .5)",
        "--weui-FG-2": "rgba(0, 0, 0, .3)",
        "--weui-FG-3": "rgba(0, 0, 0, .1)",
        "--weui-RED": "#fa5151",
        "--weui-ORANGE": "#fa9d3b",
        "--weui-YELLOW": "#ffc300",
        "--weui-GREEN": "#91d300",
        "--weui-LIGHTGREEN": "#95ec69",
        "--weui-BRAND": "#07c160",
        "--weui-BLUE": "#10aeff",
        "--weui-INDIGO": "#1485ee",
        "--weui-PURPLE": "#6467f0",
        "--weui-WHITE": "#fff",
        "--weui-LINK": "#576b95",
        "--weui-TEXTGREEN": "#06ae56",
        "--weui-FG": "#000",
        "--weui-BG": "#fff",
        "--weui-TAG-TEXT-ORANGE": "#fa9d3b",
        "--weui-TAG-BACKGROUND-ORANGE": "rgba(250, 157, 59, .1)",
        "--weui-TAG-TEXT-GREEN": "#06ae56",
        "--weui-TAG-BACKGROUND-GREEN": "rgba(6, 174, 86, .1)",
        "--weui-TAG-TEXT-BLUE": "#10aeff",
        "--weui-TAG-BACKGROUND-BLUE": "rgba(16, 174, 255, .1)",
        "--weui-TAG-TEXT-BLACK": "rgba(0, 0, 0, .5)",
        "--weui-TAG-BACKGROUND-BLACK": "rgba(0, 0, 0, .05)",
        "--weui-BG-COLOR-ACTIVE": "#ececec",
        "--height": "44px",
        "--right": "95px",
      },
      preserveInjectedVariables: false,
    })
  ]
  return gulp.src([
        './miniprogram/app.wxss',
        './miniprogram/common/common.wxss',
        './miniprogram/page/common/common.wxss',
        './miniprogram/page/common/index.wxss',
        './miniprogram/page/component/index.wxss',
        './miniprogram/page/cloud/index.wxss',
        './miniprogram/page/API/index.wxss',
        './miniprogram/page/extend/index.wxss',
        './miniprogram/packageComponent/pages/canvas/canvas-2d/canvas-2d.wxss',
      ])
      .pipe(gulpIgnore.exclude(
        file => {
          try {
            fs.accessSync(file.path.replace(/\.wxss$/, '-skyline.wxss'))
          } catch(e) {
            return false
          }
          return true
        }))
      .pipe(postcss(plugins))
      .pipe(replace(/\:root ?{}\n/g, ''))
      .pipe(gulpIf(file => file.path.includes('miniprogram/page/common'), rename({suffix: '-skyline'})))
      .pipe(gulpIf(file => file.path.includes('miniprogram/common'), rename({suffix: '-skyline'})))
      .pipe(gulp.dest(file => file.base))
})