From f93964da8711527f294dbadf903bbca8c5063ebc Mon Sep 17 00:00:00 2001 From: Jacob Parker Date: Sat, 10 Feb 2018 12:10:22 +0000 Subject: [PATCH 1/2] Convert to ES6 import/export syntax --- src/TokenStream.js | 2 +- src/index.js | 8 ++++---- src/tokenTypes.js | 10 ++++------ src/transforms/boxShadow.js | 4 ++-- src/transforms/flex.js | 4 ++-- src/transforms/font.js | 6 +++--- src/transforms/fontFamily.js | 4 ++-- src/transforms/index.js | 26 +++++++++++--------------- src/transforms/textDecoration.js | 2 +- src/transforms/textDecorationLine.js | 4 ++-- src/transforms/textShadow.js | 4 ++-- src/transforms/transform.js | 4 ++-- src/transforms/util.js | 10 +++++----- 13 files changed, 41 insertions(+), 47 deletions(-) diff --git a/src/TokenStream.js b/src/TokenStream.js index 4dd8a48..721eb87 100644 --- a/src/TokenStream.js +++ b/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 diff --git a/src/index.js b/src/index.js index 5ade741..f7777aa 100644 --- a/src/index.js +++ b/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' +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 diff --git a/src/tokenTypes.js b/src/tokenTypes.js index 5865d1d..01bcebc 100644 --- a/src/tokenTypes.js +++ b/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) ? '' : 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 === ','), diff --git a/src/transforms/boxShadow.js b/src/transforms/boxShadow.js index 24bae34..f100a3f 100644 --- a/src/transforms/boxShadow.js +++ b/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: { diff --git a/src/transforms/flex.js b/src/transforms/flex.js index 44314b3..7aaad9c 100644 --- a/src/transforms/flex.js +++ b/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 diff --git a/src/transforms/font.js b/src/transforms/font.js index 2d44b23..270e762 100644 --- a/src/transforms/font.js +++ b/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 diff --git a/src/transforms/fontFamily.js b/src/transforms/fontFamily.js index f363b38..240f271 100644 --- a/src/transforms/fontFamily.js +++ b/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)) { diff --git a/src/transforms/index.js b/src/transforms/index.js index 575856e..d0b060b 100644 --- a/src/transforms/index.js +++ b/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, diff --git a/src/transforms/textDecoration.js b/src/transforms/textDecoration.js index 6e2dedf..d287d93 100644 --- a/src/transforms/textDecoration.js +++ b/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 diff --git a/src/transforms/textDecorationLine.js b/src/transforms/textDecorationLine.js index 0d326ba..1260175 100644 --- a/src/transforms/textDecorationLine.js +++ b/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 diff --git a/src/transforms/textShadow.js b/src/transforms/textShadow.js index 3a87fdd..5a1fc50 100644 --- a/src/transforms/textShadow.js +++ b/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: { diff --git a/src/transforms/transform.js b/src/transforms/transform.js index ecbb710..0d1d061 100644 --- a/src/transforms/transform.js +++ b/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 diff --git a/src/transforms/util.js b/src/transforms/util.js index 7e05e1d..67c6d39 100644 --- a/src/transforms/util.js +++ b/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 From cb673a98317c0b7393cc61606c70967e3f06d141 Mon Sep 17 00:00:00 2001 From: Jacob Parker Date: Sat, 10 Feb 2018 12:18:17 +0000 Subject: [PATCH 2/2] Bundle with rollup --- .gitignore | 2 +- package.json | 9 +++++---- src/index.js | 2 +- yarn.lock | 4 ++++ 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index 8225baa..b8df26b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,2 @@ /node_modules -/dist +/index.js diff --git a/package.json b/package.json index d861704..bdf3a29 100644 --- a/package.json +++ b/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", diff --git a/src/index.js b/src/index.js index f7777aa..2b678f6 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ /* eslint-disable no-param-reassign */ import parse from 'postcss-value-parser' import camelizeStyleName from 'fbjs/lib/camelizeStyleName' -import transforms from './transforms' +import transforms from './transforms/index' import TokenStream from './TokenStream' // Note if this is wrong, you'll need to change tokenTypes.js too diff --git a/yarn.lock b/yarn.lock index 6fbd000..a1bf3cf 100644 --- a/yarn.lock +++ b/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"