项目说明

• postcss插件ts开发环境和项目模板搭建
  • 支持ts
  • 代码格式、语法质量和统一保证
  • 支持单元测试
  • husky和lint-stage集成自动代码格式、语法修复和自动单元测试
  • ...
  • js迁移ts
• postcss-px-to-vw-strong插件开发

功能说明

保留postcss-pixel-to-viewport插件原有的全部功能

postcss-pixel-to-viewport

扩展自定义单位功能

功能概述

支持个性化定制单位

• 定制一个新的单位名称如 nx

• 可以配置使用这个单位时的行为

  • 是否开启转换vw，默认开启，如果关闭的话，使用此单位，默认返回px，实现更细节的控制px到视口单位的转换
  • 个性化返回，可以使用一个函数，来控制使用此单位的时候，返回的什么内容，覆盖原来的尺寸，比如给每个尺寸都加上2px。如果没有关闭vw转换，那么会使用behavior重新计算后的值来换算为vw返回
  • css属性末尾追加内容，可以定义在转换后的新的css属性值追加一些字符串
  • 配置真实的替换单位，替换自定义单位。

list

• 支持在css中使用自定义的单位；
• 对自定义单位不配置其他属性的话，默认开启进行视口转换，会按照视口转换的相关配置进行转换后代替；
• 自定义单位可以单独配置是否开启视口转换，实现更灵活的视口转换开关；
• 不开启视口转换的话，自定义单位默认转换为px，可以配置其他真实的转换单位替换px，比如em
• 支持传递behavior函数，来接收每一个自定义单位的原始值，对其进行二次操作，二次操作后的值会继续输入插件进行处理
• 支持传递joinString属性，可以定义在转换后的新的css属性值追加一些字符串

安装和使用

安装

npm i postcss-px-to-vw-strong
or
yarn add postcss-px-to-vw-strong

使用