Merge pull request styled-components#74 from styled-components/import-statements

Convert to ES6 import/export syntax

Author: jacobp100

.gitignore

@@ -1,2 +1,2 @@
 /node_modules
-/dist
+/index.js

package.json

@@ -2,9 +2,9 @@
   "name": "css-to-react-native",
   "version": "2.1.1",
   "description": "Convert CSS text to a React Native stylesheet object",
-  "main": "dist/index.js",
+  "main": "index.js",
   "scripts": {
-    "build": "babel src --ignore test.js --out-dir dist",
+    "build": "rollup ./src/index.js -o index.js --f cjs && babel index.js -o index.js",
     "test": "jest",
     "test:watch": "jest --watch",
     "lint": "eslint src",
@@ -13,7 +13,7 @@
     "lint-staged": "lint-staged"
   },
   "files": [
-    "dist",
+    "index.js",
     "src"
   ],
   "repository": {
@@ -43,7 +43,8 @@
     "eslint-plugin-prettier": "^2.6.0",
     "jest": "^22.2.2",
     "lint-staged": "^6.1.0",
-    "prettier": "^1.10.2"
+    "prettier": "^1.10.2",
+    "rollup": "^0.55.5"
   },
   "dependencies": {
     "css-color-keywords": "^1.0.0",

src/TokenStream.js

@@ -1,6 +1,6 @@
 const SYMBOL_MATCH = 'SYMBOL_MATCH'
 
-module.exports = class TokenStream {
+export default class TokenStream {
   constructor(nodes, parent) {
     this.index = 0
     this.nodes = nodes

src/index.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-param-reassign */
-const parse = require('postcss-value-parser')
-const camelizeStyleName = require('fbjs/lib/camelizeStyleName')
-const transforms = require('./transforms')
-const TokenStream = require('./TokenStream')
+import parse from 'postcss-value-parser'
+import camelizeStyleName from 'fbjs/lib/camelizeStyleName'
+import transforms from './transforms/index'
+import TokenStream from './TokenStream'
 
 // Note if this is wrong, you'll need to change tokenTypes.js too
 const numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?:px)?$/i

src/tokenTypes.js

@@ -1,5 +1,5 @@
-const { stringify } = require('postcss-value-parser')
-const cssColorKeywords = require('css-color-keywords')
+import { stringify } from 'postcss-value-parser'
+import cssColorKeywords from 'css-color-keywords'
 
 const matchString = node => {
   if (node.type !== 'string') return null
@@ -40,7 +40,7 @@ const noopToken = predicate => node => (predicate(node) ? '<token>' : null)
 const valueForTypeToken = type => node =>
   node.type === type ? node.value : null
 
-const regExpToken = (regExp, transform = String) => node => {
+export const regExpToken = (regExp, transform = String) => node => {
   if (node.type !== 'word') return null
 
   const match = node.value.match(regExp)
@@ -51,9 +51,7 @@ const regExpToken = (regExp, transform = String) => node => {
   return value
 }
 
-module.exports.regExpToken = regExpToken
-
-module.exports.tokens = {
+export const tokens = {
   SPACE: noopToken(node => node.type === 'space'),
   SLASH: noopToken(node => node.type === 'div' && node.value === '/'),
   COMMA: noopToken(node => node.type === 'div' && node.value === ','),

src/transforms/boxShadow.js

@@ -1,6 +1,6 @@
-const { parseShadow } = require('./util')
+import { parseShadow } from './util'
 
-module.exports = tokenStream => {
+export default tokenStream => {
   const { offset, radius, color } = parseShadow(tokenStream)
   return {
     $merge: {

src/transforms/flex.js

@@ -1,4 +1,4 @@
-const { tokens } = require('../tokenTypes')
+import { tokens } from '../tokenTypes'
 
 const { NONE, AUTO, NUMBER, LENGTH, SPACE } = tokens
 
@@ -8,7 +8,7 @@ const defaultFlexBasis = 0
 
 const FLEX_BASIS_AUTO = {} // Used for reference equality
 
-module.exports = tokenStream => {
+export default tokenStream => {
   let flexGrow
   let flexShrink
   let flexBasis

src/transforms/font.js

@@ -1,5 +1,5 @@
-const parseFontFamily = require('./fontFamily')
-const { regExpToken, tokens } = require('../tokenTypes')
+import parseFontFamily from './fontFamily'
+import { regExpToken, tokens } from '../tokenTypes'
 
 const { SPACE, LENGTH, NUMBER, SLASH } = tokens
 const NORMAL = regExpToken(/^(normal)$/)
@@ -11,7 +11,7 @@ const defaultFontStyle = 'normal'
 const defaultFontWeight = 'normal'
 const defaultFontVariant = []
 
-module.exports = tokenStream => {
+export default tokenStream => {
   let fontStyle
   let fontWeight
   let fontVariant

src/transforms/fontFamily.js

@@ -1,8 +1,8 @@
-const { tokens } = require('../tokenTypes')
+import { tokens } from '../tokenTypes'
 
 const { SPACE, IDENT, STRING } = tokens
 
-module.exports = tokenStream => {
+export default tokenStream => {
   let fontFamily
 
   if (tokenStream.matches(STRING)) {

src/transforms/index.js

@@ -1,17 +1,13 @@
-const { regExpToken, tokens } = require('../tokenTypes')
-const boxShadow = require('./boxShadow')
-const flex = require('./flex')
-const font = require('./font')
-const fontFamily = require('./fontFamily')
-const textShadow = require('./textShadow')
-const textDecoration = require('./textDecoration')
-const textDecorationLine = require('./textDecorationLine')
-const transform = require('./transform')
-const {
-  directionFactory,
-  anyOrderFactory,
-  shadowOffsetFactory,
-} = require('./util')
+import { regExpToken, tokens } from '../tokenTypes'
+import boxShadow from './boxShadow'
+import flex from './flex'
+import font from './font'
+import fontFamily from './fontFamily'
+import textShadow from './textShadow'
+import textDecoration from './textDecoration'
+import textDecorationLine from './textDecorationLine'
+import transform from './transform'
+import { directionFactory, anyOrderFactory, shadowOffsetFactory } from './util'
 
 const { IDENT, WORD, COLOR } = tokens
 
@@ -60,7 +56,7 @@ const fontWeight = tokenStream => tokenStream.expect(WORD) // Also match numbers
 const shadowOffset = shadowOffsetFactory()
 const textShadowOffset = shadowOffsetFactory()
 
-module.exports = {
+export default {
   background,
   border,
   borderColor,

src/transforms/textDecoration.js

@@ -8,7 +8,7 @@ const defaultTextDecorationLine = 'none'
 const defaultTextDecorationStyle = 'solid'
 const defaultTextDecorationColor = 'black'
 
-module.exports = tokenStream => {
+export default tokenStream => {
   let line
   let style
   let color

src/transforms/textDecorationLine.js

@@ -1,8 +1,8 @@
-const { tokens } = require('../tokenTypes')
+import { tokens } from '../tokenTypes'
 
 const { SPACE, LINE } = tokens
 
-module.exports = tokenStream => {
+export default tokenStream => {
   const lines = []
 
   let didParseFirst = false

src/transforms/textShadow.js

@@ -1,6 +1,6 @@
-const { parseShadow } = require('./util')
+import { parseShadow } from './util'
 
-module.exports = tokenStream => {
+export default tokenStream => {
   const { offset, radius, color } = parseShadow(tokenStream)
   return {
     $merge: {

src/transforms/transform.js

@@ -1,4 +1,4 @@
-const { tokens } = require('../tokenTypes')
+import { tokens } from '../tokenTypes'
 
 const { SPACE, COMMA, LENGTH, NUMBER, ANGLE } = tokens
 
@@ -54,7 +54,7 @@ const partTransforms = {
   skew: xyAngle('skew', '0deg'),
 }
 
-module.exports = tokenStream => {
+export default tokenStream => {
   let transforms = []
 
   let didParseFirst = false

src/transforms/util.js

@@ -1,8 +1,8 @@
-const { tokens } = require('../tokenTypes')
+import { tokens } from '../tokenTypes'
 
 const { LENGTH, PERCENT, COLOR, SPACE, NONE } = tokens
 
-module.exports.directionFactory = ({
+export const directionFactory = ({
   types = [LENGTH, PERCENT],
   directions = ['Top', 'Right', 'Bottom', 'Left'],
   prefix = '',
@@ -34,7 +34,7 @@ module.exports.directionFactory = ({
   return { $merge: output }
 }
 
-module.exports.anyOrderFactory = (properties, delim = SPACE) => tokenStream => {
+export const anyOrderFactory = (properties, delim = SPACE) => tokenStream => {
   const propertyNames = Object.keys(properties)
   const values = propertyNames.reduce((accum, propertyName) => {
     accum[propertyName] === undefined // eslint-disable-line
@@ -70,14 +70,14 @@ module.exports.anyOrderFactory = (properties, delim = SPACE) => tokenStream => {
   return { $merge: values }
 }
 
-module.exports.shadowOffsetFactory = () => tokenStream => {
+export const shadowOffsetFactory = () => tokenStream => {
   const width = tokenStream.expect(LENGTH)
   const height = tokenStream.matches(SPACE) ? tokenStream.expect(LENGTH) : width
   tokenStream.expectEmpty()
   return { width, height }
 }
 
-module.exports.parseShadow = tokenStream => {
+export const parseShadow = tokenStream => {
   let offsetX
   let offsetY
   let radius

yarn.lock

@@ -3809,6 +3809,10 @@ rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.1:
   dependencies:
     glob "^7.0.5"
 
+rollup@^0.55.5:
+  version "0.55.5"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.55.5.tgz#2f88c300f7cf24b5ec2dca8a6aba73b04e087e93"
+
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"