Alternative to semantic-ui-react-less-loader

[skleeschulte]

Just wanted to let you know, I published a Babel plugin that complements the semantic-ui-less-module-loader (and replaces/extends the functionality of semantic-ui-react-less-loader):
babel-plugin-transform-semantic-ui-react-imports

The reason is, I wanted to be able to write imports like import { Button } from 'semantic-ui-react', whereas semantic-ui-react-less-loader requires imports like import Button from 'semantic-ui-react/src/elements/Button'.

[gadyonysh]

@skleeschulte Looks great, thank you. In my projects I use babel-plugin-lodash, because semantic-ui-react imports lodash directly:

import _ from 'lodash'

Can your plugin also transform lodash imports to cherry-pick its modules?

[skleeschulte]

Short answer: it does not transform lodash imports.

Long answer: If you do not explicitly import files from semantic-ui-react/src, you will be using the files from semantic-ui-react/dist/.../..., and these files are already built with babel-plugin-lodash. Using babel-plugin-lodash here should be a no-op.

However, my plugin replaces the functionality of babel-plugin-lodash with the configuration ["lodash", { "id": ["semantic-ui-react"] }]. You can read more about this in the RADME of my plugin.

If you import files from semantic-ui-react/src, you can simply activate both babel plugins (babel-plugin-lodash and babel-plugin-transform-semantic-ui-react-imports). Just make sure to not configure them to both mangle imports from semantic-ui-react.