diff --git a/docs/css-modules.md b/docs/css-modules.md index a1d1823ae..32751f5a0 100644 --- a/docs/css-modules.md +++ b/docs/css-modules.md @@ -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 ( -