Code Monkey home page Code Monkey logo

postcss-pxtopx's Introduction

postcss-px2px

A plugin for PostCSS that convert px to rem AND rem to px AND px to rpx AND rpx to px

install

yarn add postcss-px2px -D

or

npm i postcss-px2px -D

Refer to

pxtorem AND pxtorpx-pro

Options

const options = {
  input: "px",
  output: "rpx",
  unitPrecision: 5,
  selectorBlackList: [],
  propBlackList: [],
  minPixelValue: 0,
  exclude: null,
  replace: true,
  transform: x => 2 * x
}

Import

// vite.config.js
import px2px from 'postcss-px2px'

export default defineConfig({
  css:{
    postcss: {
      plugins: [px2px({
        input: "rpx",
        output: "px",
        transform: x => x / 2
      })]
    }
  }
})

Input/Output

With the default settings, only font related properties are targeted.

// input
h1 {
    margin: 0 0 20px;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: 1px;
}

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

postcss-pxtopx's People

Contributors

adangs avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.