{"action":"closed","issue":{"url":"https://api.github.com/repos/cssinjs/jss/issues/840","repository_url":"https://api.github.com/repos/cssinjs/jss","labels_url":"https://api.github.com/repos/cssinjs/jss/issues/840/labels{/name}","comments_url":"https://api.github.com/repos/cssinjs/jss/issues/840/comments","events_url":"https://api.github.com/repos/cssinjs/jss/issues/840/events","html_url":"https://github.com/cssinjs/jss/issues/840","id":357338821,"node_id":"MDU6SXNzdWUzNTczMzg4MjE=","number":840,"title":"Automatically generate final class names from nested class names, like CSS modules.","user":{"login":"trusktr","id":297678,"node_id":"MDQ6VXNlcjI5NzY3OA==","avatar_url":"https://avatars3.githubusercontent.com/u/297678?v=4","gravatar_id":"","url":"https://api.github.com/users/trusktr","html_url":"https://github.com/trusktr","followers_url":"https://api.github.com/users/trusktr/followers","following_url":"https://api.github.com/users/trusktr/following{/other_user}","gists_url":"https://api.github.com/users/trusktr/gists{/gist_id}","starred_url":"https://api.github.com/users/trusktr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/trusktr/subscriptions","organizations_url":"https://api.github.com/users/trusktr/orgs","repos_url":"https://api.github.com/users/trusktr/repos","events_url":"https://api.github.com/users/trusktr/events{/privacy}","received_events_url":"https://api.github.com/users/trusktr/received_events","type":"User","site_admin":false},"labels":[{"id":583020946,"node_id":"MDU6TGFiZWw1ODMwMjA5NDY=","url":"https://api.github.com/repos/cssinjs/jss/labels/feature%20request","name":"feature request","color":"bfd4f2","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":23,"created_at":"2018-09-05T17:56:25Z","updated_at":"2018-10-01T09:11:25Z","closed_at":"2018-10-01T09:11:25Z","author_association":"NONE","body":"__Is your feature request related to a problem? Please describe.__\r\n\r\nBased on the docs, if we currently have this:\r\n\r\n```js\r\nconst styles = {\r\n  div: {\r\n    '& .warn': {\r\n      color: 'red',\r\n    }\r\n  },\r\n}\r\n```\r\n\r\nthe `.warn` class will not be scoped, left as-is. The output is like:\r\n\r\n```css\r\n.div-123876 .warn {\r\n  color: red;\r\n}\r\n```\r\n\r\nCSS modules by default generates random output classes for all nested classes, so CSS modules output is like\r\n\r\n```css\r\n.div-123876 .warn-634534 {\r\n  color: red;\r\n}\r\n```\r\n\r\nand the object returned from the module is like:\r\n\r\n```js\r\nimport css from './foo.css'\r\nconsole.log(css)\r\n// {\r\n//   div: 'div-123876',\r\n//   warn: 'warn-634534',\r\n// }\r\n```\r\n\r\nthen we place all those classes in our markup.\r\n\r\n__Describe the solution you'd like__\r\n\r\nTo accomplish this in JSS currently, we have to write it like this:\r\n\r\n```js\r\nconst styles = {\r\n  div: {\r\n    '& $warn': {\r\n      color: 'red',\r\n    }\r\n  },\r\n  warn: {}\r\n}\r\n```\r\n\r\nand then we get clash-free class names like we do with CSS modules.\r\n\r\nIt would be great if we didn't have to manually write all the classes at the top level, for a JSS plugin to automatically grab nested class names and generate the clash-free ones.\r\n\r\n"}}
{"actor":{"display_login":"kof"}}