postcss rem to responsive pixel

POSTCSS-REM-para-responsivo-pixel

Importante

O código foi movido para Sonofmagic/Postcss-Plugins, este repositório é arquivado!

Um plug -in para PostCSS que gera unidades PX ou RPX a partir de unidades REM.

• Reescrever com typescript e bem testado.
• SUPORTE DE TRANSFORMUNDADE px e rpx !

Se você ainda usa [email protected] , use [email protected] Consulte a versão 6 Breaking Change

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

Use com 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' ,
    } ) ,
  ] ,
}

Quando você usa tailwindcss para escrever seu site ou miniprograma, a unidade padrão é rem , então às vezes precisamos transformar nossa unidade em px ou rpx .

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

Entrada/saída

Com as configurações padrão, apenas as propriedades relacionadas à fonte são direcionadas.

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

Opções

Tipo: Object | Null
Padrão:

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

rootValue

Tipo: number

O tamanho da fonte do elemento raiz.

UnitPrecision

Tipo: number

As unidades PX de precisão decimal podem usar, pisando (arredondando na metade).

Prolist

Tipo: (string | RegExp)[]

As propriedades que podem mudar de REM para PX.

SelectorBlacklist

Tipo: (string | RegExp)[]

Os seletores para ignorar e sair como REM.

substituir

Tipo: boolean

Substitui as regras que contêm REMs em vez de adicionar fallbacks.

MediaQuery

Tipo: boolean

Permitir que o REM seja convertido em consultas de mídia.

minremvalue

Tipo: number

Defina o valor REM mínimo para substituir.

excluir

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

O caminho do arquivo para ignorar e sair como PX.

transformunidade

Tipo: 'px' | 'rpx'

A unidade de saída de transformação.

desabilitado

Tipo: boolean

Se desativar este plugin.

Uma mensagem sobre ignorar propriedades

Atualmente, a maneira mais fácil de ignorar uma propriedade é usar um capital na declaração da unidade 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
}

Graças ao autor do postcss-rem-to-pixel e postcss-pxtorem .