Merge branch 'master' into feature/react-intl

.travis.yml

@@ -1,5 +1,6 @@
 language: node_js
 node_js:
+  - '6'
   - '5'
 env:
   - CXX=g++-4.8

package.json

@@ -1,107 +1,117 @@
 {
   "private": true,
   "engines": {
-    "node": ">=5.0 <6",
+    "node": ">=5.0 <7",
     "npm": ">=3.3 <4"
   },
   "dependencies": {
-    "babel-polyfill": "6.7.4",
-    "babel-runtime": "6.6.1",
-    "bluebird": "3.3.5",
-    "body-parser": "1.15.0",
-    "classnames": "2.2.3",
+    "babel-polyfill": "6.9.0",
+    "babel-runtime": "6.9.0",
+    "bluebird": "3.4.0",
+    "body-parser": "1.15.1",
+    "classnames": "2.2.5",
     "cookie-parser": "1.4.1",
-    "core-js": "2.2.2",
+    "core-js": "2.4.0",
     "eventemitter3": "1.2.0",
     "express": "4.13.4",
     "express-graphql": "0.5.1",
-    "express-jwt": "3.3.0",
+    "express-jwt": "3.4.0",
     "express-request-language": "^1.1.4",
     "fastclick": "1.0.6",
-    "fbjs": "0.8.0",
+    "fbjs": "0.8.2",
     "front-matter": "2.0.7",
-    "graphiql": "0.7.0",
-    "graphql": "0.5.0",
-    "history": "2.1.0",
+    "graphiql": "0.7.1",
+    "graphql": "0.6.0",
+    "history": "2.1.1",
     "intl": "^1.1.0",
     "intl-locales-supported": "^1.0.0",
     "isomorphic-style-loader": "1.0.0",
     "jade": "1.11.0",
-    "jsonwebtoken": "5.7.0",
-    "markdown-it": "6.0.1",
-    "node-fetch": "1.5.1",
+    "jsonwebtoken": "6.2.0",
+    "markdown-it": "6.0.2",
+    "node-fetch": "1.5.2",
     "normalize.css": "4.1.1",
     "passport": "0.3.2",
-    "passport-facebook": "2.1.0",
+    "passport-facebook": "2.1.1",
     "pretty-error": "2.0.0",
-    "react": "15.0.1",
-    "react-dom": "15.0.1",
+    "react": "15.0.2",
+    "react-dom": "15.0.2",
     "react-intl": "^2.1.0",
     "react-redux": "^4.4.5",
     "redux": "^3.4.0",
     "redux-thunk": "^2.0.1",
-    "sequelize": "^3.21.0",
+    "sequelize": "3.23.2",
     "source-map-support": "0.4.0",
-    "sqlite3": "^3.1.3",
-    "universal-router": "1.1.0-beta.3",
-    "whatwg-fetch": "0.11.0"
+    "sqlite3": "3.1.4",
+    "universal-router": "1.2.1",
+    "whatwg-fetch": "1.0.0"
   },
   "devDependencies": {
     "assets-webpack-plugin": "^3.4.0",
     "autoprefixer": "^6.3.6",
-    "babel-cli": "^6.7.5",
-    "babel-core": "^6.7.6",
-    "babel-eslint": "^6.0.2",
+    "babel-cli": "^6.9.0",
+    "babel-core": "^6.9.0",
+    "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.4",
     "babel-plugin-react-intl": "^2.1.2",
     "babel-plugin-react-transform": "^2.0.2",
-    "babel-plugin-rewire": "^1.0.0-rc-2",
-    "babel-plugin-transform-react-constant-elements": "^6.5.0",
-    "babel-plugin-transform-react-inline-elements": "^6.6.5",
-    "babel-plugin-transform-react-remove-prop-types": "^0.2.5",
-    "babel-plugin-transform-runtime": "^6.7.5",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-node5": "^11.0.1",
+    "babel-plugin-rewire": "^1.0.0-rc-3",
+    "babel-plugin-transform-react-constant-elements": "^6.8.0",
+    "babel-plugin-transform-react-inline-elements": "^6.8.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.2.6",
+    "babel-plugin-transform-runtime": "^6.9.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-node5": "^11.1.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.7.2",
-    "babel-template": "^6.7.0",
-    "babel-types": "^6.7.2",
-    "browser-sync": "^2.12.3",
+    "babel-register": "^6.9.0",
+    "babel-template": "^6.9.0",
+    "babel-types": "^6.9.0",
+    "browser-sync": "^2.12.8",
     "chai": "^3.5.0",
     "css-loader": "^0.23.1",
     "del": "^2.2.0",
-    "enzyme": "^2.2.0",
-    "eslint": "^2.8.0",
-    "eslint-config-airbnb": "^7.0.0",
+    "enzyme": "^2.3.0",
+    "eslint": "^2.10.2",
+    "eslint-config-airbnb": "^9.0.1",
     "eslint-loader": "^1.3.0",
-    "eslint-plugin-jsx-a11y": "^0.6.2",
-    "eslint-plugin-react": "^4.3.0",
+    "eslint-plugin-import": "^1.8.0",
+    "eslint-plugin-jsx-a11y": "^1.2.0",
+    "eslint-plugin-react": "^5.1.1",
     "extend": "^3.0.0",
     "file-loader": "^0.8.5",
     "gaze": "^1.0.0",
     "git-repository": "^0.1.4",
     "glob": "^7.0.3",
     "jade-loader": "^0.8.0",
-    "jscs": "^2.11.0",
     "json-loader": "^0.5.4",
     "mkdirp": "^0.5.1",
     "mocha": "^2.4.5",
     "ncp": "^2.0.0",
-    "postcss": "^5.0.19",
-    "postcss-import": "^8.1.0",
-    "postcss-loader": "^0.8.2",
-    "postcss-scss": "^0.1.7",
-    "precss": "^1.4.0",
+    "pixrem": "^3.0.0",
+    "pleeease-filters": "^3.0.0",
+    "postcss": "^5.0.21",
+    "postcss-calc": "^5.2.1",
+    "postcss-color-function": "^2.0.1",
+    "postcss-custom-media": "^5.0.1",
+    "postcss-custom-properties": "^5.0.1",
+    "postcss-custom-selectors": "^3.0.0",
+    "postcss-import": "^8.1.2",
+    "postcss-loader": "^0.9.1",
+    "postcss-media-minmax": "^2.1.2",
+    "postcss-nesting": "^2.3.1",
+    "postcss-pseudoelements": "^3.0.0",
+    "postcss-selector-matches": "^2.0.1",
+    "postcss-selector-not": "^2.0.0",
     "raw-loader": "^0.5.1",
-    "react-addons-test-utils": "^15.0.1",
+    "react-addons-test-utils": "^15.0.2",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
-    "redbox-react": "^1.2.3",
+    "redbox-react": "^1.2.4",
     "redux-logger": "^2.6.1",
     "sinon": "^2.0.0-pre",
-    "stylelint": "^5.4.0",
-    "stylelint-config-standard": "^5.0.0",
+    "stylelint": "^6.4.1",
+    "stylelint-config-standard": "^7.0.0",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.0",
     "webpack-hot-middleware": "^2.10.0",
@@ -139,14 +149,6 @@
       ]
     }
   },
-  "jscsConfig": {
-    "preset": "airbnb",
-    "excludeFiles": [
-      "build/**",
-      "node_modules/**"
-    ],
-    "disallowSpacesInsideTemplateStringPlaceholders": null
-  },
   "stylelint": {
     "extends": "stylelint-config-standard",
     "rules": {
@@ -155,17 +157,17 @@
   },
   "scripts": {
     "eslint": "eslint src tools",
-    "jscs": "jscs src tools --verbose",
-    "stylelint": "stylelint \"src/**/*.scss\" --syntax scss",
-    "lint": "npm run eslint && npm run jscs && npm run stylelint",
-    "test": "mocha src/**/*.test.js --require test/setup.js --compilers js:babel-register",
-    "test:watch": "mocha src/**/*.test.js --require test/setup.js --compilers js:babel-register --reporter min --watch",
+    "stylelint": "stylelint \"src/**/*.css\"",
+    "lint": "npm run eslint && npm run stylelint",
+    "test": "mocha \"src/**/*.test.js\" --require test/setup.js --compilers js:babel-register",
+    "test:watch": "npm run test -- --reporter min --watch",
     "clean": "babel-node tools/run clean",
     "copy": "babel-node tools/run copy",
     "extractMessages": "babel-node tools/run extractMessages",
     "bundle": "babel-node tools/run bundle",
     "build": "babel-node tools/run build",
     "deploy": "babel-node tools/run deploy",
+    "render": "babel-node tools/run render",
     "start": "babel-node tools/run start"
   }
 }

src/client.js

@@ -27,7 +27,7 @@ import cs from 'react-intl/locale-data/cs';
 
 const context = {
   store: null,
-  insertCss: styles => styles._insertCss(),
+  insertCss: styles => styles._insertCss(), // eslint-disable-line no-underscore-dangle
   setTitle: value => (document.title = value),
   setMeta: (name, content) => {
     // Remove and create a new <meta /> tag in order to make it work

src/components/App/App.scss → src/components/App/App.css

@@ -11,7 +11,7 @@
 
 /*! React Starter Kit | MIT License | https://www.reactstarterkit.com/ */
 
-@import '../variables.scss';
+@import '../variables.css';
 
 /*
  * Base styles
@@ -21,7 +21,7 @@ html {
   color: #222;
   font-weight: 100;
   font-size: 1em; /* ~16px; */
-  font-family: $font-family-base;
+  font-family: var(--font-family-base);
   line-height: 1.375; /* ~22px */
 }
 

src/components/App/App.js

@@ -9,7 +9,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import emptyFunction from 'fbjs/lib/emptyFunction';
-import s from './App.scss';
+import s from './App.css';
 import Header from '../Header';
 import Feedback from '../Feedback';
 import Footer from '../Footer';

src/components/Feedback/Feedback.scss → src/components/Feedback/Feedback.css

@@ -7,7 +7,7 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-@import '../variables.scss';
+@import '../variables.css';
 
 .root {
   background: #f5f5f5;
@@ -17,7 +17,7 @@
 .container {
   margin: 0 auto;
   padding: 20px 8px;
-  max-width: $max-content-width;
+  max-width: var(--max-content-width);
   text-align: center;
   font-size: 1.5em; /* ~24px */
 }

src/components/Feedback/Feedback.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Feedback.scss';
+import s from './Feedback.css';
 
 function Feedback() {
   return (

src/components/Footer/Footer.scss → src/components/Footer/Footer.css

@@ -7,7 +7,7 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-@import '../variables.scss';
+@import '../variables.css';
 
 .root {
   background: #333;
@@ -17,7 +17,7 @@
 .container {
   margin: 0 auto;
   padding: 20px 15px;
-  max-width: $max-content-width;
+  max-width: var(--max-content-width);
   text-align: center;
 }
 

src/components/Footer/Footer.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Footer.scss';
+import s from './Footer.css';
 import Link from '../Link';
 
 function Footer() {

src/components/Header/Header.scss → src/components/Header/Header.css

@@ -7,9 +7,11 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-@import '../variables.scss';
+@import '../variables.css';
 
-$brand-color: #61dafb;
+:root {
+  --brand-color: #61dafb;
+}
 
 .root {
   background: #373277;
@@ -19,11 +21,11 @@ $brand-color: #61dafb;
 .container {
   margin: 0 auto;
   padding: 20px 0;
-  max-width: $max-content-width;
+  max-width: var(--max-content-width);
 }
 
 .brand {
-  color: color($brand-color lightness(+10%));
+  color: color(var(--brand-color) lightness(+10%));
   text-decoration: none;
   font-size: 1.75em; /* ~28px */
 }

src/components/Header/Header.js

@@ -10,10 +10,11 @@
 import React from 'react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Header.scss';
+import s from './Header.css';
 import Link from '../Link';
 import Navigation from '../Navigation';
 import LanguageSwitcher from '../LanguageSwitcher';
+import logoUrl from './logo-small.png';
 
 const messages = defineMessages({
   brand: {
@@ -39,7 +40,7 @@ function Header() {
       <div className={s.container}>
         <Navigation className={s.nav} />
         <Link className={s.brand} to="/">
-          <img src={require('./logo-small.png')} width="38" height="38" alt="React" />
+          <img src={logoUrl} width="38" height="38" alt="React" />
           <span className={s.brandTxt}>
             <FormattedMessage {...messages.brand} />
           </span>

src/components/Navigation/Navigation.js

@@ -11,7 +11,7 @@ import React, { PropTypes } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import cx from 'classnames';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from './Navigation.scss';
+import s from './Navigation.css';
 import Link from '../Link';
 
 const messages = defineMessages({

src/components/variables.css

@@ -0,0 +1,31 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+:root {
+  /*
+   * Typography
+   * ======================================================================== */
+
+  --font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
+
+  /*
+   * Layout
+   * ======================================================================== */
+
+  --max-content-width: 1000px;
+
+  /*
+   * Media queries breakpoints
+   * ======================================================================== */
+
+  --screen-xs-min: 480px;  /* Extra small screen / phone */
+  --screen-sm-min: 768px;  /* Small screen / tablet */
+  --screen-md-min: 992px;  /* Medium screen / desktop */
+  --screen-lg-min: 1200px; /* Large screen / wide desktop */
+}