Scalable CSS

PostCSS plugin to scale (up/down) CSS numerical values.

Example

Input:

.foo {
    height: 100px;
}

Reduced by 50%:

Output:

.foo {
  height: 50px;
}

Installation

npm i @modnxyz/scalablecss

• The package is available on both NPM and Github registry.

Usage

ScalableCSS takes one argument, which is javascript object:

options = {
  // required options 
  percent: (1/2)*100,// scaling percent, e.g. 50%
  // optional options
  declares:['min-height','height'] // an array of declares, the scaling will apply **only** to it.
  // the default value: 
  // ['min-height','min-width','left','top','width','height','margin', 'padding', 'font-size', 'line-height', 'transform'];
}

// Then embed it into your project.
scalableCSS(options)

See PostCSS docs for examples related to your environment.

TODO

• Refactoring.
• Implement cli version.
• Scale functions numerical values, e.g. scale down translate(100px) to translate(50px).

Feel free to pick one, and submit pull request!

Credit & License

• Author: Fares AlHarbi, ≡ Mod(N).
• License: MIT license, 2021 ≡ Mod(N), all rights reserved.