Repository: tkh44/emotion
Pull request #16 (2017-06-15 14:55:58)

Avoid unwanted spaces
A little change to avoid that 
<img width="213" alt="screen shot 2017-06-15 at 16 54 39" src="https://user-images.githubusercontent.com/14132464/27187415-73b673be-51eb-11e7-9818-51692918d844.png">



Patch:
diff --git a/example/package.json b/example/package.json
index 58abeafa..a3321d8c 100755
--- a/example/package.json
+++ b/example/package.json
@@ -10,8 +10,7 @@
     "glam": "^4.0.3",
     "open-color": "^1.5.1",
     "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-markdown": "^2.5.0"
+    "react-dom": "^15.5.4"
   },
   "devDependencies": {
     "babel-core": "^6.23.1",
diff --git a/example/src/blocks/.eslintrc b/example/src/blocks/.eslintrc
deleted file mode 100644
index 48ef1049..00000000
--- a/example/src/blocks/.eslintrc
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "globals": {
-    "React": false,
-    "css": false,
-    "fragment": false,
-    "styled": false,
-    "colors": false,
-    "render": false,
-    "ReactMarkdown": false,
-    "docMarkdown": false
-  }
-}
diff --git a/example/src/blocks/basic.example b/example/src/blocks/basic.example
index daebf046..c2b4cfe3 100644
--- a/example/src/blocks/basic.example
+++ b/example/src/blocks/basic.example
@@ -1,39 +1,147 @@
-const Heading = styled('h1')`
+// `colors` come from open color
+const Header = styled('header')`
+  flex: none;
+  display: attr(display, block);
+  justify-content: flex-start;
+  align-items: center;
+  
+  & > a {
+    color: ${colors.green[4]};
+  }
+`
 
+const baseText = fragment`
+  color: ${colors.gray[3]};
 `
 
-const Link = styled('a')`
+const H1 = styled('h1')`
+  @apply ${baseText};
+  @media(min-width: 500px) {
+    color: ${colors.gray[5]};
+  }
+`
 
+const Banner = styled(H1)`
+  margin: 16px 0px;
+  font-size: 2rem;
+  font-family: sans-serif;
+  text-decoration: none;
 `
 
-const Paragraph = styled('p')`
+const HeaderLink = styled('a')`
+  @apply ${baseText};
+  margin-left: auto;
+  text-decoration: none;
+  &:hover {
+    color: ${colors.green[8]};
+  }
+`
 
+const Content = styled('div')`
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column; 
+  width: 100%;
 `
 
-const Code = styled('code')`
+const Input = styled('input')`
+  @apply ${baseText};
+  font-size: 2em;
+  color: ${props => props.color};
+  outline: none;
+  border: none;
+  border-bottom: 2px solid currentColor;
+  font-family: sans-serif;
+  &::placeholder {
+    color: ${colors.gray[3]};
+  }
+`
 
+const Box = styled.div`
+  border: 1px solid ${colors.gray[8]}
+  min-height: 200px;
+  margin-top: 8px;
+  background-color: ${colors.gray[1]};
+  & + & {
+    background-color: ${colors.green[0]};
+  }
 `
 
-const CodeBlock = styled('pre')`
+const inputFrag = fragment`
+  flex: 1;
+  font-size: 2em;
+  color: ${props => props.color};
+  outline: none;
+  border: none;
+  border-bottom: 2px solid currentColor;
+  font-family: sans-serif;
+`
 
+const TextInput = styled(
+  ({ className, label, preInput, postInput, ...rest }) => {
+    return (
+      <fieldset className={className}>
+        {label}
+        <div>
+          {preInput}
+          <Input color="#495057" {...rest} />
+          {postInput}
+        </div>
+      </fieldset>
+    )
+  }
+)`
+  color: ${colors.gray[7]};
+  font-size: 20px;
+  margin: 8px 0;
+  outline: none;
+  border: none;
+  & > div { display: flex; }
+  
+  & > input {
+    @apply ${inputFrag};
+  }
+  
+  & .icon {
+    flex: none;
+    height: 40px;
+    width: 40px;
+    background: ${colors.pink[3]};
+    
+    & .pre-input {
+      margin-right: 8px;
+    }
+    
+    & .post-input {
+      margin-left: 8px;
+    }
+  }
 `
 
-render(
-  <ReactMarkdown
-    source={docMarkdown}
-    renderers={{
-      Heading,
-      Link,
-      Paragraph,
-      Code,
-      CodeBlock: props => {
-        return (
-          <CodeBlock key={props.nodeKey} className={props.className}>
-            <Code>{props.literal}</Code>
-          </CodeBlock>
-        )
-      }
-    }}
-  />,
-  mountNode
-)
+const App = () =>
+  <Content>
+    <Header display="flex">
+      <Banner>
+        emotion
+      </Banner>
+      <HeaderLink
+        href="https://github.com/tkh44/emotion"
+        target="_blank"
+        rel="nofollow"
+      >
+        github
+      </HeaderLink>
+    </Header>
+    <Content>
+      <H1 css={`color: ${colors.gray[8]}`}>playground</H1>
+      <Input color={colors.green[4]} type="text" placeholder="styled input" />
+      <Box />
+      <TextInput
+        label={<label>Input Label</label>}
+        postInput={<i className="icon post-input" />}
+      />
+      <Box />
+    </Content>
+  </Content>
+
+render(<App />, mountNode)
diff --git a/example/src/guides/index.md b/example/src/guides/index.md
deleted file mode 100644
index 9010c4b0..00000000
--- a/example/src/guides/index.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# emotion
-
-[github](https://github.com/tkh44/emotion)
-[npm](https://npm.im/emotion)
-
-High performance, precompiled css-in-js using the css you know.
-
-
-In order to learn more about emotion lets build this guide together. By following along below, we can get this markdown looking good.
-
-#### Heading
-
-👈 Find the `Heading` declaration and modify it to match the example below.
-
-```jsx
-const Heading = styled('h1')`
-  color: #da77f2;
-  letter-spacing: 1px;
-`
-```
-
-#### Links
-
-Change them to green and fix up their font.
-
-👈 Find the `Link` declaration and modify it to match the example below.
-
-```jsx
-const Link = styled('a')`
-  font-size: 1rem;
-  margin-left: auto;
-  margin-right: 8px;
-  text-decoration: none;
-  color: ${colors.green[4]};
-  
-  p & {
-    margin: 0;
-  }
-  
-  &:hover {
-    color: ${colors.green[8]};
-  }
-`
-```
-
-#### Paragraphs
-
-Now lets clean up the paragraphs.
-
-👈 Find the `Paragraph` declaration and modify it to match the example below.
-
-```jsx
-const Paragraph = styled('div')`
-  margin: 16px 0;
-  padding: 2px;
-  font-size: 0.85rem;
-  color: ${colors.gray[8]};
-`
-```
-
-#### Code Blocks
-
-These code blocks don't really stand out. Lets give them a nice background and lighten the text color a bit.
-
-👈 Find the `Code` declaration and modify it to match the example below.
-
-```jsx
-const Code = styled('code')`
-  font-family: monospace;
-  font-size: 0.75rem;
-  color: ${colors.gray[8]};
-  background-color: ${colors.gray[0]};
-  padding: 1px;
-  
-  p & {
-    font-size: 0.99rem;
-  }
-`
-```
-
-That modified the text but we still need to style the container.
-
-👈 Find the `CodeBlock` declaration and modify it to match the example below.
-
-```jsx
-const CodeBlock = styled('pre')`
-  margin: 0;
-  padding: 4px;
-  color: ${colors.gray[6]};
-  background-color: ${colors.gray[0]};
-  border-radius: attr(radius, 6px);
-`
-```
-
diff --git a/example/src/main.js b/example/src/main.js
index be4ba91e..7bb4555d 100755
--- a/example/src/main.js
+++ b/example/src/main.js
@@ -1,4 +1,4 @@
-/* eslint-disable jsx-quotes,import/no-webpack-loader-syntax */
+/* eslint-disable jsx-quotes */
 import './global.css'
 import './main.js.css'
 import './dracula.css'
@@ -6,13 +6,11 @@ import React from 'react'
 import { render } from 'react-dom'
 import { styled } from 'emotion'
 import css, { fragment } from 'glam'
-import ReactMarkdown from 'react-markdown'
 import colors from 'open-color/open-color.json'
 import Playground from './playground'
 
+// eslint-disable-next-line import/no-webpack-loader-syntax
 const componentExample = require('raw-loader!./blocks/basic.example')
-const docMarkdown = require('raw-loader!./guides/index.md')
-const readmeMarkdown = require('raw-loader!../../README.md')
 
 class App extends React.Component {
   render () {
@@ -21,16 +19,7 @@ class App extends React.Component {
         <Playground
           noRender={false}
           codeText={componentExample}
-          scope={{
-            React,
-            css,
-            fragment,
-            styled,
-            colors,
-            render,
-            ReactMarkdown,
-            docMarkdown: `${docMarkdown}\n*****\n${readmeMarkdown}`
-          }}
+          scope={{ React, css, fragment, styled, colors, render }}
         />
       </div>
     )
diff --git a/src/react.js b/src/react.js
index 23d1a13d..d99c41cd 100644
--- a/src/react.js
+++ b/src/react.js
@@ -1,17 +1,17 @@
 import React from 'react'
 import magic from 'glam'
 
-export const styled = (tag, [cls, vars = [], content]) => props =>
-  React.createElement(
+export const styled = (tag, [cls, vars = [], content]) => props => {
+  const className = magic(
+    cls,
+    vars.map(v => (v && typeof v === 'function' ? v(props) : v)),
+    content
+  )
+
+  return React.createElement(
     tag,
     Object.assign({}, props, {
-      className:
-        (props.className || '') +
-          ' ' +
-        magic(
-            cls,
-            vars.map(v => (v && typeof v === 'function' ? v(props) : v)),
-            content
-          )
+      className: props.className ? props.className + ' ' + className : className
     })
   )
+}


Test patch:
diff --git a/src/__tests__/__snapshots__/react.js.snap b/src/__tests__/__snapshots__/react.js.snap
index 6463a264..5fb09ccf 100644
--- a/src/__tests__/__snapshots__/react.js.snap
+++ b/src/__tests__/__snapshots__/react.js.snap
@@ -2,7 +2,7 @@
 
 exports[`glam react attr 1`] = `
 <h1
-  className=" css-15vt02v vars-178h3yr"
+  className="css-15vt02v vars-178h3yr"
   fontSize={48}
 />
 `;
@@ -17,7 +17,7 @@ exports[`glam react basic 1`] = `
 
 exports[`glam react basic render 1`] = `
 <h1
-  className=" css-13wdnau vars-nujrf4"
+  className="css-13wdnau vars-nujrf4"
 >
   hello world
 </h1>
@@ -50,7 +50,7 @@ exports[`glam react function in expression 1`] = `
 
 exports[`glam react higher order component 1`] = `
 <div
-  className=" css-o7j1h0 css-13wdnau vars-nujrf4"
+  className="css-o7j1h0 css-13wdnau vars-nujrf4"
 >
   <div
     className="css-1l3rx1p"