Tree shaking not applying for css with modules enabled

[brunocramos]

Not sure if it's a postcss or rollup config issue, but it seems that enabling modules for postcss makes our bundle export all css.
Consider this in my index.js

export Badge from './js/components/atom/Badge';
export Text from './js/components/atom/Text';

In the example, if I do this:

import { Text } from 'my-lib;
export default class App extends React.Component {
  render() {
    return (
      <Text>Hello</Text>
    );
  }
}

All css from Text and Badge are imported, if though only Text is being used:

The JS tree shakes ok, this is happening only to css.

[transitive-bullshit]

I believe this is due to the way postcss modules extracts all of the styles to be inserted into the head once instead of trying to do this once per css file which is what would need to be done to tree-shake css (and would be really inefficient).

Practically speaking, this shouldn't be much of an issue as CSS is relatively small compared to JS & image assets for most apps. However, if this is an issue for you, I'd recommend using a css-in-js approach which will work around this. You can also try bringing this issue up in the rollup-plugin-postcss repo.

Cheers!

[transitive-bullshit]

See this existing rollup-plugin-postcss issue.