postcss-remove-nested-calc

    1.0.3 • Public • Published

    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

    js-plugin-starter-kit

    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

    Install

    npm i postcss-remove-nested-calc

    DownloadsWeekly Downloads

    5

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    18.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • njabln