Skip to content

Commit

Permalink
Remove attr from Usage with CSS Modules docs (#206)
Browse files Browse the repository at this point in the history
  • Loading branch information
emmatown authored and Kye Hohenberger committed Jul 30, 2017
1 parent 678cd1d commit d59082e
Showing 1 changed file with 0 additions and 36 deletions.
36 changes: 0 additions & 36 deletions docs/css-modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,39 +8,3 @@ emotion works well with CSS Modules but it requires a bit of configuration.

- [Example webpack config](../example/webpack.config.js)
- [Example usage of CSS Modules with emotion](../example/src/markdown/index.js)

### attr

The [attr](https://developer.mozilla.org/en-US/docs/Web/CSS/attr) CSS function is supported in
a basic capacity.

```css
/* get value from `width` prop */
width: attr(width vw);

/* specify type or unit to apply to value */
width: attr(width vw);

/* fallback value if props.width is falsey */
width: attr(width vw, 50);
```

```jsx
const H1 = styled.h1`
font-size: attr(fontSize px);
margin: attr(margin rem, 4);
font-family: sans-serif;
color: attr(color, ${colors.pink[5]});
@media (min-width: 680px) {
color: attr(desktopColor);
}
`

const Title = ({ title, scale }) => {
return (
<H1 fontSize={16 * scale} desktopColor={colors.gray[5]}>
{title}
</H1>
)
}
```

0 comments on commit d59082e

Please sign in to comment.