{"action":"created","issue":{"url":"https://api.github.com/repos/jaakmusic/primitives/issues/53","repository_url":"https://api.github.com/repos/jaakmusic/primitives","labels_url":"https://api.github.com/repos/jaakmusic/primitives/issues/53/labels{/name}","comments_url":"https://api.github.com/repos/jaakmusic/primitives/issues/53/comments","events_url":"https://api.github.com/repos/jaakmusic/primitives/issues/53/events","html_url":"https://github.com/jaakmusic/primitives/issues/53","id":321977619,"number":53,"title":"Custom css prop for extending","user":{"login":"malimichael","id":18899991,"avatar_url":"https://avatars1.githubusercontent.com/u/18899991?v=4","gravatar_id":"","url":"https://api.github.com/users/malimichael","html_url":"https://github.com/malimichael","followers_url":"https://api.github.com/users/malimichael/followers","following_url":"https://api.github.com/users/malimichael/following{/other_user}","gists_url":"https://api.github.com/users/malimichael/gists{/gist_id}","starred_url":"https://api.github.com/users/malimichael/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/malimichael/subscriptions","organizations_url":"https://api.github.com/users/malimichael/orgs","repos_url":"https://api.github.com/users/malimichael/repos","events_url":"https://api.github.com/users/malimichael/events{/privacy}","received_events_url":"https://api.github.com/users/malimichael/received_events","type":"User","site_admin":false},"labels":[{"id":929040257,"url":"https://api.github.com/repos/jaakmusic/primitives/labels/Discussion","name":"Discussion","color":"6fe8bd","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-05-10T15:38:00Z","updated_at":"2018-05-23T12:02:27Z","closed_at":null,"author_association":"MEMBER","body":"I find myself reverting to inline styles via the `style` prop if the specified attribute is not available to a given primitive. For example:\r\n\r\n```js\r\n<Aside\r\n        backgroundColor=\"white\"\r\n        padding={['20px']}\r\n        position=\"fixed\"\r\n        style={{ boxShadow: '2px 0 30px 0 rgba(219, 219, 219, 0.5)' }} // no bueno\r\n>\r\n``` \r\n\r\nA current solution is to extend the given component adding on the required attributes. I propose an API that allows us to utilise the `css` helper provided by `styled-components`\r\n\r\n```js\r\n<Aside\r\n        backgroundColor=\"white\"\r\n        padding={['20px']}\r\n        position=\"fixed\"\r\n        css={css`\r\n          box-shadow: 2px 0 30px 0 rgba(219, 219, 219, 0.5);\r\n        `}\r\n>\r\n``` \r\n\r\nThis way components can be extended inline. An added bonus to this approach is that we could use this prop to write component level media queries in pure css\r\n"},"comment":{"url":"https://api.github.com/repos/jaakmusic/primitives/issues/comments/391321769","html_url":"https://github.com/jaakmusic/primitives/issues/53#issuecomment-391321769","issue_url":"https://api.github.com/repos/jaakmusic/primitives/issues/53","id":391321769,"user":{"login":"lukehedger","id":1913316,"avatar_url":"https://avatars1.githubusercontent.com/u/1913316?v=4","gravatar_id":"","url":"https://api.github.com/users/lukehedger","html_url":"https://github.com/lukehedger","followers_url":"https://api.github.com/users/lukehedger/followers","following_url":"https://api.github.com/users/lukehedger/following{/other_user}","gists_url":"https://api.github.com/users/lukehedger/gists{/gist_id}","starred_url":"https://api.github.com/users/lukehedger/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lukehedger/subscriptions","organizations_url":"https://api.github.com/users/lukehedger/orgs","repos_url":"https://api.github.com/users/lukehedger/repos","events_url":"https://api.github.com/users/lukehedger/events{/privacy}","received_events_url":"https://api.github.com/users/lukehedger/received_events","type":"User","site_admin":false},"created_at":"2018-05-23T12:02:27Z","updated_at":"2018-05-23T12:02:27Z","author_association":"MEMBER","body":"I like this idea from [Linaria](https://github.com/callstack/linaria) too - where you compose groups of _styles_:\r\n```jsx\r\nconst title = css`\r\n  text-transform: uppercase;\r\n`\r\n\r\nconst container = css`\r\n  padding: 3em;\r\n`\r\n\r\nconst header = css`\r\n  ${include(title)};\r\n\r\n  font-family: ${fonts.heading};\r\n  font-size: ${modularScale(2)};\r\n\r\n  ${hiDPI(1.5)} {\r\n    font-size: ${modularScale(2.5)}\r\n  }\r\n`\r\n\r\nexport default function Header() {\r\n  return (\r\n    <div {...styles(container)}>\r\n      <h1 {...styles(header)} />\r\n    </div>\r\n  )\r\n}\r\n```"}}
{"actor":{"display_login":"lukehedger"}}