Te Fiti

example/.babelrc

@@ -11,6 +11,6 @@
     "react"
   ],
   "plugins": [
-    'emotion/babel'
+    ['emotion/babel']
   ]
 }

example/src/blocks/composes.example

@@ -13,4 +13,4 @@ const Avatar = styled('img')`
   }
 `
 
-render(<Avatar src={avatarUrl} />, mountNode)
+render(<Avatar src={logoUrl} />, mountNode)

example/src/blocks/css-prop.example

@@ -12,7 +12,7 @@ render(
       background-color: #8c81d8;
       border-radius: 4px;
 
-      img {
+      & img {
         width: 96px;
         height: 96px;
         border-radius: 50%;
@@ -24,7 +24,7 @@ render(
       }
     `}
   >
-    <img src={avatarUrl} />
+    <img src={logoUrl} />
   </div>,
   mountNode
 )

example/src/blocks/intro.example

@@ -4,4 +4,4 @@ const Avatar = styled('img')`
   border-radius: 50%;
 `
 
-render(<Avatar src={avatarUrl} />, mountNode)
+render(<Avatar src={logoUrl} />, mountNode)

example/src/blocks/keyframes.example

@@ -25,6 +25,6 @@ const Avatar = styled('img')`
 `
 
 render(
-  <Avatar src={avatarUrl} rounded />,
+  <Avatar src={logoUrl} rounded />,
   mountNode
 )

example/src/blocks/media.example

@@ -10,6 +10,6 @@ const Avatar = styled('img')`
 `
 
 render(
-  <Avatar src={avatarUrl} rounded />,
+  <Avatar src={logoUrl} rounded />,
   mountNode
 )

example/src/blocks/named.example

@@ -6,6 +6,6 @@ const Avatar = styled('img')`
 `
 
 render(
-  <Avatar src={avatarUrl} />,
+  <Avatar src={logoUrl} />,
   mountNode
 )

example/src/blocks/nested.example

@@ -1,12 +1,12 @@
 const Avatar = styled('div')`
-  img {
+  & img {
     width: 96px;
     height: 96px;
     border-radius: 50%;
   }
 `
 
 render(
-  <Avatar><img src={avatarUrl} /></Avatar>,
+  <Avatar><img src={logoUrl} /></Avatar>,
   mountNode
 )

example/src/blocks/objects.example

@@ -3,6 +3,25 @@ const imageStyles = css({
   height: 96
 })
 
+const fakeBlue = css([
+  {
+    color: "blue"
+  }
+]);
+
+const red = css([
+  {
+    color: "red"
+  }
+]);
+
+const blue = css([
+  red,
+  {
+    color: "blue"
+  }
+]);
+
 const prettyStyles = css([
   {
     borderRadius: '50%',
@@ -11,29 +30,14 @@ const prettyStyles = css([
       transform: 'scale(1.2)'
     }
   },
-  { border: '3px solid #8c81d8' }
+  {border: '3px solid currentColor'}
 ])
 
 const Avatar = styled('img')`
-  composes: ${prettyStyles} ${imageStyles};
+  composes: ${prettyStyles} ${imageStyles} ${blue}
 `
 
-const AvatarContainer = styled.div(
-  imageStyles,
-  {
-    borderRadius: 10,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  props => ({
-    backgroundColor: props.backgroundColor
-  })
-)
-
 render(
-  <AvatarContainer backgroundColor='pink'>
-    <Avatar src={avatarUrl} />
-  </AvatarContainer>,
+  <Avatar src={logoUrl}/>,
   mountNode
 )

example/src/blocks/props.example

@@ -6,6 +6,6 @@ const Avatar = styled('img')`
 `
 
 render(
-  <Avatar src={avatarUrl} rounded />,
+  <Avatar src={logoUrl} rounded />,
   mountNode
 )

example/src/blocks/pseudo.example

@@ -10,6 +10,6 @@ const Avatar = styled('img')`
 `
 
 render(
-  <Avatar src={avatarUrl} rounded />,
+  <Avatar src={logoUrl} rounded />,
   mountNode
 )

example/src/blocks/styled-with-object.example

@@ -4,4 +4,4 @@ const Avatar = styled('img')({
   borderRadius: '50%'
 })
 
-render(<Avatar src={avatarUrl} />, mountNode)
+render(<Avatar src={logoUrl} />, mountNode)

example/src/blocks/styling-any-component.example

@@ -7,4 +7,4 @@ const Avatar = styled(Image)`
     border-radius: 50%;
 `
 
-render(<Avatar src={avatarUrl} />, mountNode)
+render(<Avatar src={logoUrl} />, mountNode)

example/src/blocks/theming.example

@@ -14,7 +14,7 @@ const Avatar = styled('img')`
 
 render(
   <ThemeProvider theme={theme}>
-    <Avatar src={avatarUrl} />
+    <Avatar src={logoUrl} />
   </ThemeProvider>,
   mountNode
 )

example/src/main.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { ThemeProvider } from 'emotion/react/theming'
-import styled, {  css, fontFace, keyframes, injectGlobal } from 'emotion/react'
+import styled, { css, fontFace, keyframes, injectGlobal } from 'emotion/react'
 import Markdown from './markdown'
 import Playground from './playground'
 import logoUrl from '../../emotion.png'
@@ -60,7 +60,7 @@ const theme = {
 const PlaygroundWrapper = styled('div')`
   font-family: 'Oxygen', sans-serif;
   flex:1;
-  color: attr(color, #343a40);
+  color: #343a40;
   background: #f8f9fa;
 
   & .inner {
@@ -224,7 +224,7 @@ class App extends React.Component {
             {/* }} */}
             {/* /> */}
 
-            <Markdown markdown={require('../../docs/theming.md')}/>
+            <Markdown markdown={require('../../docs/theming.md')} />
             <Playground
               maxHeight={180}
               noRender={false}

example/src/markdown/index.js

@@ -6,6 +6,7 @@ import styles from './index.css'
 
 const MarkdownContainer = styled('div')`
   composes: ${styles.markdownContainer};
+
   h1, h2, h3, h4, h5 {
     margin: 16px 0 8px 0;
     letter-spacing: 1px;
@@ -19,7 +20,7 @@ const Link = styled('a')`
   text-decoration: none;
   color: ${p => p.theme.purple};
 
-  p & {
+  & p & {
     margin: 0;
   }
 
@@ -34,7 +35,7 @@ const Paragraph = styled('p')`
   font-size: 0.85rem;
   color: ${colors.gray[8]};
 
-  a {
+  & a {
     font-size: 0.85rem;
   }
 
@@ -47,7 +48,7 @@ const Code = styled('code')`
   background-color: ${colors.gray[1]};
   padding: 1px;
 
-  p & {
+  & p & {
     font-size: 0.99rem;
   }
 `

example/src/playground/index.js

@@ -11,105 +11,105 @@ import styled from 'emotion/react'
 import colors from 'open-color'
 
 const dracula = css`
-  .cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
+  & .cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
     background-color: #282a36 !important;
     color: #f8f8f2 !important;
     border: none;
   }
 
-  .cm-s-dracula .CodeMirror-gutters {
+  & .cm-s-dracula .CodeMirror-gutters {
     color: #282a36;
   }
 
-  .cm-s-dracula .CodeMirror-cursor {
+  & .cm-s-dracula .CodeMirror-cursor {
     border-left: solid thin #f8f8f2 !important;
   }
 
-  .cm-s-dracula .CodeMirror-linenumber {
+  & .cm-s-dracula .CodeMirror-linenumber {
     color: #6D8A88;
   }
 
-  .cm-s-dracula .CodeMirror-selected {
+  & .cm-s-dracula .CodeMirror-selected {
     background: rgba(255, 255, 255, 0.10);
   }
 
-  .cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection {
+  & .cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection {
     background: rgba(255, 255, 255, 0.10);
   }
 
-  .cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection {
+  & .cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection {
     background: rgba(255, 255, 255, 0.10);
   }
 
-  .cm-s-dracula span.cm-comment {
+  & .cm-s-dracula span.cm-comment {
     color: #6272a4;
   }
 
-  .cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 {
+  & .cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 {
     color: #f1fa8c;
   }
 
-  .cm-s-dracula span.cm-number {
+  & .cm-s-dracula span.cm-number {
     color: #bd93f9;
   }
 
-  .cm-s-dracula span.cm-variable {
+  & .cm-s-dracula span.cm-variable {
     color: #50fa7b;
   }
 
-  .cm-s-dracula span.cm-variable-2 {
+  & .cm-s-dracula span.cm-variable-2 {
     color: white;
   }
 
-  .cm-s-dracula span.cm-def {
+  & .cm-s-dracula span.cm-def {
     color: #50fa7b;
   }
 
-  .cm-s-dracula span.cm-operator {
+  & .cm-s-dracula span.cm-operator {
     color: #ff79c6;
   }
 
-  .cm-s-dracula span.cm-keyword {
+  & .cm-s-dracula span.cm-keyword {
     color: #ff79c6;
   }
 
-  .cm-s-dracula span.cm-atom {
+  & .cm-s-dracula span.cm-atom {
     color: #bd93f9;
   }
 
-  .cm-s-dracula span.cm-meta {
+  & .cm-s-dracula span.cm-meta {
     color: #f8f8f2;
   }
 
-  .cm-s-dracula span.cm-tag {
+  & .cm-s-dracula span.cm-tag {
     color: #ff79c6;
   }
 
-  .cm-s-dracula span.cm-attribute {
+  & .cm-s-dracula span.cm-attribute {
     color: #50fa7b;
   }
 
-  .cm-s-dracula span.cm-qualifier {
+  & .cm-s-dracula span.cm-qualifier {
     color: #50fa7b;
   }
 
-  .cm-s-dracula span.cm-property {
+  & .cm-s-dracula span.cm-property {
     color: #66d9ef;
   }
 
-  .cm-s-dracula span.cm-builtin {
+  & .cm-s-dracula span.cm-builtin {
     color: #50fa7b;
   }
 
-  .cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type {
+  & .cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type {
     color: #ffb86c;
   }
 
-  .cm-s-dracula .CodeMirror-activeline-background {
+  & .cm-s-dracula .CodeMirror-activeline-background {
     background: rgba(255, 255, 255, 0.1);
   }
 
-  .cm-s-dracula .CodeMirror-matchingbracket {
+  & .cm-s-dracula .CodeMirror-matchingbracket {
     text-decoration: underline;
     color: white !important;
   }
@@ -128,7 +128,7 @@ const PlaygroundContent = styled('div')`
       border-radius: 4px;
     }
 
-    .CodeMirror {
+    & .CodeMirror {
       height: auto;
       border-radius: 4px;
     }

example/src/preview/index.js

@@ -5,9 +5,7 @@ import PropTypes from 'prop-types'
 import { registerPlugin, transform } from 'babel-standalone'
 import styled from 'emotion/react'
 
-const ric =
-  window.requestIdleCallback ||
-  window.requestAnimationFrame
+const ric = window.requestIdleCallback || window.requestAnimationFrame
 
 registerPlugin('emotion/babel', require('emotion/babel'))