postcss rem to responsive pixel

Postcss-Rem-sponsive-píxel

Importante

El código se ha trasladado a Sonofmagic/PostCSS-Plugins, ¡este repositorio está archivado!

Un complemento para PostCSS que genera unidades PX o RPX de unidades REM.

• Reescribir con typescript y bien probado.
• TransformUnit Support px y rpx !

Si todavía usa [email protected] , debe usar [email protected] consulte la versión 6 de los cambios de ruptura

Instalar

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

Uso

Úselo con 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' ,
    } ) ,
  ] ,
}

Cuando usa tailwindcss para escribir su sitio web o miniprograma, la unidad predeterminada es rem , por lo que a veces tenemos que transformar nuestra unidad en px o rpx .

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

Entrada/salida

Con la configuración predeterminada, solo se dirigen las propiedades relacionadas con la fuente.

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

Opción

Tipo: Object | Null
Por defecto:

 {
  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
}

valor raíz

Tipo: number

El tamaño de fuente del elemento raíz.

precisión de la unidad

Tipo: number

Las unidades PX de precisión decimales pueden usar, con pisos (redondeando a la mitad).

propulsor

Tipo: (string | RegExp)[]

Las propiedades que pueden cambiar de REM a PX.

Selectorblacklist

Tipo: (string | RegExp)[]

Los selectores para ignorar y dejar como rem.

reemplazar

Tipo: boolean

Reemplaza las reglas que contienen REMS en lugar de agregar fallas.

calemanería

Tipo: boolean

Permita que REM se convierta en consultas de medios.

mínimo

Tipo: number

Establezca el valor REM mínimo para reemplazar.

excluir

Tipo: (string | RegExp)[] | ((filePath: string) => boolean)

La ruta del archivo para ignorar y dejar como PX.

transformunidad

Tipo: 'px' | 'rpx'

La unidad de salida de transformación.

desactivado

Tipo: boolean

Si deshabilita este complemento.

Un mensaje sobre ignorar las propiedades

Actualmente, la forma más fácil de ignorar una sola propiedad es usar un capital en la declaración de la unidad 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
}

Gracias al autor de postcss-rem-to-pixel y postcss-pxtorem .