Merge pull request #154 from tkh44/glamor-extended

The heart of Te Fiti

example/.babelrc

@@ -4,13 +4,16 @@
       "env",
       {
         "modules": false,
-        "loose": true
+        "loose": true,
+        "targets": {
+          "uglify": true
+        }
       }
     ],
     "stage-2",
     "react"
   ],
   "plugins": [
-    'emotion/babel'
+    ['emotion/babel']
   ]
 }

example/package.json

@@ -15,8 +15,8 @@
   "devDependencies": {
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
-    "babel-preset-env": "^1.5.1",
+    "babel-loader": "^7.1.1",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "babel-standalone": "^6.24.2",

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;
   }
 `