{"action":"created","issue":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/1859","repository_url":"https://api.github.com/repos/styled-components/styled-components","labels_url":"https://api.github.com/repos/styled-components/styled-components/issues/1859/labels{/name}","comments_url":"https://api.github.com/repos/styled-components/styled-components/issues/1859/comments","events_url":"https://api.github.com/repos/styled-components/styled-components/issues/1859/events","html_url":"https://github.com/styled-components/styled-components/issues/1859","id":343536382,"node_id":"MDU6SXNzdWUzNDM1MzYzODI=","number":1859,"title":"Feature: generating new classname when using dynamic props.","user":{"login":"CristinaSargu","id":25246401,"node_id":"MDQ6VXNlcjI1MjQ2NDAx","avatar_url":"https://avatars0.githubusercontent.com/u/25246401?v=4","gravatar_id":"","url":"https://api.github.com/users/CristinaSargu","html_url":"https://github.com/CristinaSargu","followers_url":"https://api.github.com/users/CristinaSargu/followers","following_url":"https://api.github.com/users/CristinaSargu/following{/other_user}","gists_url":"https://api.github.com/users/CristinaSargu/gists{/gist_id}","starred_url":"https://api.github.com/users/CristinaSargu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/CristinaSargu/subscriptions","organizations_url":"https://api.github.com/users/CristinaSargu/orgs","repos_url":"https://api.github.com/users/CristinaSargu/repos","events_url":"https://api.github.com/users/CristinaSargu/events{/privacy}","received_events_url":"https://api.github.com/users/CristinaSargu/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-07-23T08:31:01Z","updated_at":"2018-07-27T11:51:12Z","closed_at":null,"author_association":"NONE","body":"**Thanks for an awesome tool!**\r\n\r\nI'm currently working on a `Proof of Concept`  of using `Styled-components` for a large project. The only thing that is stopping me from being completely for its usage is  the way `hash is generated when using dynamic props`.\r\n\r\n**In a few words:** \r\n\r\n1. I have a list of menu items.\r\n2. They have the same styles except the color, which is taken from props.\r\n\r\nAs a developer I work a lot with design team and I spend a lot of time using developer tool for adjustments. In my example I try to adjust padding for **all menu items**.\r\n\r\n3. Try to adjust a padding.\r\n4. Given that new hash is generated for each `nav-item` with dynamic props, I have difficulties with the final result.  I want all of my `nav-items` to apply changes, because `padding` property is not a generic one.\r\n\r\n**The main idea** is to have one classname generated for common styles, and another for generic style.\r\n\r\n```jsx\r\nconst NavItem = styled.li`\r\n  color: ${props => props.color}; // output classname for each element (ex: `.bkIsbC`, `.cyYGlF`, ...)\r\n\r\n  padding: 5px 10px;              // output classname for common styles (ex: `.jewpRe`)\r\n  cursor: pointer;                // output classname for common styles (ex: `.jewpRe`)\r\n`;\r\n```\r\n\r\nOutput markup:\r\n```html\r\n<li class=\"jewpRe bkIsbC\" />\r\n<li class=\"jewpRe cyYGlF\" />\r\n```\r\n\r\nI've prepared a [code pen](https://codepen.io/cristinacavruc/pen/bjqYGX) with an `Actual` and `Expected` results and a demo showing the problem.\r\n\r\n\r\n![actual](https://user-images.githubusercontent.com/25246401/43065835-b085aa0e-8e6b-11e8-8841-9eb705df0188.gif)\r\n\r\n![expected](https://user-images.githubusercontent.com/25246401/43065843-b5fdc08e-8e6b-11e8-967f-96cbe2fec246.gif)\r\n"},"comment":{"url":"https://api.github.com/repos/styled-components/styled-components/issues/comments/408396234","html_url":"https://github.com/styled-components/styled-components/issues/1859#issuecomment-408396234","issue_url":"https://api.github.com/repos/styled-components/styled-components/issues/1859","id":408396234,"node_id":"MDEyOklzc3VlQ29tbWVudDQwODM5NjIzNA==","user":{"login":"CristinaSargu","id":25246401,"node_id":"MDQ6VXNlcjI1MjQ2NDAx","avatar_url":"https://avatars0.githubusercontent.com/u/25246401?v=4","gravatar_id":"","url":"https://api.github.com/users/CristinaSargu","html_url":"https://github.com/CristinaSargu","followers_url":"https://api.github.com/users/CristinaSargu/followers","following_url":"https://api.github.com/users/CristinaSargu/following{/other_user}","gists_url":"https://api.github.com/users/CristinaSargu/gists{/gist_id}","starred_url":"https://api.github.com/users/CristinaSargu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/CristinaSargu/subscriptions","organizations_url":"https://api.github.com/users/CristinaSargu/orgs","repos_url":"https://api.github.com/users/CristinaSargu/repos","events_url":"https://api.github.com/users/CristinaSargu/events{/privacy}","received_events_url":"https://api.github.com/users/CristinaSargu/received_events","type":"User","site_admin":false},"created_at":"2018-07-27T11:51:12Z","updated_at":"2018-07-27T11:51:12Z","author_association":"NONE","body":"Just to confirm, for now you don't offer that kind of possibility. But, Would you be interested in a PR with such implementation?"}}
{"actor":{"display_login":"CristinaSargu"}}