feat: add @emotion/babel-plugin

This commit is contained in:
lawvs 2022-08-01 11:09:20 +08:00
parent 16d934bd1d
commit 171d0b8673

View File

@ -151,6 +151,8 @@ module.exports = function (webpackConfig) {
}
}
addEmotionBabelPlugin(config);
config.plugins = [
...config.plugins.filter(
p => !(isProd && p instanceof MiniCssExtractPlugin)
@ -195,3 +197,59 @@ module.exports = function (webpackConfig) {
return config;
};
// TODO handle nx issue
// see https://github.com/nrwl/nx/issues/8870
// see https://github.com/nrwl/nx/issues/4520#issuecomment-787473383
const addEmotionBabelPlugin = config => {
const babelLoader = config.module.rules.find(
rule =>
typeof rule !== 'string' &&
rule.loader?.toString().includes('babel-loader')
);
if (!babelLoader) {
return;
}
babelLoader.options.plugins = [
[
require.resolve('@emotion/babel-plugin'),
{
// See https://github.com/mui/material-ui/issues/27380#issuecomment-928973157
// See https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin#importmap
importMap: {
'@toeverything/components/ui': {
styled: {
canonicalImport: ['@emotion/styled', 'default'],
styledBaseImport: [
'@toeverything/components/ui',
'styled',
],
},
},
'@mui/material': {
styled: {
canonicalImport: ['@emotion/styled', 'default'],
styledBaseImport: ['@mui/material', 'styled'],
},
},
'@mui/material/styles': {
styled: {
canonicalImport: ['@emotion/styled', 'default'],
styledBaseImport: [
'@mui/material/styles',
'styled',
],
},
},
},
// sourceMap is on by default but source maps are dead code eliminated in production
sourceMap: true,
autoLabel: 'dev-only',
labelFormat: '[filename]-[local]',
cssPropOptimization: true,
},
],
...(babelLoader.options.plugins ?? []),
];
};