		@@ -11,2 +11,3 @@ 'use strict';
		name: 'emotion', // not required
		inherits: require('babel-plugin-syntax-jsx'),
		visitor: {
		@@ -41,2 +42,5 @@ Program: {
		},
		JSXOpeningElement: function JSXOpeningElement(path, state) {
		(0, _cssProp2.default)(path, t);
		},
		TaggedTemplateExpression: function TaggedTemplateExpression(path, state) {
		@@ -196,2 +200,6 @@ // in:

		var _cssProp = require('./css-prop');

		var _cssProp2 = _interopRequireDefault(_cssProp);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		@@ -198,0 +206,0 @@

package.json

		{
		"name": "emotion",
		"version": "4.1.2",
		"version": "4.1.3",
		"description": "high performance css-in-js",
		@@ -12,3 +12,4 @@ "main": "lib/index.js",
		"styled.js",
		"server.js"
		"server.js",
		"vue.js"
		],
		@@ -31,2 +32,3 @@ "scripts": {
		"dependencies": {
		"babel-plugin-syntax-jsx": "^6.18.0",
		"styled-components": "2.0.0",
		@@ -65,3 +67,4 @@ "touch": "^1.0.0"
		"strip-json-comments-cli": "^1.0.1",
		"uglify-js": "2.8.23"
		"uglify-js": "2.8.23",
		"vue": "^2.3.4"
		},
		@@ -68,0 +71,0 @@ "author": "Kye Hohenberger",

README.md

		@@ -110,6 +110,6 @@ <h1 align="center" style="color: #343a40">
		```jsx
		import { styled } from 'emotion'
		import styled from 'emotion/styled'

		const H1 = styled('h1')`
		color: 'blue';
		color: blue;
		font-size: 48px;
		@@ -128,3 +128,3 @@ transform: scale(${props => props.scale});
		font-size: ${fontSize * 2/3}px;
		color: 'red';
		color: red;
		`
		@@ -140,3 +140,3 @@
		font-size: ${fontSize * 1/3}px;
		color: 'red';
		color: red;
		`
		@@ -150,3 +150,3 @@
		const H1 = styled('h1')`
		color: 'red';
		color: red;
		`
		@@ -161,2 +161,38 @@

		### vue styled

		```html
		<template>
		<div id="app">
		<styled-div>This should have a blue background.</styled-div>
		<styled-component></styled-component>
		</div>
		</template>

		<script>
		import BoringComponent from './components/BoringComponent'
		// Import styled from emotion/vue instead of emotion/styled
		import styled from 'emotion/vue'

		// You can use styled.* just like with React
		const StyledDiv = styled.div`
		background: blue;
		`

		// You can also pass components in
		const StyledComponent = styled(BoringComponent)`
		display: flex;
		justify-content: center;
		`

		export default {
		name: 'app',
		components: {
		'styled-div': StyledDiv,
		'styled-component': StyledComponent
		}
		}
		</script>
		```

		#### attr
		@@ -163,0 +199,0 @@

src/babel.js

		@@ -6,2 +6,3 @@ import fs from 'fs'
		import findAndReplaceAttrs from './attrs'
		import cssProps from './css-prop'

		@@ -67,2 +68,3 @@ function parseDynamicValues (rules, t) {
		name: 'emotion', // not required
		inherits: require('babel-plugin-syntax-jsx'),
		visitor: {
		@@ -103,2 +105,5 @@ Program: {
		},
		JSXOpeningElement (path, state) {
		cssProps(path, t)
		},
		TaggedTemplateExpression (path, state) {
		@@ -117,4 +122,5 @@ // in:
		const parent = path.findParent(p => p.isVariableDeclarator())
		const identifierName =
		parent && t.isIdentifier(parent.node.id) ? parent.node.id.name : ''
		const identifierName = parent && t.isIdentifier(parent.node.id)
		? parent.node.id.name
		: ''

		@@ -121,0 +127,0 @@ function buildCallExpression (identifier, tag, path) {

emotion - npm Package Compare versions

New alerts