postcss rem to responsive pixelダウンロード-Postcss postcss rem to responsive pixelソースコードダウンロード

postcss rem to responsive pixel

その他のソースコード

1.0.0

ダウンロード

PostCSS-REMからResponsive-Pixel

重要

コードはsonofmagic/postcss-pluginsに移動されました。このレポはアーカイブされています！

REMユニットからPXまたはRPXユニットを生成するPOSCSSのプラグイン。

typescriptとよくテストされたもので書き直します。
TransformUnitサポートpxおよびrpx ！

[email protected]を使用している場合は、 [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使用してWebサイトまたはMiniProgramを作成する場合、デフォルトユニットは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
}

ルートバリュー

タイプ： number

ルート要素フォントサイズ。

ユニットプレシジョン

タイプ： number

小数精度PXユニットは、床に使用できます（半分に丸めます）。

プロップリスト

タイプ： (string | RegExp)[]

REMからPXに変更できるプロパティ。

SelectorBlackList

タイプ： (string | RegExp)[]

REMとして無視して離れるセレクター。

交換する

タイプ： boolean

フォールバックを追加する代わりに、REMを含むルールを置き換えます。

MediaQuery

タイプ： 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
}