Skip to content

Commit

Permalink
Convert new stuff to use ES6 modules
Browse files Browse the repository at this point in the history
  • Loading branch information
David Hemphill authored and adamwathan committed Aug 27, 2017
1 parent c57b43a commit 2ef0183
Show file tree
Hide file tree
Showing 22 changed files with 266 additions and 189 deletions.
9 changes: 9 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
/node_modules
yarn.lock
lib
22 changes: 0 additions & 22 deletions build.js

This file was deleted.

2 changes: 1 addition & 1 deletion dist/tailwind.css.map

Large diffs are not rendered by default.

58 changes: 51 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,68 @@
"license": "MIT",
"contributors": [
"Adam Wathan <[email protected]>",
"Jonathan Reinink <[email protected]>"
"Jonathan Reinink <[email protected]>",
"David Hemphill <[email protected]>"
],
"scripts": {
"build": "node ./build.js",
"prebabelify": "rimraf lib",
"babelify": "babel src --out-dir lib",
"prepare": "npm run babelify",
"build": "npm run prepare && node lib/build.js",
"test": "jest"
},
"dependencies": {
"devDependencies": {
"babel-cli": "^6.6.5",
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-preset-env": "^1.0.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-3": "^6.24.1",
"jest": "^20.0.4",
"rimraf": "^2.6.1",
"stylefmt": "^6.0.0"
},
"dependencies": {
"lodash": "^4.17.4",
"normalize.css": "^6.0.0",
"postcss": "^6.0.9",
"postcss-cssnext": "^3.0.2",
"postcss-prettify": "^0.3.4",
"suitcss-base": "^3.0.0"
},
"devDependencies": {
"stylefmt": "^6.0.0"
},
"browserslist": [
"> 1%"
]
],
"babel": {
"presets": [
"babel-preset-react",
[
"babel-preset-env",
{
"targets": {
"node": "7.0"
}
}
],
"babel-preset-stage-3"
],
"env": {
"browsers": {
"presets": [
"babel-preset-react",
[
"babel-preset-env",
{
"targets": {
"browsers": [
"last 5 versions"
]
}
}
],
"babel-preset-stage-3"
]
}
}
}
}
22 changes: 22 additions & 0 deletions src/build.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import fs from 'fs'
import postcss from 'postcss'
import tailwind from './tailwind'
import defaultConfig from './defaultConfig'

console.info('Building Tailwind!')

fs.readFile('./src/tailwind.css', (err, css) => {
postcss([tailwind(defaultConfig)])
.process(css, {
from: './tailwind.css',
to: './dist/tailwind.css',
map: {inline: false},
})
.then(result => {
fs.writeFileSync('./dist/tailwind.css', result.css)
if (result.map) fs.writeFileSync('./dist/tailwind.css.map', result.map)
})
.catch(error => console.log(error))
})

console.log('Finished Building Tailwind!')
88 changes: 44 additions & 44 deletions src/default-config.js → src/defaultConfig.js
Original file line number Diff line number Diff line change
@@ -1,57 +1,57 @@
module.exports = {
export default {
breakpoints: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
},
colors: {
black: '#000000',
grey900: '#212b35',
grey800: '#404e5c',
grey700: '#647382',
grey600: '#919eab',
grey500: '#c5ced6',
grey400: '#dfe3e8',
grey300: '#f0f2f5',
grey200: '#f7f9fa',
white: '#ffffff',
redDark: '#d43633',
red: '#f25451',
redLight: '#fa8785',
redLightest: '#fff1f0',
orangeDark: '#f29500',
orange: '#ffb82b',
orangeLight: '#ffd685',
black: '#000000',
grey900: '#212b35',
grey800: '#404e5c',
grey700: '#647382',
grey600: '#919eab',
grey500: '#c5ced6',
grey400: '#dfe3e8',
grey300: '#f0f2f5',
grey200: '#f7f9fa',
white: '#ffffff',
redDark: '#d43633',
red: '#f25451',
redLight: '#fa8785',
redLightest: '#fff1f0',
orangeDark: '#f29500',
orange: '#ffb82b',
orangeLight: '#ffd685',
orangeLightest: '#fff8eb',
yellowDark: '#ffc400',
yellow: '#ffe14a',
yellowLight: '#ffea83',
yellowDark: '#ffc400',
yellow: '#ffe14a',
yellowLight: '#ffea83',
yellowLightest: '#fffbe5',
greenDark: '#34ae4c',
green: '#57d06f',
greenLight: '#b1f3be',
greenLightest: '#eefff1',
tealDark: '#249e9a',
teal: '#4dc0b5',
tealLight: '#9eebe4',
tealLightest: '#eefffd',
blueDark: '#3687c8',
blue: '#4aa2ea',
blueLight: '#acdaff',
blueLightest: '#f1f9ff',
indigoDark: '#4957a5',
indigo: '#6574cd',
indigoLight: '#bcc5fb',
greenDark: '#34ae4c',
green: '#57d06f',
greenLight: '#b1f3be',
greenLightest: '#eefff1',
tealDark: '#249e9a',
teal: '#4dc0b5',
tealLight: '#9eebe4',
tealLightest: '#eefffd',
blueDark: '#3687c8',
blue: '#4aa2ea',
blueLight: '#acdaff',
blueLightest: '#f1f9ff',
indigoDark: '#4957a5',
indigo: '#6574cd',
indigoLight: '#bcc5fb',
indigoLightest: '#f4f5ff',
purpleDark: '#714cb4',
purple: '#976ae6',
purpleLight: '#ceb3ff',
purpleDark: '#714cb4',
purple: '#976ae6',
purpleLight: '#ceb3ff',
purpleLightest: '#f7f3ff',
pinkDark: '#d84f7d',
pink: '#f66d9b',
pinkLight: '#ffa5c3',
pinkLightest: '#fdf2f5',
pinkDark: '#d84f7d',
pink: '#f66d9b',
pinkLight: '#ffa5c3',
pinkLightest: '#fdf2f5',
},
backgroundColors: [
{
Expand Down Expand Up @@ -119,5 +119,5 @@ module.exports = {
3: '0 10px 20px rgba(0,0,0,0.13), 0 6px 6px rgba(0,0,0,0.13)',
4: '0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)',
5: '0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)',
}
},
}
33 changes: 19 additions & 14 deletions src/generators/backgroundColors.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
const _ = require('lodash')
const defineClass = require('../util/defineClass')
const findColor = require('../util/findColor')
import _ from 'lodash'
import defineClass from '../util/defineClass'
import findColor from '../util/findColor'

module.exports = function ({ colors, backgroundColors }) {
export default function({colors, backgroundColors}) {
if (_.isArray(backgroundColors)) {
backgroundColors = _(backgroundColors).flatMap(color => {
if (_.isString(color)) {
return [[color, color]]
}
return _.toPairs(color)
}).fromPairs()
backgroundColors = _(backgroundColors)
.flatMap(color => {
if (_.isString(color)) {
return [[color, color]]
}
return _.toPairs(color)
})
.fromPairs()
}

return _(backgroundColors).toPairs().map(([className, colorName]) => {
return defineClass(`bg-${className}`, {
backgroundColor: findColor(colors, colorName),
return _(backgroundColors)
.toPairs()
.map(([className, colorName]) => {
return defineClass(`bg-${className}`, {
backgroundColor: findColor(colors, colorName),
})
})
}).value()
.value()
}
4 changes: 2 additions & 2 deletions src/generators/backgroundSize.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const defineClasses = require('../util/defineClasses')
import defineClasses from '../util/defineClasses'

module.exports = function () {
export default function() {
return defineClasses({
bgCover: {
backgroundSize: 'cover',
Expand Down
30 changes: 15 additions & 15 deletions src/generators/borderWidths.js
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
const _ = require('lodash')
const defineClass = require('../util/defineClass')
const defineClasses = require('../util/defineClasses')
const findColor = require('../util/findColor')
import _ from 'lodash'
import defineClass from '../util/defineClass'
import defineClasses from '../util/defineClasses'
import findColor from '../util/findColor'

function defaultBorder(width, color) {
return defineClasses({
border: {
border: `${width} solid ${color}`
border: `${width} solid ${color}`,
},
borderT: {
borderTop: `${width} solid ${color}`
borderTop: `${width} solid ${color}`,
},
borderR: {
borderRight: `${width} solid ${color}`
borderRight: `${width} solid ${color}`,
},
borderB: {
borderBottom: `${width} solid ${color}`
borderBottom: `${width} solid ${color}`,
},
borderL: {
borderLeft: `${width} solid ${color}`
borderLeft: `${width} solid ${color}`,
},
})
}

function sizedBorder(size, width, color) {
return defineClasses({
[`border-${size}`]: {
border: `${width} solid ${color}`
border: `${width} solid ${color}`,
},
[`border-t-${size}`]: {
borderTop: `${width} solid ${color}`
borderTop: `${width} solid ${color}`,
},
[`border-r-${size}`]: {
borderRight: `${width} solid ${color}`
borderRight: `${width} solid ${color}`,
},
[`border-b-${size}`]: {
borderBottom: `${width} solid ${color}`
borderBottom: `${width} solid ${color}`,
},
[`border-l-${size}`]: {
borderLeft: `${width} solid ${color}`
borderLeft: `${width} solid ${color}`,
},
})
}

module.exports = function ({ colors, borders }) {
module.exports = function({colors, borders}) {
const color = findColor(colors, borders.defaults.color)

return _.flatten([
Expand Down
8 changes: 4 additions & 4 deletions src/generators/flex.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
const postcss = require('postcss')
const _ = require('lodash')
const defineClasses = require('../util/defineClasses')
import postcss from 'postcss'
import _ from 'lodash'
import defineClasses from '../util/defineClasses'

module.exports = function () {
export default function() {
return defineClasses({
flex: {
display: 'flex',
Expand Down
17 changes: 10 additions & 7 deletions src/generators/shadows.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
const _ = require('lodash')
const defineClass = require('../util/defineClass')
import _ from 'lodash'
import defineClass from '../util/defineClass'

module.exports = function ({ shadows }) {
return _(shadows).toPairs().map(([className, shadow]) => {
return defineClass(`shadow-${className}`, {
boxShadow: shadow,
export default function({shadows}) {
return _(shadows)
.toPairs()
.map(([className, shadow]) => {
return defineClass(`shadow-${className}`, {
boxShadow: shadow,
})
})
}).value()
.value()
}
Loading

0 comments on commit 2ef0183

Please sign in to comment.