postcss rem to responsive pixel

postcss rem to responsive pixel

Другой исходный код

1.0.0

Скачать

PostCSS-REM-CRESSIVE-PIXEL

Важный

Код был перенесен в Sonofmagic/Postcss-Plugins, этот репо архив!

Плагин для PostCSS, который генерирует единицы PX или RPX из единиц REM.

Перепишите с помощью typescript и хорошо протестированного.
TransformUnit Support px и rpx !

Если вы все еще используете [email protected] , вам следует использовать [email protected]

Установить

npm i -D postcss-rem-to-responsive-pixel
yarn add -D postcss-rem-to-responsive-pixel
pnpm i -D postcss-rem-to-responsive-pixel

Использование

Используйте с postcss.config.js

 // postcss.config.js
module . exports = {
  plugins : [
    // for example
    // require('autoprefixer'),
    // require('tailwindcss'),
    require ( 'postcss-rem-to-responsive-pixel' ) ( {
      rootValue : 32 ,
      propList : [ '*' ] ,
      transformUnit : 'rpx' ,
    } ) ,
  ] ,
}

Когда вы используете tailwindcss для написания вашего веб -сайта или минипрограммы, блок по умолчанию является rem , поэтому иногда нам приходится преобразовать наш блок в px или rpx .

 // postcss.config.js
module . exports = {
  plugins : [
    require ( 'tailwindcss' ) ,
    require ( 'postcss-rem-to-responsive-pixel' ) ( {
      rootValue : 32 ,
      propList : [ '*' ] ,
      transformUnit : 'rpx' ,
    } ) ,
  ] ,
}

Ввод/Вывод

С настройками по умолчанию предназначены только свойства, связанные с шрифтом.

 // input
h1 {
  margin : 0 0 20 px ;
  font-size : 2 rem ;
  line-height : 1.2 ;
  letter-spacing : 0.0625 rem ;
}

// output
h1 {
  margin : 0 0 20 px ;
  font-size : 64 rpx;
  line-height : 1.2 ;
  letter-spacing : 2 rpx;
}

Параметры

Тип: Object | Null
По умолчанию:

 {
  rootValue : 16 ,
  unitPrecision : 5 ,
  selectorBlackList : [ ] ,
  propList : [ 'font' , 'font-size' , 'line-height' , 'letter-spacing' ] ,
  replace : true ,
  mediaQuery : false ,
  minRemValue : 0 ,
  exclude : [ / node_modules / i ] ,
  transformUnit : 'px' ,
  disabled : false
}

root -alvalue

Тип: number

Размер шрифта корневого элемента.

Unitprecision

Тип: number

Десятичную точность PX -единицы разрешаются использовать, напольные (округлые пополам).

пропл

Тип: (string | RegExp)[]

Свойства, которые могут измениться с REM на PX.

SELECTERBLACKLIST

Тип: (string | RegExp)[]

Селекторы, чтобы игнорировать и оставить как rem.

заменять

Тип: boolean

Заменяет правила, содержащие REM, вместо добавления запасных.

СМИ

Тип: boolean

Разрешить REM быть преобразован в медиа -запросах.

MinRemValue

Тип: number

Установите минимальное значение REM для замены.

исключать

Тип: (string | RegExp)[] | ((filePath: string) => boolean)

Путь файла, чтобы игнорировать и оставить как px.

TransformUnit

Тип: 'px' | 'rpx'

Блок вывода преобразования.

неполноценный

Тип: boolean

Если отключить этот плагин.

Сообщение об игнорировании свойств

В настоящее время самый простой способ проигнорировать одно имущество - использовать капитал в объявлении подразделения REM.

// `rem` is converted to `px`
. convert {
  font-size : 1 rem ; // converted to 16px
}

// `Rem` or `REM` is ignored by `postcss-rem-to-pixel` but still accepted by browsers
. ignore {
  border : 1 rem solid; // ignored
  border-width : 2 rem ; // ignored
}