Unused compiled CSS classes aren't eliminated

[StarpTech]

As titled. In the example below you can see that unused styles are bundled- I'd expect that rollup is able to remove them in context of CSS-Modules.

var styles = {"button":"Button__button","unused":"Button__unused"};

// eslint-disable-next-line no-unused-vars
function Button() {
  return /*#__PURE__*/React.createElement("div", {
    className: styles.button
  });
}

export default Button;

[SASUKE40]

It is worthy, let me do some research about implementation.

[StarpTech]

Related developit/microbundle#632

[Anidetrix]

@StarpTech I believe this is related to rollup/rollup#2201 (comment)

[StarpTech]

@Anidetrix thanks!

[kzc]

It's not really a rollup thing. Property hoisting is handled by terser.

$ cat button.js
var styles = {"button": "Button__button", "unused": "Button__unused"};
function Button() {
    return /*#__PURE__*/React.createElement("div", {
        className: styles.button
    });
}
export default Button;

$ terser button.js --module -bc passes=3
export default function() {
    return React.createElement("div", {
        className: "Button__button"
    });
}

Or if you prefer the rollup CLI:

$ rollup button.js -p terser='{module:true,compress:{passes:3},output:{beautify:true}}' --silent
export default function() {
    return React.createElement("div", {
        className: "Button__button"
    });
}

I generally use terser --module -mc passes=3,unsafe,pure_getters depending on the code base, but YMMV.

[CSDev0]

some update about this? sound a very nice addon