postcss rem to responsive pixel

PostCSS-Rem-to-Reoponse-Pixel

Important

Le code a été déplacé vers SonofMagic / PostCSS-Plugins, ce repo est archivé!

Un plugin pour PostCSS qui génère des unités PX ou RPX des unités REM.

• Réécrivez-vous avec typescript et bien testé.
• TransformUnit Support px et rpx !

Si vous utilisez toujours [email protected] , vous devez utiliser [email protected] Voir la version 6 des modifications de rupture

Installer

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

Usage

Utiliser avec 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' ,
    } ) ,
  ] ,
}

Lorsque vous utilisez tailwindcss pour écrire votre site Web ou votre miniprogramme, l'unité par défaut est rem , donc parfois nous devons transformer notre unité en px ou rpx .

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

Entrée / sortie

Avec les paramètres par défaut, seules les propriétés liées aux polices sont ciblées.

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

Options

Type: Object | Null
Défaut:

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

valeur de racine

Type: number

La taille de la police de l'élément racine.

provision d'unité

Type: number

Les unités de précision PX décimales sont autorisées à utiliser, étouffées (arrondissant sur la moitié).

propulser

Type: (string | RegExp)[]

Les propriétés qui peuvent passer de REM à PX.

selectorblacklist

Type: (string | RegExp)[]

Les sélecteurs à ignorer et à quitter Rem.

remplacer

Type: boolean

Remplace les règles contenant des REM au lieu d'ajouter des replies.

médiasir

Type: boolean

Autorisez la converti des requêtes multimédias REM.

minremvalue

Type: number

Définissez la valeur REM minimale pour remplacer.

exclure

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

Le chemin du fichier pour ignorer et partir en tant que PX.

transformation

Type: 'px' | 'rpx'

L'unité de sortie de transformation.

désactivé

Type: boolean

Si désactivez ce plugin.

Un message sur l'ignorance des propriétés

Actuellement, le moyen le plus simple de faire ignorer une seule propriété est d'utiliser un capital dans la déclaration de l'unité 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
}

Merci à l'auteur de postcss-rem-to-pixel et postcss-pxtorem .