{"action":"created","issue":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/21","labels_url":"https://api.github.com/repos/css-modules/css-modules/issues/21/labels{/name}","comments_url":"https://api.github.com/repos/css-modules/css-modules/issues/21/comments","events_url":"https://api.github.com/repos/css-modules/css-modules/issues/21/events","html_url":"https://github.com/css-modules/css-modules/issues/21","id":94959416,"number":21,"title":"Nesting local classes in separate module","user":{"login":"mwillmott","id":2144739,"avatar_url":"https://avatars.githubusercontent.com/u/2144739?v=3","gravatar_id":"","url":"https://api.github.com/users/mwillmott","html_url":"https://github.com/mwillmott","followers_url":"https://api.github.com/users/mwillmott/followers","following_url":"https://api.github.com/users/mwillmott/following{/other_user}","gists_url":"https://api.github.com/users/mwillmott/gists{/gist_id}","starred_url":"https://api.github.com/users/mwillmott/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mwillmott/subscriptions","organizations_url":"https://api.github.com/users/mwillmott/orgs","repos_url":"https://api.github.com/users/mwillmott/repos","events_url":"https://api.github.com/users/mwillmott/events{/privacy}","received_events_url":"https://api.github.com/users/mwillmott/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-07-14T14:39:50Z","updated_at":"2015-07-14T23:38:55Z","closed_at":null,"body":"Drawing from Bootstrap, i have `Button` and `ButtonGroup` components (React variety). Each has it's own CSS module. What i'd like to do is nest the Button component class in the ButtonGroup so that its styling changes. At the moment\r\n\r\n```css\r\n/* button.css */\r\n.button { ... }\r\n\r\n/* buttongroup.css */\r\n.buttonGroup > .button { .... }\r\n```\r\n\r\ntransforms to something like:\r\n\r\n```css\r\n.button---3h-GD { ... }\r\n.buttonGroup---3qigr > .button---3t-2h { ... }\r\n```\r\n\r\nThe nested button class has no reference to the button module so ends up with a difference class name, hence the styling for that component doesn't change when contained within a ButtonGroup.\r\n\r\nI've been trying to figure out if the following can/should be done with `composes` or, rethinking how the component works (e.g. the ButtonGroup component could apply a new class to each child rather than using nested selectors.). Maybe what i'm trying to do is against what is being achieved with CSS modules but if so, what do you see as the suitable alternative to achieving the same behaviour?"},"comment":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/comments/121429234","html_url":"https://github.com/css-modules/css-modules/issues/21#issuecomment-121429234","issue_url":"https://api.github.com/repos/css-modules/css-modules/issues/21","id":121429234,"user":{"login":"oliverbenns","id":1992355,"avatar_url":"https://avatars.githubusercontent.com/u/1992355?v=3","gravatar_id":"","url":"https://api.github.com/users/oliverbenns","html_url":"https://github.com/oliverbenns","followers_url":"https://api.github.com/users/oliverbenns/followers","following_url":"https://api.github.com/users/oliverbenns/following{/other_user}","gists_url":"https://api.github.com/users/oliverbenns/gists{/gist_id}","starred_url":"https://api.github.com/users/oliverbenns/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oliverbenns/subscriptions","organizations_url":"https://api.github.com/users/oliverbenns/orgs","repos_url":"https://api.github.com/users/oliverbenns/repos","events_url":"https://api.github.com/users/oliverbenns/events{/privacy}","received_events_url":"https://api.github.com/users/oliverbenns/received_events","type":"User","site_admin":false},"created_at":"2015-07-14T23:38:55Z","updated_at":"2015-07-14T23:38:55Z","body":"I did @joeybaker 's second suggestion not too long ago. [Gist](https://gist.github.com/oliverbenns/21ff754c2a30b77c6fb2#file-button-set-js-L9)"}}