developit/*babel-plugin-transform-mui-imports.md

## *babel-plugin-transform-mui-imports.md

      
    Raw
  

              *babel-plugin-transform-mui-imports.md
            
          
  babel-plugin-transform-mui-imports
  

A plugin to make authoring with MUI components efficient, both for humans and bundlers.
Here's why:


  ✍️ What you write
  👏 What your bundler sees

import {
  AppBar,
  List, ListItem, ListItemAction,
  makeStyles
} from "@material-ui/core";
import { Add } from '@material-ui/icons';

import AppBar from "@material-ui/core/esm/AppBar";
import List from "@material-ui/core/esm/List";
import ListItem from "@material-ui/core/esm/ListItem";
import ListItemAction from "@material-ui/core/esm/ListItemAction";
import { makeStyles } from "@material-ui/core/esm/styles";
import Add from "@material-ui/icons/esm/Add";

Installation


Get it from npm:

npm i babel-plugin-transform-mui-imports

Put it in your Babel config:

{ "plugins": ["transform-mui-imports"] }

Try it out on ASTExplorer

  
## babel-plugin-transform-mui-imports.js
module.exports = function ({ types: t }) {
  return {
    name: "transform-mui-imports",
    visitor: {
      ImportDeclaration(path, state) {
        const source = path.node.source.value;
        if (!/(@material-ui\/(core|icons))$/.test(source)) return;
        path.replaceWithMultiple(path.get('specifiers').map(s => {
          let specificSource = source + (state.opts.esm===false ? '' : '/esm');
          let specifier = t.clone(s.node);
          // ignore wildcard and default imports that can't be exploded
          if (!t.isImportDefaultSpecifier(s) && !t.isImportNamespaceSpecifier(s)) {
            const name = s.node.imported.name;
            if (name === 'colors') {
              // import { colors } from '..' --> import * as colors from '/colors'
              specifier = t.importNamespaceSpecifier(specifier.local);
              specificSource += '/colors';
            }
            else if (/^(makeStyles|createStyles|createMuiTheme|responsiveFontSizes|styled|useTheme|withStyles|withTheme|createGenerateClassName|jssPreset|ServerStyleSheets|StylesProvider|MuiThemeProvider|ThemeProvider|easing|duration|hexToRgb|rgbToHex|hslToRgb|decomposeColor|recomposeColor|getContrastRatio|getLuminance|emphasize|fade|darken|lighten)$/.test(name)) {
              // core re-exports all of /styles
              // import { styled } from '..' --> import { styled } from '/styles'
              specifier = t.clone(s.node);
              specificSource += '/styles';
            }
            else {
              // import { List } from '..' --> import List from '/esm/List'
              specifier = t.importDefaultSpecifier(specifier.local);
              specificSource += '/' + name;
            }
          }
          return t.importDeclaration([specifier], t.stringLiteral(specificSource));
        }));
      }
    }
  };
}

## package.json
{
  "name": "babel-plugin-transform-mui-imports",
  "version": "0.2.0",
  "author": "Jason Miller (https://github.com/developit)",
  "main": "babel-plugin-transform-mui-imports.js",
  "repo": "gist:037baaec2a0",
  "homepage": "https://gist.github.com/developit/037baaec2a0a1e64e628c84fdd5c1107",
  "scripts": { "prepack": "mv *babel-plugin-transform-mui-imports.md README.md", "postpack": "mv README.md *babel-plugin-transform-mui-imports.md" },
  "peerDependencies": {
    "@material-ui/core": "^4"
  },
  "license": "MIT"
}
	module.exports = function ({ types: t }) {
	return {
	name: "transform-mui-imports",
	visitor: {
	ImportDeclaration(path, state) {
	const source = path.node.source.value;
	if (!/(@material-ui\/(core\|icons))$/.test(source)) return;
	path.replaceWithMultiple(path.get('specifiers').map(s => {
	let specificSource = source + (state.opts.esm===false ? '' : '/esm');
	let specifier = t.clone(s.node);
	// ignore wildcard and default imports that can't be exploded
	if (!t.isImportDefaultSpecifier(s) && !t.isImportNamespaceSpecifier(s)) {
	const name = s.node.imported.name;
	if (name === 'colors') {
	// import { colors } from '..' --> import * as colors from '/colors'
	specifier = t.importNamespaceSpecifier(specifier.local);
	specificSource += '/colors';
	}
	else if (/^(makeStyles\|createStyles\|createMuiTheme\|responsiveFontSizes\|styled\|useTheme\|withStyles\|withTheme\|createGenerateClassName\|jssPreset\|ServerStyleSheets\|StylesProvider\|MuiThemeProvider\|ThemeProvider\|easing\|duration\|hexToRgb\|rgbToHex\|hslToRgb\|decomposeColor\|recomposeColor\|getContrastRatio\|getLuminance\|emphasize\|fade\|darken\|lighten)$/.test(name)) {
	// core re-exports all of /styles
	// import { styled } from '..' --> import { styled } from '/styles'
	specifier = t.clone(s.node);
	specificSource += '/styles';
	}
	else {
	// import { List } from '..' --> import List from '/esm/List'
	specifier = t.importDefaultSpecifier(specifier.local);
	specificSource += '/' + name;
	}
	}
	return t.importDeclaration([specifier], t.stringLiteral(specificSource));
	}));
	}
	}
	};
	}
	{
	"name": "babel-plugin-transform-mui-imports",
	"version": "0.2.0",
	"author": "Jason Miller (https://github.com/developit)",
	"main": "babel-plugin-transform-mui-imports.js",
	"repo": "gist:037baaec2a0",
	"homepage": "https://gist.github.com/developit/037baaec2a0a1e64e628c84fdd5c1107",
	"scripts": { "prepack": "mv babel-plugin-transform-mui-imports.md README.md", "postpack": "mv README.md babel-plugin-transform-mui-imports.md" },
	"peerDependencies": {
	"@material-ui/core": "^4"
	},
	"license": "MIT"
	}