/postcss-calc

A CSS parser for [PostCSS], which will fix syntax errors 👸

Primary LanguageJavaScriptMIT LicenseMIT

PostCSS Calc

A CSS parser for [PostCSS], which will fix syntax errors,

if you write this css code in your .css file in create-react-app

:root {
  --distance: 44px + 44px;
}

.App {
  margin-top: calc(var(--distance)/2 * -1);
}

then, npm run build

Usage

const postcssCalc = require('postcss-calc')

const from = ` 
 :root { --size: 44px; }
 body {
    margin-top: calc(var(size)*-1/2 + var(size)*-1/2);
 }
`;

 postcss(postcssCalc).process(css, { from }).then(result => {
    console.log(result.css)//
    // :root {
    //   --size: 44px;
    // }

    // body {
    //   margin-top: calc(var(size)* -1/2 + var(size)* -1/2);
    //   margin-bottom: calc(var(size)* -1/2 + (-10px));
    // }
  })