TypeScript autoprefixer类代码示例

 plugins: () => [autoprefixer(
   {
     browsers: ['iOS >= 7', 'Android >= 4.1',
       'last 10 Chrome versions', 'last 10 Firefox versions',
       'Safari >= 6', 'ie > 8'],
   },
 )],

    }, (err, result) => {
      if (err) {
        return reject(`failed to compile ${file}: ${err}`);
      }

      const css = result.css.toString();

      postcss([autoprefixer({browsers: ['last 2 versions']}), cssnano])
        .process(css)
        .then(postResult => {
          postResult.warnings().forEach(warn => {
              console.warn(warn.toString());
          });

          // do not write to file if output is identical to previous version
          const productionCss = postResult.css.toString();
          if (resourceChecksum.update(checksums, path.basename(outputFile), productionCss)) {
            console.log(`[scss]:${file}`);

            fs.writeFile(outputFile, productionCss, werr => {
              if (werr) {
                return reject(`faile to write css file: ${outputFile}: ${werr}`);
              }

              resolve(`${file} compiled`);
            });
          } else {
            console.log(`[unchanged]:${file}`);
            resolve(`${file} unchanged`);
          }
        });
    });

export const getPostcssPlugins = function (config) {
  const designWidth = config.designWidth || 750
  const useModuleConf = config.module || {}
  const customPostcssConf = useModuleConf.postcss || {}
  const customAutoprefixerConf = customPostcssConf.autoprefixer || {}
  const customPxtransformConf = customPostcssConf.pxtransform || {}
  const customPlugins = customPostcssConf.plugins || []

  const postcssPxtransformOption = {
    designWidth,
    platform: 'h5'
  }

  const DEVICE_RATIO = 'deviceRatio'
  if (config.hasOwnProperty(DEVICE_RATIO)) {
    postcssPxtransformOption[DEVICE_RATIO] = config.deviceRatio
  }

  if (isEmptyObject(customAutoprefixerConf) || customAutoprefixerConf.enable) {
    plugins.push(autoprefixer(Object.assign({}, defaultAutoprefixerConf, customAutoprefixerConf)))
  }

  plugins.push(pxtransform(Object.assign({}, postcssPxtransformOption, customPxtransformConf)))

  plugins.push(constparse({
    constants: [{
      key: 'taro-tabbar-height',
      val: '50PX'
    }],
    platform: 'h5'
  }))

  return plugins.concat(customPlugins)
}

export default function processCSS() {
  let processors = [
    autoprefixer({browsers: ['last 1 version']})
  ];

  return gulp.src(project.cssProcessor.source)
    .pipe(changedInPlace({firstPass:true}))
    .pipe(sourcemaps.init())
    .pipe(postcss(processors))
    .pipe(build.bundle());
};

export default function buildStyles() {
  let processors = [
    autoprefixer({browsers: ['last 1 version']})
  ];

  return gulp.src(project.paths.styles)
    .pipe(changed(project.paths.output, {extension: '.css'}))
    .pipe(sourcemaps.init())
    .pipe(postcss(processors))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(project.paths.output));
};

export const getPostcssPlugins = function ({
  designWidth,
  deviceRatio,
  postcssOption = {} as PostcssOption
}) {

  if (designWidth) {
    defaultPxtransformOption.config.designWidth = designWidth
  }

  if (deviceRatio) {
    defaultPxtransformOption.config.deviceRatio = deviceRatio
  }

  const autoprefixerOption = recursiveMerge({}, defaultAutoprefixerOption, postcssOption.autoprefixer)
  const pxtransformOption = recursiveMerge({}, defaultPxtransformOption, postcssOption.pxtransform)
  // const cssModulesOption = recursiveMerge({}, defaultCssModulesOption, postcssOption.cssModules)

  if (autoprefixerOption.enable) {
    plugins.push(autoprefixer(autoprefixerOption.config))
  }

  if (pxtransformOption.enable) {
    plugins.push(pxtransform(pxtransformOption.config))
  }

  // if (cssModulesOption.enable) {
  //   plugins.push(modules(cssModulesOption.config))
  // }

  plugins.push(constparse(defaultConstparseOption))

  Object.entries(postcssOption).forEach(([pluginName, pluginOption]) => {
    if (optionsWithDefaults.indexOf(pluginName) > -1) return
    if (!pluginOption || !pluginOption.enable) return

    if (!isNpmPackage(pluginName)) { // local plugin
      pluginName = path.join(appPath, pluginName)
    }

    try {
      const pluginPath = resolveSync(pluginName, { basedir: appPath })
      plugins.push(require(pluginPath)(pluginOption.config || {}))
    } catch (e) {
      const msg = e.code === 'MODULE_NOT_FOUND' ? `缺少postcss插件${pluginName}, 已忽略` : e
      console.log(msg)
    }
  })

  return plugins
}

function renderSassSuccess(context: BuildContext, sassResult: Result, sassConfig: SassConfig): Promise<string> {
  if (sassConfig.autoprefixer) {
    // with autoprefixer

    let autoPrefixerMapOptions: any = false;
    if (sassConfig.sourceMap) {
      autoPrefixerMapOptions = {
        inline: false
      };
    }

    const postcssOptions: any = {
      to: basename(sassConfig.outFile),
      map: autoPrefixerMapOptions
    };

    Logger.debug(`sass, start postcss/autoprefixer`);

    return postcss([autoprefixer(sassConfig.autoprefixer)])
      .process(sassResult.css, postcssOptions).then((postCssResult: any) => {
        postCssResult.warnings().forEach((warn: any) => {
          Logger.warn(warn.toString());
        });

        let apMapResult: string = null;
        if (sassConfig.sourceMap && postCssResult.map) {
          Logger.debug(`sass, parse postCssResult.map`);
          apMapResult = JSON.parse(postCssResult.map.toString()).mappings;
        }

        Logger.debug(`sass: postcss/autoprefixer completed`);
        return writeOutput(context, sassConfig, postCssResult.css, apMapResult);
      });
  }

  // without autoprefixer
  generateSourceMaps(sassResult, sassConfig);

  let sassMapResult: string = null;
  if (sassResult.map) {
    sassMapResult = JSON.parse(sassResult.map.toString()).mappings;
  }

  return writeOutput(context, sassConfig, sassResult.css.toString(), sassMapResult);
}

		plugins: () => [
			autoprefixer({
				flexbox: 'no-2009',
			}),
		],

async function processStyleWithPostCSS (styleObj: IStyleObj): Promise<string> {
  const { appPath, projectConfig, npmConfig, isProduction, buildAdapter } = getBuildData()
  const weappConf = Object.assign({}, projectConfig.weapp)
  const useModuleConf = weappConf.module || {}
  const customPostcssConf = useModuleConf.postcss || {}
  const customCssModulesConf = Object.assign({
    enable: false,
    config: {
      generateScopedName: '[name]__[local]___[hash:base64:5]'
    }
  }, customPostcssConf.cssModules || {})
  const customPxtransformConf = Object.assign({
    enable: true,
    config: {}
  }, customPostcssConf.pxtransform || {})
  const customUrlConf = Object.assign({
    enable: true,
    config: {
      limit: 10240
    }
  }, customPostcssConf.url || {})
  const customAutoprefixerConf = Object.assign({
    enable: true,
    config: {
      browsers: browserList
    }
  }, customPostcssConf.autoprefixer || {})
  const postcssPxtransformOption = {
    designWidth: projectConfig.designWidth || 750,
    platform: 'weapp'
  }

  if (projectConfig.hasOwnProperty(DEVICE_RATIO_NAME)) {
    postcssPxtransformOption[DEVICE_RATIO_NAME] = projectConfig.deviceRatio
  }
  const cssUrlConf = Object.assign({ limit: 10240 }, customUrlConf)
  const maxSize = Math.round((customUrlConf.config.limit || cssUrlConf.limit) / 1024)
  const postcssPxtransformConf = Object.assign({}, postcssPxtransformOption, customPxtransformConf, customPxtransformConf.config)
  const processors: any[] = []
  if (customAutoprefixerConf.enable) {
    processors.push(autoprefixer(customAutoprefixerConf.config))
  }
  if (customPxtransformConf.enable && buildAdapter !== BUILD_TYPES.QUICKAPP) {
    processors.push(pxtransform(postcssPxtransformConf))
  }
  if (cssUrlConf.enable) {
    const cssUrlParseConf = {
      url: 'inline',
      maxSize,
      encodeType: 'base64'
    }
    processors.push(cssUrlParse(cssUrlConf.config.basePath ? Object.assign(cssUrlParseConf, {
      basePath: cssUrlConf.config.basePath
    }) : cssUrlParseConf))
  }

  const defaultPostCSSPluginNames = ['autoprefixer', 'pxtransform', 'url', 'cssModules']
  Object.keys(customPostcssConf).forEach(pluginName => {
    if (defaultPostCSSPluginNames.indexOf(pluginName) < 0) {
      const pluginConf = customPostcssConf[pluginName]
      if (pluginConf && pluginConf.enable) {
        if (!isNpmPkg(pluginName)) { // local plugin
          pluginName = path.join(appPath, pluginName)
        }
        processors.push(require(resolveNpmPkgMainPath(pluginName, isProduction, npmConfig, buildAdapter, appPath))(pluginConf.config || {}))
      }
    }
  })
  let css = styleObj.css
  if (customCssModulesConf.enable) {
    css = processStyleUseCssModule(styleObj).css
  }
  const postcssResult = await postcss(processors).process(css, {
    from: styleObj.filePath
  })
  return postcssResult.css
}

 plugins: () => [
   Autoprefixer(),
   CssNano()
 ]