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
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));
// }
})