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

TypeScript postcss-pxtransform类代码示例

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

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



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

示例1: 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


示例2: function

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)
}
开发者ID:ApolloRobot,项目名称:taro,代码行数:34,代码来源:postcss.conf.ts


示例3: function

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


示例4: processStyleWithPostCSS

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



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


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
TypeScript power-assert类代码示例发布时间:2022-05-28
下一篇:
TypeScript postcss类代码示例发布时间: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