Merge pull request #227 from conveyal/dev

v4.0.0

Author: trevorgerhardt

.travis.yml

@@ -6,7 +6,7 @@ cache:
 notifications:
   email: false
 node_js:
-  - '6'
+  - '8'
 before_install:
   - npm i -g codecov yarn
 install:

README.md

@@ -9,6 +9,7 @@
 
 ## Table of Contents
 
+* [Node](#node)
 * [Install](#install)
 * [Configuration](#configuration)
 * [CLI Usage](#cli-usage)
@@ -22,9 +23,13 @@
   * [Test](#test)
   * [Lint Messages](#lint-messages)
 
+## Node
+
+We pin mastarm to a specific version of node due to inconsistencies across installation and building when using multiple versions. *Node 8 is now required to run mastarm*. 
+
 ## Install
 
-With [node v6 and npm 3 installed](https://nodejs.org/en/download/current/):
+With [node v8 and npm 5 installed](https://nodejs.org/en/download/current/):
 
 ```shell
 $ npm install -g mastarm

__tests__/bin/mastarm.js

@@ -38,7 +38,7 @@ describe('mastarm cli', () => {
 
     it('should build a project', done => {
       exec(
-        `node ${mastarm} build ${mockDir}/index.js:${buildDir}/index.js ${mockDir}/index.css:${buildDir}/index.css`,
+        `node ${mastarm}-build ${mockDir}/index.js:${buildDir}/index.js ${mockDir}/index.css:${buildDir}/index.css`,
         (err, stdout, stderr) => {
           expect(err).toBeNull()
           expect(stdout).toContain('done building')
@@ -60,7 +60,7 @@ describe('mastarm cli', () => {
 
     it('should prepublish a project', done => {
       exec(
-        `node ${mastarm} prepublish ${mockDir}:${buildDir}`,
+        `node ${mastarm}-prepublish ${mockDir}:${buildDir}`,
         (err, stdout, stderr) => {
           expect(err).toBeNull()
           expect(stdout).toBe('')

__tests__/lib/__snapshots__/build.js.snap

@@ -6,6 +6,13 @@ const util = require('../test-utils/util.js')
 
 const originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL
 
+const UNMINIFIED_JS = 450000
+const MINIFIED_JS = 400000
+const MINIFIED_PROD_JS = 250000
+
+const UNMINIFIED_CSS = 450000
+const MINIFIED_CSS = 400000
+
 describe('build', () => {
   const mockDir = util.mockDir
 
@@ -16,34 +23,82 @@ describe('build', () => {
     jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout
   })
 
-  describe('development', () => {
-    it('should transform js', async () => {
+  describe('js', () => {
+    it('should transform', async () => {
       const [result] = await build({
         config: loadConfig(process.cwd(), null, 'development'),
+        env: 'development',
         files: [[`${mockDir}/index.js`]]
       })
 
       const transpiledString = result.toString()
       expect(transpiledString.indexOf('MockTestComponentUniqueName')).not.toBe(
         -1
       )
-      expect(transpiledString.length).toMatchSnapshot()
+      expect(transpiledString.length).toBeGreaterThan(UNMINIFIED_JS)
     })
 
-    it('should transform css', async () => {
+    it('should transform and minify', async () => {
+      const [result] = await build({
+        config: loadConfig(process.cwd(), null, 'development'),
+        env: 'development',
+        files: [[`${mockDir}/index.js`]],
+        minify: true
+      })
+
+      const transpiledString = result.toString()
+      expect(transpiledString.indexOf('MockTestComponentUniqueName')).not.toBe(
+        -1
+      )
+      expect(transpiledString.length).toBeGreaterThan(MINIFIED_JS)
+      expect(transpiledString.length).toBeLessThan(UNMINIFIED_JS)
+    })
+
+    it('should transform, minify, and use production settings', async () => {
+      const [result] = await build({
+        config: loadConfig(process.cwd(), null, 'production'),
+        env: 'production',
+        files: [[`${mockDir}/index.js`]],
+        minify: true
+      })
+
+      const transpiledString = result.toString()
+      expect(transpiledString.indexOf('MockTestComponentUniqueName')).not.toBe(
+        -1
+      )
+      expect(transpiledString.length).toBeGreaterThan(MINIFIED_PROD_JS)
+      expect(transpiledString.length).toBeLessThan(MINIFIED_JS)
+    })
+  })
+
+  describe('css', () => {
+    it('should transform', async () => {
       const [result] = await build({
         config: loadConfig(process.cwd(), null, 'development'),
         files: [[`${mockDir}/index.css`]]
       })
 
       const css = result.css
       expect(css.indexOf('criticalClass')).toBeGreaterThan(-1)
-      expect(css.length).toMatchSnapshot()
+      expect(css.length).toBeGreaterThan(UNMINIFIED_CSS)
+    })
+
+    it('should transform and minify', async () => {
+      const [result] = await build({
+        config: loadConfig(process.cwd(), null, 'development'),
+        files: [[`${mockDir}/index.css`]],
+        minify: true
+      })
+
+      const css = result.css
+      expect(css.indexOf('criticalClass')).toBeGreaterThan(-1)
+      expect(css.length).toBeGreaterThan(MINIFIED_CSS)
+      expect(css.length).toBeLessThan(UNMINIFIED_CSS)
     })
   })
 
   describe('production', () => {
-    it('should transform and minify js and css', async () => {
+    it('should transform and minify js and css at the same time', async () => {
       const [jsResult, cssResult] = await build({
         config: loadConfig(process.cwd(), null, 'production'),
         env: 'production',
@@ -55,8 +110,6 @@ describe('build', () => {
         -1
       )
       expect(cssResult.css.indexOf('criticalClass')).not.toBe(-1)
-      expect(transpiledString.length).toMatchSnapshot()
-      expect(cssResult.css.length).toMatchSnapshot()
     })
   })
 })

__tests__/lib/build.js

@@ -1,3 +1,5 @@
+@import url(node_modules/bootstrap/dist/css/bootstrap.css);
+
 .criticalClass {
   font-weight: bold !important;
 }

__tests__/test-utils/mocks/index.css

@@ -1,7 +1,8 @@
+import React, {Component} from 'react'
 import uuid from 'uuid'
 import png from '../../../mastarm.png'
 
-export default class MockTestComponentUniqueName {
+export default class MockTestComponentUniqueName extends Component {
   static defaultProps = {
     test: 'hi'
   }

__tests__/test-utils/mocks/index.js

@@ -14,7 +14,7 @@ module.exports = function ({config, env, files, minify, watch}) {
     files.map(
       ([entry, outfile]) =>
         (path.extname(entry) === '.css'
-          ? buildCss({config, entry, outfile, watch})
+          ? buildCss({config, entry, minify, outfile, watch})
           : buildJs({config, entry, env, minify, outfile, watch}))
     )
   )

lib/build.js

@@ -1,3 +1,4 @@
+const cssnano = require('cssnano')
 const chokidar = require('chokidar')
 const fs = require('fs')
 const mimeType = require('mime')
@@ -11,27 +12,36 @@ const postcssSafeParser = require('postcss-safe-parser')
 
 const logger = require('./logger')
 
-module.exports = function ({config, entry, outfile, watch}) {
+module.exports = function ({config, entry, minify, outfile, watch}) {
   const configImport = config.stylePath
     ? `@import url(${config.stylePath});`
     : ''
   let watcher
-  const transform = () =>
-    postcss([
-      postcssImport({
-        plugins: [
-          base64ify(process.cwd()) // inline all url files
-        ],
-        onImport: sources => {
-          if (watch) {
-            sources.forEach(source => watcher.add(source))
-          }
+  const plugins = [
+    postcssImport({
+      plugins: [
+        base64ify(process.cwd()) // inline all url files
+      ],
+      onImport: sources => {
+        if (watch) {
+          sources.forEach(source => watcher.add(source))
         }
-      }),
-      base64ify(process.cwd()),
-      postcssNext(),
-      postcssReporter({clearMessages: true})
-    ])
+      }
+    }),
+    base64ify(process.cwd()),
+    postcssNext({
+      warnForDuplicates: false
+    })
+  ]
+
+  if (minify) {
+    plugins.push(cssnano({preset: 'default'}))
+  }
+
+  plugins.push(postcssReporter({clearMessages: true}))
+
+  const transform = () =>
+    postcss(plugins)
       .process(`${configImport}${fs.readFileSync(entry, 'utf8')}`, {
         parser: postcssSafeParser,
         map: {inline: false},
@@ -83,7 +93,7 @@ const base64ify = postcss.plugin('postcss-base64ify', function () {
       const buffer = fs.readFileSync(file)
       return (
         'url("data:' +
-        mimeType.lookup(filename) +
+        mimeType.getType(filename) +
         ';base64,' +
         buffer.toString('base64') +
         '")'

lib/css-transform.js

@@ -8,6 +8,10 @@ module.exports = function load (cwd, config, environment) {
   const env = loadYaml('env')
   const settings = loadYaml('settings')
 
+  if (environment === 'production') {
+    process.env.NODE_ENV = 'production'
+  }
+
   return {
     env: overrideWithEnvironment(env, environment),
     environment,

lib/load-config.js

@@ -15,7 +15,7 @@ function upload ({body, s3bucket, cloudfront, outfile}) {
         ACL: 'public-read',
         Body: body,
         Bucket: s3bucket,
-        ContentType: mime.lookup(outfile),
+        ContentType: mime.getType(outfile),
         Key: outfile
       }
     })