Nesting local classes in separate module about css-modules

[nkbt]

👍 to @oliverbenns

I do the same and believe this is the most reasonable approach. Let's stop adding side-effects and do just plain composition.

[joeybaker]

If you want to, you can work around the problem with the :global syntax, but I think this is a place where you'll find that bootstrap's way of thinking and the "component" way of thinking endorsed by css-modules don't agree. Bootstrap's ButtonGroup breaks one of the core-tenants: no more conflicts. If a parent component can change the way a child behaves, we no longer have encapsulation.

Some alternative approaches:

1. Have buttons take a prop that allows their styling to match what a button group would do. This might come close to eliminating the need for a ButtonGroup component.
2. Have your button group component set its own classnames on its button children. This is kinda "magical" and breaks encapsulation, but might come the closest to what you want.
3. Create a whole new ButtonGroup component that doesn't use the Button component at all.

IMHO

[oliverbenns]

I did @joeybaker 's second suggestion not too long ago. Gist

[princed]

There's one trick to make this work:

/* button.css */
.button { 
  composes: button from ".../buttongroup.css"
  ... 
}

/* buttongroup.css */
.buttonGroup > .button { ... }

still transforms to something like

.button---3h-GD { ... }
.buttonGroup---3qigr > .button---3t-2h { ... }

but exported from "button.css" styles object now looks like

{
  button: "button---3h-GD button---3t-2h"
  //  ...
}

Thus any modification you may want to apply to .button inbuttongroup.css will work inside button group.

Obvious downside: button.css has buttongroup.css as a dependency.

[bladeSk]

For anyone coming here from the search, here's another trick you can use. This one uses a @value import and is arguably cleaner/less hacky: #147 (comment)