PostCSS Remove Nested Calc
PostCSS plugin to remove nested calc() for ie11 compatibility.
E.g. Zach Handing wrote about it on codepen, and I had a very similar problem.
This will cause problems in IE11
.foo {
width: calc(100vw - calc(20% - 10px));
}
This will not:
.foo {
width: calc(100vw - (20% - 10px));
}
Install
$ npm install postcss-remove-nested-calc --save-dev
Usage
Check you project for existed PostCSS config: postcss.config.js
in the project root, "postcss"
section in package.json
or postcss
in bundle config.
If you already use PostCSS, add the plugin to plugins list:
module.exports = {
plugins: [
+ require('postcss-remove-nested-calc'),
require('autoprefixer')
]
}
Or for Webpack
module.exports = {
target: 'web',
mode: (process.env.APP_ENV === 'production') ? 'production' : 'development',
devtool: (process.env.APP_ENV === 'production') ? false : 'inline-source-map',
entry: {
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
+ require('postcss-remove-nested-calc'),
require('autoprefixer')
],
}
},
]
},
]
}
};
If you do not use PostCSS, add it according to official docs and set this plugin in settings.
Built With
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. To all the JS RegEx Ninjas out there, this project might have some room for improvement ;)
Please make sure to update tests as appropriate.
Authors
Nico Jacobs
License
This project is licensed under the MIT License - see the LICENSE.md file for details