Emotion Primitives

.flowconfig

@@ -24,3 +24,4 @@ module.name_mapper='^\(emotion-theming\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(emotion-server\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(create-emotion-server\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(jest-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'
+module.name_mapper='^@emotion\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_ROOT>/packages/\1/src/index'

.gitignore

@@ -8,4 +8,5 @@ packages/site/build
 package-lock.json
 .DS_Store
 .cache
-public/
+public/
+/extract.test.emotion.css

.yarnrc

@@ -1 +1 @@
-workspaces-experimental true
+--publish.access public

docs/docs.yaml

@@ -40,6 +40,7 @@
     - emotion-server
     - emotion-theming
     - jest-emotion
+    - "@emotion/primitives"
     - create-emotion
     - create-emotion-styled
     - create-emotion-server

packages/babel-plugin-emotion/src/index.js

@@ -218,6 +218,7 @@ export function buildStyledCallExpression(
   args: Node[],
   path: BabelPath,
   state: EmotionBabelPluginPass,
+  isCallExpression: boolean,
   t: Types
 ) {
   // unpacking "manually" to prevent array out of bounds access (deopt)
@@ -281,9 +282,18 @@ export function buildStyledCallExpression(
     targetProperty
   )
 
-  return t.callExpression(
+  let styledCall =
+    t.isStringLiteral(tag) &&
+    !isCallExpression &&
     // $FlowFixMe
-    t.callExpression(identifier, [tag, finalOptions, ...restArgs]),
+    tag.value[0] !== tag.value[0].toLowerCase()
+      ? // $FlowFixMe
+        t.memberExpression(identifier, t.identifier(tag.value))
+      : // $FlowFixMe
+        t.callExpression(identifier, [tag, finalOptions, ...restArgs])
+
+  return t.callExpression(
+    styledCall,
     appendStringToExpressions(
       getExpressionsFromTemplateLiteral(path.node.quasi, t),
       stringToAppend,
@@ -304,7 +314,7 @@ export function buildStyledObjectCallExpression(
   const tag = t.isCallExpression(path.node.callee)
     ? path.node.callee.arguments[0]
     : t.stringLiteral(path.node.callee.property.name)
-
+  let isCallExpression = t.isCallExpression(path.node.callee)
   let styledOptions = null
   let restStyledArgs = []
   if (t.isCallExpression(path.node.callee)) {
@@ -335,14 +345,18 @@ export function buildStyledObjectCallExpression(
 
   path.addComment('leading', '#__PURE__')
 
-  return t.callExpression(
-    t.callExpression(identifier, [
-      tag,
-      buildFinalOptions(t, styledOptions, targetProperty, labelProperty),
-      ...restStyledArgs
-    ]),
-    args
-  )
+  let styledCall =
+    t.isStringLiteral(tag) &&
+    !isCallExpression &&
+    tag.value[0] !== tag.value[0].toLowerCase()
+      ? t.memberExpression(identifier, t.identifier(tag.value))
+      : t.callExpression(identifier, [
+          tag,
+          buildFinalOptions(t, styledOptions, targetProperty, labelProperty),
+          ...restStyledArgs
+        ])
+
+  return t.callExpression(styledCall, args)
 }
 
 const visited = Symbol('visited')
@@ -359,7 +373,12 @@ const importedNameKeys = Object.keys(defaultImportedNames).map(
   key => (key === 'styled' ? 'default' : key)
 )
 
-const defaultEmotionPaths = ['emotion', 'react-emotion', 'preact-emotion']
+const defaultEmotionPaths = [
+  'emotion',
+  'react-emotion',
+  'preact-emotion',
+  '@emotion/primitives'
+]
 
 function getRelativePath(filepath: string, absoluteInstancePath: string) {
   let relativePath = nodePath.relative(
@@ -670,6 +689,7 @@ export default function(babel: Babel) {
               [t.stringLiteral(path.node.tag.property.name)],
               path,
               state,
+              false,
               t
             )
           )
@@ -684,6 +704,7 @@ export default function(babel: Babel) {
               path.node.tag.arguments,
               path,
               state,
+              true,
               t
             )
           )

packages/babel-plugin-emotion/src/macro-styled.js

@@ -30,6 +30,7 @@ function macro(options) {
               [t.stringLiteral(path.node.tag.property.name)],
               path,
               state,
+              false,
               t
             )
           )
@@ -40,6 +41,7 @@ function macro(options) {
               path.node.tag.arguments,
               path,
               state,
+              true,
               t
             )
           )

packages/babel-plugin-emotion/test/__snapshots__/primitives.test.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`styled inline babel 6 does not change call expressions 1`] = `
+"
+/*#__PURE__*/styled('SomeFakeComponent', {
+    target: 'e8nbyc50'
+})('color:hotpink;');
+/*#__PURE__*/styled('SomeFakeComponent', {
+    target: 'e8nbyc51'
+})({});"
+`;
+
+exports[`styled inline babel 6 does not change to a call expression when beginning with a upper case letter 1`] = `
+"
+/*#__PURE__*/styled.View(\\"color:hotpink;\\");
+/*#__PURE__*/styled.View({});"
+`;
+
+exports[`styled inline babel 6 other name with @emotion/primitives 1`] = `
+"
+import someOtherName from '@emotion/primitives';
+/*#__PURE__*/someOtherName.View('color:hotpink;');
+/*#__PURE__*/someOtherName.View({});"
+`;
+
+exports[`styled inline babel 7 does not change call expressions 1`] = `
+"/*#__PURE__*/
+styled('SomeFakeComponent', {
+  target: \\"e1u6ll0g0\\"
+})(\\"color:hotpink;\\");
+
+/*#__PURE__*/
+styled('SomeFakeComponent', {
+  target: \\"e1u6ll0g1\\"
+})({});"
+`;
+
+exports[`styled inline babel 7 does not change to a call expression when beginning with a upper case letter 1`] = `
+"/*#__PURE__*/
+styled.View(\\"color:hotpink;\\");
+
+/*#__PURE__*/
+styled.View({});"
+`;
+
+exports[`styled inline babel 7 other name with @emotion/primitives 1`] = `
+"import someOtherName from '@emotion/primitives';
+
+/*#__PURE__*/
+someOtherName.View(\\"color:hotpink;\\");
+
+/*#__PURE__*/
+someOtherName.View({});"
+`;

packages/babel-plugin-emotion/test/primitives.test.js

@@ -0,0 +1,27 @@
+// @flow
+
+import { createInlineTests } from './util'
+
+const cases = {
+  'does not change to a call expression when beginning with a upper case letter': {
+    code: `
+    styled.View\`color: hotpink;\`
+    styled.View({})
+    `
+  },
+  'other name with @emotion/primitives': {
+    code: `
+    import someOtherName from '@emotion/primitives'
+    someOtherName.View\`color: hotpink;\`
+    someOtherName.View({})
+    `
+  },
+  'does not change call expressions': {
+    code: `
+    styled('SomeFakeComponent')\`color: hotpink;\`
+    styled('SomeFakeComponent')({})
+    `
+  }
+}
+
+createInlineTests('styled inline', cases)

packages/primitives/README.md

@@ -0,0 +1,151 @@
+# @emotion/primitives
+
+> Style and render primitive interfaces across multiple targets with emotion
+
+## Introduction
+
+Emotion primitives makes it easy to style and render primitives across multiple platforms like the web, React Native and Sketch using the `emotion` API.
+
+## Install
+
+```
+npm install @emotion/primitives
+```
+
+or if you use yarn
+
+```
+yarn add @emotion/primitives
+```
+
+This package also depends on `react`, `react-primitives` and `prop-types` so make sure you've them installed.
+
+## Example
+
+```js
+import React from 'react'
+import styled, { css } from '@emotion/primitives'
+
+import { ThemeProvider } from 'emotion-theming'
+
+const theme = {
+  color: 'hotpink',
+  backgroundColor: 'purple'
+}
+
+const Container = styled.View`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 50px;
+  border: 5px solid red;
+  background-color: ${props => props.theme.backgroundColor};
+`
+
+const Description = styled.Text({
+  color: 'hotpink'
+})
+
+const Image = styled.Image`
+  padding: 40px;
+`
+
+const emotionLogo =
+  'https://cdn.rawgit.com/emotion-js/emotion/master/emotion.png'
+
+class App extends React.Component {
+  render() {
+    return (
+      <ThemeProvider theme={theme}>
+        <Container
+          style={css`
+            border-radius: 10px;
+          `}
+        >
+          <Description style={{ fontSize: 45, fontWeight: 'bold' }}>
+            Emotion Primitives
+          </Description>
+          <Image
+            source={{
+              uri: emotionLogo,
+              height: 150,
+              width: 150
+            }}
+          />
+        </Container>
+      </ThemeProvider>
+    )
+  }
+}
+```
+
+[![Edit n3nmq8v46j](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/n3nmq8v46j)
+
+## Supported primitives
+
+* **Text**
+
+* **View**
+
+* **Image**
+
+## Usage with `react-sketchapp`
+
+### Installing dependencies
+
+* [`react-sketchapp`](https://github.com/airbnb/react-sketchapp)
+
+```
+yarn add react-sketchapp
+```
+
+* `skpm` for building and publishing sketch plugins. This is required to render the components and build them to Sketch environment.
+
+```
+yarn add @skpm/builder --dev
+```
+
+### Configuring `skpm` builder
+
+Once you've installed `skpm`,
+
+* create a new field `skpm` in `package.json`
+
+```json
+ "skpm": {
+   "main": "some-name.sketchplugin",
+   "manifest": "manifest.json"
+},
+```
+
+* Create `manifest.json` file with following content -
+
+```json
+{
+  "compatibleVersion": 3,
+  "bundleVersion": 1,
+  "commands": [
+    {
+      "name": "react-sketchapp: some-name",
+      "identifier": "main",
+      "script": "./your-app-file.js"
+    }
+  ],
+  "menu": {
+    "isRoot": true,
+    "items": ["main"]
+  }
+}
+```
+
+* add this to your `scripts` section of your `package.json`
+
+```json
+scripts: {
+  "render": "skpm-build --watch --run",
+}
+```
+
+and finally run `yarn render` to render the components to Sketch.
+
+For a complete reference, checkout [this](https://github.com/airbnb/react-sketchapp/blob/master/examples/emotion/src) project setup.