{"action":"created","issue":{"url":"https://api.github.com/repos/jsstyles/jss/issues/86","labels_url":"https://api.github.com/repos/jsstyles/jss/issues/86/labels{/name}","comments_url":"https://api.github.com/repos/jsstyles/jss/issues/86/comments","events_url":"https://api.github.com/repos/jsstyles/jss/issues/86/events","html_url":"https://github.com/jsstyles/jss/issues/86","id":107398113,"number":86,"title":"Sibling selector support?","user":{"login":"mesteiral","id":589964,"avatar_url":"https://avatars.githubusercontent.com/u/589964?v=3","gravatar_id":"","url":"https://api.github.com/users/mesteiral","html_url":"https://github.com/mesteiral","followers_url":"https://api.github.com/users/mesteiral/followers","following_url":"https://api.github.com/users/mesteiral/following{/other_user}","gists_url":"https://api.github.com/users/mesteiral/gists{/gist_id}","starred_url":"https://api.github.com/users/mesteiral/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mesteiral/subscriptions","organizations_url":"https://api.github.com/users/mesteiral/orgs","repos_url":"https://api.github.com/users/mesteiral/repos","events_url":"https://api.github.com/users/mesteiral/events{/privacy}","received_events_url":"https://api.github.com/users/mesteiral/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/jsstyles/jss/labels/question","name":"question","color":"cc317c"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-09-20T15:26:06Z","updated_at":"2015-09-21T22:20:09Z","closed_at":null,"body":"Is it possible to express this CSS snippet as a JSS sheet? And without resorting to globals? If possible, it doesn't seem obvious.\r\n\r\n```css\r\n.switch { /* ... */ }\r\n.switch__input { /* */  }\r\n.switch__input:checked + .switch__toggle { /* */ }\r\n.switch__input:checked + .switch__toggle:before { /* */ }\r\n.switch__input:not(:checked) + .switch__toggle:before { /* */ }\r\n```\r\n\r\nExample DOM:\r\n\r\n```html\r\n<label class=\"switch\">\r\n  <input class=\"switch__input\" type=\"checkbox\">\r\n  <div class=\"switch__toggle\"></div>\r\n</label>\r\n```\r\n\r\nMy intent would be making the `switch__toggle` styling dependent only on view-related concerns (i.e. whether the sibling input is `:checked`), thus avoiding introducing new classes to reflect component state."},"comment":{"url":"https://api.github.com/repos/jsstyles/jss/issues/comments/142126028","html_url":"https://github.com/jsstyles/jss/issues/86#issuecomment-142126028","issue_url":"https://api.github.com/repos/jsstyles/jss/issues/86","id":142126028,"user":{"login":"mesteiral","id":589964,"avatar_url":"https://avatars.githubusercontent.com/u/589964?v=3","gravatar_id":"","url":"https://api.github.com/users/mesteiral","html_url":"https://github.com/mesteiral","followers_url":"https://api.github.com/users/mesteiral/followers","following_url":"https://api.github.com/users/mesteiral/following{/other_user}","gists_url":"https://api.github.com/users/mesteiral/gists{/gist_id}","starred_url":"https://api.github.com/users/mesteiral/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mesteiral/subscriptions","organizations_url":"https://api.github.com/users/mesteiral/orgs","repos_url":"https://api.github.com/users/mesteiral/repos","events_url":"https://api.github.com/users/mesteiral/events{/privacy}","received_events_url":"https://api.github.com/users/mesteiral/received_events","type":"User","site_admin":false},"created_at":"2015-09-21T22:20:09Z","updated_at":"2015-09-21T22:20:09Z","body":"> you don't write selectors in named styles\r\n\r\nYup. I just reused the selectors as they're valid object key names. \r\n\r\nAll clear wrt the rest. I discovered that what I'm after is possibly a name resolution step before the renaming takes place, to cover every occurrence of names in forms such and `name1 + name2`. If such thing existed it would make porting of existing stylesheets to named styles much easier, at risk of misusing object keys."}}