diff --git a/spikes/css/aphrodite/.flooignore b/spikes/css/aphrodite/.flooignore
new file mode 100644
index 00000000..8c380e3e
--- /dev/null
+++ b/spikes/css/aphrodite/.flooignore
@@ -0,0 +1,8 @@
+#*
+*.o
+*.pyc
+*~
+extern/
+node_modules/
+tmp
+vendor/
\ No newline at end of file
diff --git a/spikes/css/aphrodite/.gitignore b/spikes/css/aphrodite/.gitignore
new file mode 100644
index 00000000..6c96c5cf
--- /dev/null
+++ b/spikes/css/aphrodite/.gitignore
@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log
diff --git a/spikes/css/aphrodite/.storybook/config.js b/spikes/css/aphrodite/.storybook/config.js
new file mode 100644
index 00000000..73cb7ab5
--- /dev/null
+++ b/spikes/css/aphrodite/.storybook/config.js
@@ -0,0 +1,7 @@
+import { configure } from '@kadira/storybook';
+
+function loadStories() {
+ require('../src/stories');
+}
+
+configure(loadStories, module);
diff --git a/spikes/css/aphrodite/package.json b/spikes/css/aphrodite/package.json
new file mode 100644
index 00000000..e6eb7957
--- /dev/null
+++ b/spikes/css/aphrodite/package.json
@@ -0,0 +1,23 @@
+{
+ "name": "aphrodite-spike",
+ "version": "1.0.0",
+ "private": true,
+ "devDependencies": {
+ "react-scripts": "0.6.1",
+ "@kadira/storybook": "^2.21.0"
+ },
+ "dependencies": {
+ "aphrodite": "^0.6.0",
+ "color": "^0.11.3",
+ "react": "^15.3.2",
+ "react-dom": "^15.3.2"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject",
+ "storybook": "start-storybook -p 9009 -s public",
+ "build-storybook": "build-storybook -s public"
+ }
+}
diff --git a/spikes/css/aphrodite/public/index.html b/spikes/css/aphrodite/public/index.html
new file mode 100644
index 00000000..37f07da0
--- /dev/null
+++ b/spikes/css/aphrodite/public/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ Aphrodite CSS
+
+
+
+
+
diff --git a/spikes/css/aphrodite/src/App.js b/spikes/css/aphrodite/src/App.js
new file mode 100644
index 00000000..d71eabe3
--- /dev/null
+++ b/spikes/css/aphrodite/src/App.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import Button from './button';
+
+export default () => {
+ return (
+
+
Hello
+
+
+ );
+};
diff --git a/spikes/css/aphrodite/src/button.js b/spikes/css/aphrodite/src/button.js
new file mode 100644
index 00000000..e3263012
--- /dev/null
+++ b/spikes/css/aphrodite/src/button.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import { StyleSheet, css } from 'aphrodite';
+import color from 'color';
+import hoverTransition from './mixins/hover-transition';
+
+import variables from './variables.json';
+import h3 from './globals/h3'; // this is just to showcase style dependencies (not mixins)
+
+const primaryHover = hoverTransition({
+ type: 'button',
+ hover: color(variables.color.cta.primary).darken(0.2).rgbString(),
+ color: variables.color.cta.primary
+});
+
+const secondaryHover = hoverTransition({
+ type: 'button',
+ hover: color(variables.color.cta.secondary).darken(0.2).rgbString(),
+ color: variables.color.cta.secondary
+});
+
+const styles = StyleSheet.create({
+ button: {
+ display: 'block',
+ verticalAlign: 'top',
+ textTransform: 'capitalize',
+ borderRadius: 10,
+ margin: 0,
+ border: 'none',
+ ':hover': {
+ textDecoration: 'none'
+ },
+ ':disabled': {
+ color: 'black'
+ }
+ },
+ primary: {
+ ...primaryHover,
+ color: 'white'
+ },
+ secondary: {
+ ...secondaryHover,
+ color: 'black',
+ lineHeight: 25
+ }
+});
+
+const Button = (props) => {
+ const {
+ className = '',
+ children = '',
+ primary = true,
+ secondary = false
+ } = props;
+
+ const _styles = [
+ styles.button,
+ (primary || !secondary) ? styles.primary : styles.secondary,
+ h3 // this is just to showcase style dependencies (not mixins)
+ ];
+
+ return (
+
+ );
+};
+
+export default Button;
\ No newline at end of file
diff --git a/spikes/css/aphrodite/src/globals/h3.js b/spikes/css/aphrodite/src/globals/h3.js
new file mode 100644
index 00000000..a6a3b96d
--- /dev/null
+++ b/spikes/css/aphrodite/src/globals/h3.js
@@ -0,0 +1,9 @@
+import { StyleSheet } from 'aphrodite';
+
+import variables from '../variables.json';
+
+export default StyleSheet.create({
+ h3: {
+ fontSize: 13
+ }
+}).h3;
\ No newline at end of file
diff --git a/spikes/css/aphrodite/src/index.js b/spikes/css/aphrodite/src/index.js
new file mode 100644
index 00000000..0ea36197
--- /dev/null
+++ b/spikes/css/aphrodite/src/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+ ,
+ document.getElementById('root')
+);
diff --git a/spikes/css/aphrodite/src/mixins/hover-transition.js b/spikes/css/aphrodite/src/mixins/hover-transition.js
new file mode 100644
index 00000000..94bf061e
--- /dev/null
+++ b/spikes/css/aphrodite/src/mixins/hover-transition.js
@@ -0,0 +1,37 @@
+const transition = 'ease-in-out all 0.5s';
+
+const types = {
+ button: ({
+ type,
+ color,
+ hover
+ }) => {
+ return {
+ backgroundColor: color,
+ transition,
+ ':hover': {
+ backgroundColor: hover,
+ transition
+ }
+ };
+ },
+ text: ({
+ type,
+ color,
+ hover
+ }) => {
+ return {
+ color,
+ transition,
+ ':hover': {
+ color: hover,
+ transition,
+ textDecoration: 'underline'
+ }
+ };
+ }
+};
+
+export default (props) => {
+ return types[props.type](props);
+};
\ No newline at end of file
diff --git a/spikes/css/aphrodite/src/stories/index.js b/spikes/css/aphrodite/src/stories/index.js
new file mode 100644
index 00000000..4a84ae48
--- /dev/null
+++ b/spikes/css/aphrodite/src/stories/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf, action, linkTo } from '@kadira/storybook';
+import Button from '../button';
+
+storiesOf('Button', module)
+ .add('with text', () => (
+
+ ))
+ .add('with some emoji', () => (
+
+ ))
+ .add('secondary', () => (
+
+ ));
diff --git a/spikes/css/aphrodite/src/variables.json b/spikes/css/aphrodite/src/variables.json
new file mode 100644
index 00000000..800fa72a
--- /dev/null
+++ b/spikes/css/aphrodite/src/variables.json
@@ -0,0 +1,22 @@
+{
+ "font": {
+ "primary": "'freddiesflowerstitle-webfont', 'Times', serif",
+ "secondary": "'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif",
+ "tertiary": "Georgia, Times, 'Times New Roman', serif"
+ },
+ "color": {
+ "background": "#f2f2f2",
+ "primary": {
+ "main": "#ccc",
+ "dark": "#222",
+ "mid": "#959595",
+ "light": "#f4f4f4"
+ },
+ "warning": "#C93F3F",
+ "valid": "#547954",
+ "cta": {
+ "primary": "#60b4d6",
+ "secondary": "#e5eef2"
+ }
+ }
+}
diff --git a/spikes/css/css-modules/.babelrc b/spikes/css/css-modules/.babelrc
new file mode 100644
index 00000000..82cc857a
--- /dev/null
+++ b/spikes/css/css-modules/.babelrc
@@ -0,0 +1,15 @@
+{
+ "presets": [
+ "react",
+ "es2015"
+ ],
+ "plugins": [
+ ["transform-object-rest-spread", {
+ "useBuiltIns": true
+ }],
+ "add-module-exports",
+ "transform-es2015-modules-commonjs",
+ "react-hot-loader/babel"
+ ],
+ "sourceMaps": "both"
+}
diff --git a/spikes/css/css-modules/.eslintignore b/spikes/css/css-modules/.eslintignore
new file mode 100644
index 00000000..683e721c
--- /dev/null
+++ b/spikes/css/css-modules/.eslintignore
@@ -0,0 +1,3 @@
+/node_modules
+coverage
+.nyc_output
diff --git a/spikes/css/css-modules/.eslintrc b/spikes/css/css-modules/.eslintrc
new file mode 100644
index 00000000..19bd88dc
--- /dev/null
+++ b/spikes/css/css-modules/.eslintrc
@@ -0,0 +1,29 @@
+{
+ "extends": "semistandard",
+ "parser": "babel-eslint",
+ "parserOptions": {
+ "ecmaVersion": 7,
+ "ecmaFeatures": {
+ "jsx": true
+ },
+ "sourceType": "module"
+ },
+ "plugins": [
+ "babel",
+ "react"
+ ],
+ "rules": {
+ "generator-star-spacing": 0,
+ "babel/generator-star-spacing": 1,
+ "space-before-function-paren": [2, "never"],
+ "react/jsx-uses-react": 2,
+ "react/jsx-uses-vars": 2,
+ "react/react-in-jsx-scope": 2,
+ "object-curly-newline": ["error", {
+ "minProperties": 1
+ }],
+ "sort-vars": ["error", {
+ "ignoreCase": true
+ }]
+ }
+}
\ No newline at end of file
diff --git a/spikes/css/css-modules/.gitignore b/spikes/css/css-modules/.gitignore
new file mode 100644
index 00000000..c21b0ba0
--- /dev/null
+++ b/spikes/css/css-modules/.gitignore
@@ -0,0 +1,4 @@
+/node_modules
+coverage
+.nyc_output
+npm-debug.log
diff --git a/spikes/css/css-modules/.storybook/config.js b/spikes/css/css-modules/.storybook/config.js
new file mode 100644
index 00000000..d17d412a
--- /dev/null
+++ b/spikes/css/css-modules/.storybook/config.js
@@ -0,0 +1,5 @@
+const Storybook = require('@kadira/storybook');
+
+Storybook.configure(() => {
+ require('../stories');
+}, module);
diff --git a/spikes/css/css-modules/package.json b/spikes/css/css-modules/package.json
new file mode 100644
index 00000000..bf193104
--- /dev/null
+++ b/spikes/css/css-modules/package.json
@@ -0,0 +1,59 @@
+{
+ "name": "redux-thunks-spike",
+ "private": true,
+ "license": "private",
+ "main": "src/index.js",
+ "scripts": {
+ "start": "webpack-dev-server --open --config webpack.config.js",
+ "lint": "eslint .",
+ "test": "NODE_ENV=test nyc ava test/*.js --fail-fast --verbose --tap",
+ "open": "nyc report --reporter=html & open coverage/index.html",
+ "coverage": "nyc check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
+ "storybook": "start-storybook -p 6006",
+ "build-storybook": "build-storybook"
+ },
+ "dependencies": {
+ "autoprefixer": "^6.5.1",
+ "babel-eslint": "^7.0.0",
+ "babel-loader": "^6.2.5",
+ "babel-plugin-add-module-exports": "^0.2.1",
+ "babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
+ "babel-plugin-transform-object-rest-spread": "^6.16.0",
+ "babel-plugin-transform-runtime": "^6.15.0",
+ "babel-preset-es2015": "^6.16.0",
+ "babel-preset-react": "^6.16.0",
+ "babel-preset-react-hmre": "^1.1.1",
+ "babel-runtime": "^6.11.6",
+ "css-loader": "^0.25.0",
+ "postcss-loader": "^1.0.0",
+ "postcss-modules-values": "^1.2.2",
+ "postcss-nested": "^1.0.0",
+ "react": "^15.3.2",
+ "react-dom": "^15.3.2",
+ "react-hot-loader": "^3.0.0-beta.6",
+ "style-loader": "^0.13.1",
+ "webpack": "^1.13.2",
+ "webpack-dev-server": "^1.16.2"
+ },
+ "devDependencies": {
+ "@kadira/storybook": "^2.24.1",
+ "ava": "^0.16.0",
+ "babel-register": "^6.16.3",
+ "enzyme": "^2.5.1",
+ "eslint": "^3.8.1",
+ "eslint-config-semistandard": "^7.0.0",
+ "eslint-config-standard": "^6.2.0",
+ "eslint-plugin-babel": "^3.3.0",
+ "eslint-plugin-promise": "^3.3.0",
+ "eslint-plugin-react": "^6.4.1",
+ "eslint-plugin-standard": "^2.0.1",
+ "nyc": "^8.3.1",
+ "react-addons-test-utils": "^15.3.2"
+ },
+ "ava": {
+ "require": [
+ "babel-register"
+ ],
+ "babel": "inherit"
+ }
+}
diff --git a/spikes/css/css-modules/readme.md b/spikes/css/css-modules/readme.md
new file mode 100644
index 00000000..1c57af1b
--- /dev/null
+++ b/spikes/css/css-modules/readme.md
@@ -0,0 +1,15 @@
+# postcss + css-modules
+
+#### src/showcase
+
+contains all the files to showcase the components
+
+#### src/components
+
+contains all the css files and react components
+
+## usage
+
+## todo
+
+ - [ ] mixins (https://github.com/postcss/postcss-mixins)
\ No newline at end of file
diff --git a/spikes/css/css-modules/src/components/base/index.css b/spikes/css/css-modules/src/components/base/index.css
new file mode 100644
index 00000000..1eda3b18
--- /dev/null
+++ b/spikes/css/css-modules/src/components/base/index.css
@@ -0,0 +1,103 @@
+@value color_primary_dark, font_primary, font_secondary, font_tertiary from "./variables.css";
+
+.base {
+ :global {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ p,
+ li {
+ color: color_primary_dark;
+ }
+
+ h1,
+ h2,
+ h3 {
+ font-family: font_primary;
+ }
+
+ h4,
+ p,
+ li {
+ font-family: font_secondary;
+ }
+
+ a {
+ font-family: inherit;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+
+ h5,
+ p,
+ li {
+ & > a:hover {
+ text-decoration: underline;
+ }
+ }
+
+ h1 {
+ font-size: 14px;
+ line-height: 35px;
+ }
+
+ h2 {
+ font-size: 10px;
+ line-height: 25px;
+ }
+
+ h3 {
+ font-size: 6px;
+ line-height: 20px;
+ }
+
+ h4 {
+ font-size: 15px;
+ line-height: 20px;
+ letter-spacing: -0.025em;
+ }
+
+ h5 {
+ font-family: font_tertiary;
+ font-style: italic;
+ font-size: 15px;
+ line-height: 20px;
+ }
+
+ p {
+ font-size: 14px;
+ line-height: 18px;
+ letter-spacing: -0.025em;
+
+ a {
+ text-decoration: underline;
+ }
+
+ &.small {
+ font-size: 12px;
+ line-height: 16px;
+ }
+ }
+
+ span {
+ font-family: inherit;
+ }
+
+ button,
+ select,
+ a {
+ outline: none;
+ }
+
+ /* Removes the grey background when you tap on a link in IOS */
+ button,
+ a {
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ }
+ }
+}
diff --git a/spikes/css/css-modules/src/components/base/index.js b/spikes/css/css-modules/src/components/base/index.js
new file mode 100644
index 00000000..a08c8138
--- /dev/null
+++ b/spikes/css/css-modules/src/components/base/index.js
@@ -0,0 +1,12 @@
+const React = require('react');
+const styles = require('./index.css');
+
+module.exports = ({
+ children
+}) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/spikes/css/css-modules/src/components/base/variables.css b/spikes/css/css-modules/src/components/base/variables.css
new file mode 100644
index 00000000..eb2fc224
--- /dev/null
+++ b/spikes/css/css-modules/src/components/base/variables.css
@@ -0,0 +1,12 @@
+@value font_primary: "freddiesflowerstitle-webfont", "Times", serif;
+@value font_secondary: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+@value font_tertiary: Georgia, Times, "Times New Roman", serif;
+
+@value color_primary: #ccc;
+@value color_primary_dark: #222;
+@value color_primary_mid: #959595;
+@value color_primary_light: #f4f4f4;
+@value color_warning: #C93F3F;
+@value color_valid: #547954;
+@value color_cta_primary: #60b4d6;
+@value color_cta_secondary: #e5eef2;
diff --git a/spikes/css/css-modules/src/components/button/index.js b/spikes/css/css-modules/src/components/button/index.js
new file mode 100644
index 00000000..9cd63df1
--- /dev/null
+++ b/spikes/css/css-modules/src/components/button/index.js
@@ -0,0 +1,9 @@
+const React = require('react');
+
+module.exports = (props) => {
+ return (
+
+ );
+};
diff --git a/spikes/css/css-modules/src/components/container/index.css b/spikes/css/css-modules/src/components/container/index.css
new file mode 100644
index 00000000..f2157be6
--- /dev/null
+++ b/spikes/css/css-modules/src/components/container/index.css
@@ -0,0 +1,38 @@
+@value color_background from "../base/variables.css";
+
+.container {
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.container::after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+@media (min-width: 544px) {
+ .container {
+ max-width: 576px;
+ }
+}
+
+@media (min-width: 768px) {
+ .container {
+ max-width: 720px;
+ }
+}
+
+@media (min-width: 992px) {
+ .container {
+ max-width: 940px;
+ }
+}
+
+@media (min-width: 1200px) {
+ .container {
+ max-width: 1140px;
+ }
+}
\ No newline at end of file
diff --git a/spikes/css/css-modules/src/components/container/index.js b/spikes/css/css-modules/src/components/container/index.js
new file mode 100644
index 00000000..b4809480
--- /dev/null
+++ b/spikes/css/css-modules/src/components/container/index.js
@@ -0,0 +1,12 @@
+const React = require('react');
+const styles = require('./index.css');
+
+module.exports = ({
+ children
+}) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/spikes/css/css-modules/src/components/index.js b/spikes/css/css-modules/src/components/index.js
new file mode 100644
index 00000000..a405120e
--- /dev/null
+++ b/spikes/css/css-modules/src/components/index.js
@@ -0,0 +1,5 @@
+module.exports = {
+ Button: require('./button'),
+ Container: require('./container'),
+ Base: require('./base')
+};
diff --git a/spikes/css/css-modules/src/index.js b/spikes/css/css-modules/src/index.js
new file mode 100644
index 00000000..94017e32
--- /dev/null
+++ b/spikes/css/css-modules/src/index.js
@@ -0,0 +1 @@
+module.exports = require('./components');
diff --git a/spikes/css/css-modules/src/showcase/index.js b/spikes/css/css-modules/src/showcase/index.js
new file mode 100644
index 00000000..af547af9
--- /dev/null
+++ b/spikes/css/css-modules/src/showcase/index.js
@@ -0,0 +1,17 @@
+const ReactDOM = require('react-dom');
+const React = require('react');
+
+const render = () => {
+ const Root = require('./root');
+
+ ReactDOM.render(
+ ,
+ document.getElementById('root')
+ );
+};
+
+render();
+
+if (module.hot) {
+ module.hot.accept('./root', render);
+}
diff --git a/spikes/css/css-modules/src/showcase/root.js b/spikes/css/css-modules/src/showcase/root.js
new file mode 100644
index 00000000..a522bd40
--- /dev/null
+++ b/spikes/css/css-modules/src/showcase/root.js
@@ -0,0 +1,25 @@
+const React = require('react');
+const ReactHotLoader = require('react-hot-loader');
+
+const {
+ Button,
+ Container,
+ Base
+} = require('../');
+
+const {
+ AppContainer
+} = ReactHotLoader;
+
+module.exports = () => {
+ return (
+
+
+
+ Hello
+
+
+
+
+ );
+};
diff --git a/spikes/css/css-modules/static/index.html b/spikes/css/css-modules/static/index.html
new file mode 100644
index 00000000..c5a61365
--- /dev/null
+++ b/spikes/css/css-modules/static/index.html
@@ -0,0 +1,11 @@
+
+
+
+ React Boilerplate
+
+
+
+
+
+
+
diff --git a/spikes/css/css-modules/stories/index.js b/spikes/css/css-modules/stories/index.js
new file mode 100644
index 00000000..3b098180
--- /dev/null
+++ b/spikes/css/css-modules/stories/index.js
@@ -0,0 +1,10 @@
+const React = require('react');
+const Storybook = require('@kadira/storybook');
+
+const Home = require('../src/client/containers/home');
+
+const homeStories = Storybook.storiesOf('Home', module);
+
+homeStories.add('with nothing', () => (
+
+));
diff --git a/spikes/css/css-modules/test/index.js b/spikes/css/css-modules/test/index.js
new file mode 100644
index 00000000..62cf17c3
--- /dev/null
+++ b/spikes/css/css-modules/test/index.js
@@ -0,0 +1,13 @@
+const test = require('ava');
+const enzyme = require('enzyme');
+const React = require('react');
+
+const {
+ shallow
+} = enzyme;
+
+test('renders without exploding', (t) => {
+ const Home = require('../src/client/containers/home');
+ const wrapper = shallow();
+ t.deepEqual(wrapper.length, 1);
+});
diff --git a/spikes/css/css-modules/webpack.config.js b/spikes/css/css-modules/webpack.config.js
new file mode 100644
index 00000000..fedf3ddc
--- /dev/null
+++ b/spikes/css/css-modules/webpack.config.js
@@ -0,0 +1,68 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const config = {
+ debug: true,
+ devtool: 'eval',
+ context: path.join(__dirname, './src'),
+ entry: [
+ 'webpack-dev-server/client?http://localhost:8080',
+ 'webpack/hot/only-dev-server',
+ 'react-hot-loader/patch',
+ './showcase/index.js'
+ ],
+ output: {
+ path: path.join(__dirname, './static'),
+ publicPath: '/static/',
+ filename: 'bundle.js'
+ },
+ plugins: [
+ new webpack.HotModuleReplacementPlugin(),
+ new webpack.NoErrorsPlugin()
+ ],
+ postcss: () => {
+ return [
+ require('postcss-modules-values'),
+ require('postcss-nested'),
+ require('autoprefixer')
+ ];
+ },
+ module: {
+ loaders: [{
+ test: /js?$/,
+ exclude: /node_modules/,
+ include: [
+ path.join(__dirname, './src')
+ ],
+ loaders: ['babel']
+ }, {
+ test: /\.json?$/,
+ exclude: /node_modules/,
+ include: [
+ path.join(__dirname, './src')
+ ],
+ loaders: ['json']
+ }, {
+ test: /\.css$/,
+ exclude: /node_modules/,
+ include: [
+ path.join(__dirname, './src')
+ ],
+ loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
+ }]
+ }
+};
+
+const devServer = {
+ hot: true,
+ compress: true,
+ lazy: false,
+ publicPath: config.output.publicPath,
+ historyApiFallback: {
+ index: './static/index.html'
+ }
+};
+
+module.exports = Object.assign({
+ devServer
+}, config);