umijs / babel-plugin-import

Modularly import plugin for babel.
3.16k stars 404 forks source link

Icon animation are not imported #318

Closed pybuche closed 5 years ago

pybuche commented 5 years ago

Hi,

I used this plugin to help me decrease my bundle size, but it results in having missing imports. At least, I noticed it with Button component, while using the loading prop.

My Button:

import React from 'react';
import PropTypes from 'prop-types';
import { Button as AntButton } from 'antd';

import 'antd/lib/style/core/iconfont.less'; // Need this import for the loading spinner to actually spin
import 'app/assets/style/atoms/button.scss';

const Button = ({ children, ...props }) => (
    <AntButton className="btn" size="large" type="primary" {...props}>
        <span>{children}</span>
    </AntButton>
);

Button.propTypes = {
    children: PropTypes.node,
};

export default Button;

And my .babelrc:

{
    "presets": [
        "babel-preset-env",
        "babel-preset-react",
    ],
    "plugins": [
        "macros",
        "transform-class-properties",
        "transform-object-rest-spread",
        ["babel-plugin-styled-components", { "ssr": true }],
        ["import", { "libraryName": "antd", "style": true }]
    ],
    "ignore": ["node_modules", "public/dist"]
}

Any idea how I could fix it? Thx!

afc163 commented 5 years ago
- import 'antd/lib/style/core/iconfont.less';
+ import 'antd/lib/button/style';
pybuche commented 5 years ago

But shouldn't the babel-import-plugin do that for me ? With the .babelrc line:

["import", { "libraryName": "antd", "style": true }]

I tried it anyway and it doesn't change my problem. antd/lib/button/style is already imported in the transpiled files, but the icon spinning animation file is not :/

afc163 commented 5 years ago

Could you provide a reproduce github repo?

pybuche commented 5 years ago

Ok, I found the problem.

I did that https://github.com/ant-design/ant-design/issues/4331#issuecomment-426256185 to avoid having global style leak on my project. Thus the global iconfont & motion less files where not imported...

I switched to a different strategy that is this one https://github.com/ant-design/ant-design/issues/4331#issuecomment-396875383 I hope we can figure out a solution later to avoid having these hacks, I will look into it.

But this is not an issue, you can close it, thank you!