@iwatakeshi/babel-plugin-remove-import-styles

babel-plugin-remove-import-styles

Forked from babel-plugin-transform-require, this plugin was re-written using Typescript. It's purpose it to remove styles that were imported using import or require statements.

Usage

{
  "env": {
    "production": {
      "plugins": [
        [
          "@iwatakeshi/babel-plugin-remove-import-styles",
          {
            "extensions": [".less", ".sass", ".css"]
          }
        ]
      ]
    }
  }
}

Recipes

Next.js

This plugin can be used in conjunction with next-transpile-modules to remove styles from third-party modules.

To do so, you'll need to configure a babel.config.js file (note that .babelrc would not work — in my case it did not):

module.exports = {
  presets: ['next/babel'],
  overrides: [
    {
      include: ['./node_modules'],
      plugins: [
        [
          '@iwatakeshi/babel-plugin-remove-import-styles',
          {
            extensions: ['.css']
          },
        ],
      ],
    },
  ],
}

Then you'll need to add a next.config.js file that uses next-transpile-modules and add the list of third-party modules that import styles in their library:

const withTM = require('next-transpile-modules')(['@fullcalendar']) // In my case, it was fullcalendar

module.exports = withTM({
  // any other general next.js settings
})