Add ESLint and Prettier formatting and run initial formatting

.eslintignore

@@ -0,0 +1,3 @@
+/lib
+/docs
+defaultConfig.js

.eslintrc

@@ -0,0 +1,26 @@
+{
+  "env": {
+    "jest": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "extends": ["eslint-config-postcss", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "semi": false,
+        "singleQuote": true,
+        "printWidth": 100,
+        "tabWidth": 2,
+        "useTabs": false,
+        "trailingComma": "es5",
+        "bracketSpacing": true,
+        "parser": "flow"
+      }
+    ]
+  }
+}

__tests__/applyAtRule.test.js

@@ -2,20 +2,20 @@ import postcss from 'postcss'
 import plugin from '../src/lib/substituteClassApplyAtRules'
 
 function run(input, opts = () => {}) {
-    return postcss([plugin(opts)]).process(input)
+  return postcss([plugin(opts)]).process(input)
 }
 
 test("it copies a class's declarations into itself", () => {
-    const output = '.a { color: red; } .b { color: red; }'
+  const output = '.a { color: red; } .b { color: red; }'
 
-    return run('.a { color: red; } .b { @apply .a; }').then(result => {
-        expect(result.css).toEqual(output)
-        expect(result.warnings().length).toBe(0)
-    })
+  return run('.a { color: red; } .b { @apply .a; }').then(result => {
+    expect(result.css).toEqual(output)
+    expect(result.warnings().length).toBe(0)
+  })
 })
 
 test("it doesn't copy a media query definition into itself", () => {
-    const output = `.a {
+  const output = `.a {
             color: red;
         }
 
@@ -27,8 +27,8 @@ test("it doesn't copy a media query definition into itself", () => {
             color: red;
         }`
 
-    return run(
-        `.a {
+  return run(
+    `.a {
             color: red;
         }
 
@@ -38,15 +38,15 @@ test("it doesn't copy a media query definition into itself", () => {
 
         .b {
             @apply .a;
-        }`)
-    .then(result => {
-        expect(result.css).toEqual(output)
-        expect(result.warnings().length).toBe(0)
-    })
+        }`
+  ).then(result => {
+    expect(result.css).toEqual(output)
+    expect(result.warnings().length).toBe(0)
+  })
 })
 
 test('it fails if the class does not exist', () => {
-    run('.b { @apply .a; }').catch(error => {
-        expect(error.reason).toEqual('No .a class found.')
-    })
+  run('.b { @apply .a; }').catch(error => {
+    expect(error.reason).toEqual('No .a class found.')
+  })
 })

__tests__/configFunction.test.js

@@ -5,7 +5,7 @@ function run(input, opts = {}) {
   return postcss([plugin(() => opts)]).process(input)
 }
 
-test("it looks up values in the config using dot notation", () => {
+test('it looks up values in the config using dot notation', () => {
   const input = `
     .banana { color: config('colors.yellow'); }
   `
@@ -17,14 +17,14 @@ test("it looks up values in the config using dot notation", () => {
   return run(input, {
     colors: {
       yellow: '#f7cc50',
-    }
+    },
   }).then(result => {
     expect(result.css).toEqual(output)
     expect(result.warnings().length).toBe(0)
   })
 })
 
-test("quotes are optional around the lookup path", () => {
+test('quotes are optional around the lookup path', () => {
   const input = `
     .banana { color: config(colors.yellow); }
   `
@@ -36,14 +36,14 @@ test("quotes are optional around the lookup path", () => {
   return run(input, {
     colors: {
       yellow: '#f7cc50',
-    }
+    },
   }).then(result => {
     expect(result.css).toEqual(output)
     expect(result.warnings().length).toBe(0)
   })
 })
 
-test("a default value can be provided", () => {
+test('a default value can be provided', () => {
   const input = `
     .cookieMonster { color: config('colors.blue', #0000ff); }
   `
@@ -55,14 +55,14 @@ test("a default value can be provided", () => {
   return run(input, {
     colors: {
       yellow: '#f7cc50',
-    }
+    },
   }).then(result => {
     expect(result.css).toEqual(output)
     expect(result.warnings().length).toBe(0)
   })
 })
 
-test("quotes are preserved around default values", () => {
+test('quotes are preserved around default values', () => {
   const input = `
     .heading { font-family: config('fonts.sans', "Helvetica Neue"); }
   `
@@ -73,8 +73,8 @@ test("quotes are preserved around default values", () => {
 
   return run(input, {
     fonts: {
-      serif: "Constantia",
-    }
+      serif: 'Constantia',
+    },
   }).then(result => {
     expect(result.css).toEqual(output)
     expect(result.warnings().length).toBe(0)

__tests__/defineClass.test.js

@@ -1,28 +1,27 @@
-import postcss from 'postcss'
-import fs from 'fs'
-import _ from 'lodash'
 import c from '../src/util/collapseWhitespace'
 import defineClass from '../src/util/defineClass'
 
 /**
  * Tests
  */
 it('creates a proper single-word class with rules', () => {
-  let output = defineClass('flex', {display: 'flex'})
+  let output = defineClass('flex', { display: 'flex' })
   expect(c(output.toString())).toEqual(`.flex { display: flex }`)
 })
 
 it('does not modify the case of selector names', () => {
-  let output = defineClass('inlineBlock', {display: 'inline-block'})
+  let output = defineClass('inlineBlock', { display: 'inline-block' })
   expect(c(output.toString())).toEqual(`.inlineBlock { display: inline-block }`)
 })
 
 it('does not modify the case of property names', () => {
-  let output = defineClass('smooth', {'-webkit-font-smoothing': 'antialiased'})
+  let output = defineClass('smooth', {
+    '-webkit-font-smoothing': 'antialiased',
+  })
   expect(c(output.toString())).toEqual(`.smooth { -webkit-font-smoothing: antialiased }`)
 })
 
 it('escapes non-standard characters in selectors', () => {
-  let output = defineClass('w-1/4', {'width': '25%'})
+  let output = defineClass('w-1/4', { width: '25%' })
   expect(c(output.toString())).toEqual(`.w-1\\/4 { width: 25% }`)
 })

__tests__/defineClasses.test.js

@@ -1,6 +1,3 @@
-import postcss from 'postcss'
-import fs from 'fs'
-import _ from 'lodash'
 import c from '../src/util/collapseWhitespace'
 import defineClasses from '../src/util/defineClasses'
 
@@ -9,7 +6,7 @@ import defineClasses from '../src/util/defineClasses'
  */
 it('it generates a set of helper classes from a config', () => {
   let output = defineClasses({
-    'flex': {
+    flex: {
       display: 'flex',
     },
     'inline-flex': {

__tests__/focusableAtRule.test.js

@@ -5,7 +5,7 @@ function run(input, opts = () => {}) {
   return postcss([plugin(opts)]).process(input)
 }
 
-test("it adds a focusable variant to each nested class definition", () => {
+test('it adds a focusable variant to each nested class definition', () => {
   const input = `
     @focusable {
       .banana { color: yellow; }

__tests__/hoverableAtRule.test.js

@@ -5,7 +5,7 @@ function run(input, opts = () => {}) {
   return postcss([plugin(opts)]).process(input)
 }
 
-test("it adds a hoverable variant to each nested class definition", () => {
+test('it adds a hoverable variant to each nested class definition', () => {
   const input = `
     @hoverable {
       .banana { color: yellow; }

__tests__/sanity.test.js

@@ -12,7 +12,10 @@ it('generates the right CSS', () => {
   return postcss([tailwind()])
     .process(input)
     .then(result => {
-      const expected = fs.readFileSync(path.resolve(`${__dirname}/fixtures/tailwind-output.css`), 'utf8')
+      const expected = fs.readFileSync(
+        path.resolve(`${__dirname}/fixtures/tailwind-output.css`),
+        'utf8'
+      )
 
       expect(result.css).toBe(expected)
     })

package.json

@@ -20,7 +20,8 @@
     "babelify": "babel src --out-dir lib",
     "prepare": "npm run babelify && babel-node src/build.js",
     "watch": "nodemon -e js,css --watch src --exec 'babel-node src/build.js'",
-    "test": "jest"
+    "style": "eslint .",
+    "test": "jest && eslint ."
   },
   "devDependencies": {
     "autoprefixer": "^7.1.6",
@@ -32,7 +33,12 @@
     "babel-preset-stage-2": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
     "clean-css": "^4.1.9",
+    "eslint": "^4.10.0",
+    "eslint-config-postcss": "^2.0.2",
+    "eslint-config-prettier": "^2.7.0",
+    "eslint-plugin-prettier": "^2.3.1",
     "jest": "^20.0.4",
+    "prettier": "^1.7.4",
     "rimraf": "^2.6.1"
   },
   "dependencies": {
@@ -44,9 +50,7 @@
     "postcss-functions": "^3.0.0",
     "stylefmt": "^6.0.0"
   },
-  "browserslist": [
-    "> 1%"
-  ],
+  "browserslist": ["> 1%"],
   "babel": {
     "presets": [
       [

src/build.js

@@ -8,10 +8,9 @@ function buildDistFile(filename) {
     console.log(`Processing ./css/${filename}.css...`)
 
     fs.readFile(`./css/${filename}.css`, (err, css) => {
-      return postcss([
-          tailwind(),
-          require('autoprefixer'),
-        ])
+      if (err) throw err
+
+      return postcss([tailwind(), require('autoprefixer')])
         .process(css, {
           from: `./css/${filename}.css`,
           to: `./dist/${filename}.css`,
@@ -46,4 +45,3 @@ Promise.all([
 ]).then(() => {
   console.log('Finished Building Tailwind!')
 })
-