SCWR/postcss-design-convert

PostCSS plugin adjust the size of design draft when using viewport or rem layout (e.g. cube-ui is based on 375*667, but project design draft is based on 750*1334)

PostCSS Design Convert

PostCSS plugin adjust the size of design draft when using viewport or rem layout. (e.g. cube-ui is based on 375*667, but project design draft is based on 750*1334)

Example

'postcss-design-convert' : {
  multiple: 2,
  units: ['vw'],
  selector: /^\.design-/
}

  /* Input example */
.design-a {
  width: 8.21vw;
}
.custom .design-a {
  width: 8.21vw;
}

  /* Output example */
.design-a {
  width: 16.42vw;
}
.custom .design-a {
  width: 8.21vw;
}

---

'postcss-design-convert' : {
  multiple: 2,
  units: ['vw'],
  selector: /\.design-/
}

  /* Input example */
.design-a {
  width: 8.21vw;
}
.custom .design-a {
  width: 8.21vw;
}

  /* Output example */
.design-a {
  width: 16.42vw;
}
.custom .design-a {
  width: 16.42vw;
}

---

'postcss-design-convert' : {
  multiple: 2,
  units: ['vw', 'rem'],
  selector: /\.design-/
}

  /* Input example */
.design-a {
  width: 8.21vw;
  height: 8.21rem;
}
.custom .design-a {
  width: 8.21vw;
  height: 8.21rem;
}

  /* Output example */
.design-a {
  width: 16.42vw;
  height: 16.42rem;
}
.custom .design-a {
  width: 16.42vw;
  height: 16.42rem;
}

---

'postcss-design-convert' : {
  multiple: 2,
  units: ['vw'],
  selector: /\.design-/,
  attribute: /width/
}

  /* Input example */
.design-a {
  width: 8.21vw;
  height: 8.21vw;
}
.custom .design-a {
  width: 8.21vw;
  height: 8.21vw;
}

  /* Output example */
.design-a {
  width: 16.42vw;
  height: 8.21vw;
}
.custom .design-a {
  width: 16.42vw;
  height: 8.21vw;
}

Usage

//postcss.config.js
module.exports = {
  plugins:[
    require('postcss-design-convert')({
      multiple: 2,
      units: ['vw'],
      selector: /\.design-/
    })
  ]
}

//.postcssrc.js
module.exports = {
  'plugins': {
    'postcss-design-convert' : {
      multiple: 2,
      units: ['vw'],
      selector: /\.design-/
    }
  }
}

Options

1. multiple (number) default 2: how many times the design draft needs to be multiplied

2. units (array<string>) default ['vw']: the units to be converted

3. selector (string | Reg) default /./: used to filter out the style to be converted (version compatibility reasons, alias [classRule])

4. attribute (string | Reg): used to filter out the attributes to be converted

See PostCSS docs for examples for your environment.