• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript postcss类代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中postcss的典型用法代码示例。如果您正苦于以下问题:TypeScript postcss类的具体用法?TypeScript postcss怎么用?TypeScript postcss使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。



在下文中一共展示了postcss类的10个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: reject

    }, (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`);
          }
        });
    });
开发者ID:cpylua,项目名称:cheli.im,代码行数:32,代码来源:styles.ts


示例2: postcss

 })).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());
 });
开发者ID:Bobris,项目名称:bobril-build,代码行数:7,代码来源:cssHelpers.ts


示例3: postCSS

/**
 * @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)
    })
}
开发者ID:YangShaoQun,项目名称:taro,代码行数:35,代码来源:styleProcess.ts


示例4: processCss

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 });
}
开发者ID:Bobris,项目名称:bobril-build,代码行数:8,代码来源:cssHelpers.ts


示例5: autoprefix

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));
}
开发者ID:chbrown,项目名称:fapply,代码行数:8,代码来源:applicators.ts


示例6: postcss

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`), ``);
开发者ID:Trevery,项目名称:blog,代码行数:8,代码来源:index.ts


示例7: styleUnitTransform

 async styleUnitTransform (filePath: string, content: string) {
   const postcssResult = await postcss([
     unitTransform()
   ]).process(content, {
     from: filePath
   })
   return postcssResult
 }
开发者ID:YangShaoQun,项目名称:taro,代码行数:8,代码来源:index.ts


示例8: processStyleUseCssModule

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
}
开发者ID:YangShaoQun,项目名称:taro,代码行数:46,代码来源:compileStyle.ts


示例9: renderSassSuccess

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);
}
开发者ID:Kode-Kitchen,项目名称:ionic-app-scripts,代码行数:45,代码来源:sass.ts


示例10: url

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);
开发者ID:CNBoland,项目名称:DefinitelyTyped,代码行数:17,代码来源:postcss-url-tests.ts



注:本文中的postcss类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript postcss-pxtransform类代码示例发布时间:2022-05-28
下一篇:
TypeScript pino类代码示例发布时间:2022-05-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap