TypeScript postcss類代碼示例

    }, (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`);
          }
        });
    });

 })).then(results => {
     let r = results[0].root;
     for (let i = 1; i < results.length; i++) {
         r = r.append(results[i].root);
     }
     return postcss([cssnano({ safe: true })]).process(r.toResult());
 });

/**
 * @description 傳入 css string ，返回 postCSS 處理後的 css string
 * @param {string} css
 * @param {string} filePath
 * @param {object} projectConfig
 * @returns {Function | any}
 */
function postCSS({css, filePath, projectConfig}) {
  const pxTransformConfig = {
    designWidth: projectConfig.designWidth || 750
  }
  if (projectConfig.hasOwnProperty(DEVICE_RATIO)) {
    pxTransformConfig[DEVICE_RATIO] = projectConfig.deviceRatio
  }
  return postcss([
    require('stylelint')(stylelintConfig),
    require('postcss-reporter')({clearReportedMessages: true}),
    pxtransform(
      {
        platform: 'rn',
        ...pxTransformConfig
      }
    )
  ])
    .process(css, {from: filePath})
    .then((result) => {
      return {
        css: result.css,
        filePath
      }
    }).catch((e) => {
      Util.printLog(processTypeEnum.ERROR, '樣式轉換', filePath)
      console.log(e.stack)
    })
}

export function processCss(source: string, from: string, callback: (url: string, from: string) => string): PromiseLike<any> {
    return postcss([postcssUrl({
        url: (oldUrl: string, decl: any, from: string, dirname: string, to: string, options: any, result: any) => {
            if (oldUrl.startsWith("data:")) return oldUrl;
            return callback(oldUrl, from);
        }
    })]).process(source, { from });
}

function autoprefix(input: Buffer, options: AutoprefixOptions, callback: TransformCallback) {
  const input_string = input.toString('utf8');
  postcss([autoprefixer]).process(input_string).then(result => {
    result.warnings().forEach(warning => console.warn(warning.toString()));
    const output = new Buffer(result.css, 'utf8');
    callback(null, output);
  }, error => callback(error));
}

export const processSync = ({
  css,
  filters,
  postcssSyntax,
  preserveLines,
}: IProcessOptions) => postcss(postcssSelectorExtract(filters, preserveLines))
  .process(css, { syntax: postcssSyntax }).css
  .replace(new RegExp(`\\/\\* ${PRESERVE_LINES_START}|${PRESERVE_LINES_END} \\*\\/`, `g`), ``);

 async styleUnitTransform (filePath: string, content: string) {
   const postcssResult = await postcss([
     unitTransform()
   ]).process(content, {
     from: filePath
   })
   return postcssResult
 }

export function processStyleUseCssModule (styleObj: IStyleObj): any {
  const { projectConfig, appPath } = 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]',
      namingPattern: 'global'
    }
  }, customPostcssConf.cssModules || {}) as ICSSModulesConf
  if (!customCssModulesConf.enable) {
    return styleObj
  }
  const namingPattern = customCssModulesConf.config.namingPattern
  if (namingPattern === 'module') {
    // 隻對 xxx.module.[css|scss|less|styl] 等樣式文件做處理
    const DO_USE_CSS_MODULE_REGEX = /^(.*\.module).*\.(css|scss|less|styl)$/
    if (!DO_USE_CSS_MODULE_REGEX.test(styleObj.filePath)) return styleObj
  } else {
    // 對 xxx.global.[css|scss|less|styl] 等樣式文件不做處理
    const DO_NOT_USE_CSS_MODULE_REGEX = /^(.*\.global).*\.(css|scss|less|styl)$/
    if (DO_NOT_USE_CSS_MODULE_REGEX.test(styleObj.filePath)) return styleObj
  }
  const generateScopedName = customCssModulesConf.config.generateScopedName
  const context = appPath
  let scopedName
  if (generateScopedName) {
    scopedName = typeof generateScopedName === 'function'
      ? (local, filename) => generateScopedName(local, filename)
      : genericNames(generateScopedName, { context })
  } else {
    scopedName = (local, filename) => Scope.generateScopedName(local, path.relative(context, filename))
  }
  const postcssPlugins = [
    Values,
    LocalByDefault,
    ExtractImports,
    new Scope({ generateScopedName: scopedName }),
    new ResolveImports({ resolve: Object.assign({}, { extensions: CSS_EXT }) })
  ]
  const runner = postcss(postcssPlugins)
  const result = runner.process(styleObj.css, Object.assign({}, { from: styleObj.filePath }))
  return result
}

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);
}

import * as postcss from 'postcss';
import * as url from 'postcss-url';

const standard: postcss.Transformer = url();

const single: postcss.Transformer = url({ url: 'copy', assetsPath: 'img', useHash: true });

const multiple: postcss.Transformer = url([
    { filter: '**/assets/copy/*.png', url: 'copy', assetsPath: 'img', useHash: true },
    { filter: '**/assets/inline/*.svg', url: 'inline', optimizeSvgEncode: true },
    { filter: '**/assets/**/*.gif', url: 'rebase' },
    { filter: 'cdn/**/*', url: (asset) => `https://cdn.url/${asset.url}` },
]);

postcss().use(standard);
postcss().use(single);
postcss().use(multiple);