From 00da2f417157f3d426a76abc057cf741699dbff6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Wed, 19 Oct 2016 00:05:32 +0100 Subject: [PATCH] css-modules & aphrodite examples --- spikes/css/aphrodite/.flooignore | 8 ++ spikes/css/aphrodite/.gitignore | 15 +++ spikes/css/aphrodite/.storybook/config.js | 7 ++ spikes/css/aphrodite/package.json | 23 ++++ spikes/css/aphrodite/public/index.html | 12 ++ spikes/css/aphrodite/src/App.js | 11 ++ spikes/css/aphrodite/src/button.js | 68 ++++++++++++ spikes/css/aphrodite/src/globals/h3.js | 9 ++ spikes/css/aphrodite/src/index.js | 8 ++ .../aphrodite/src/mixins/hover-transition.js | 37 +++++++ spikes/css/aphrodite/src/stories/index.js | 14 +++ spikes/css/aphrodite/src/variables.json | 22 ++++ spikes/css/css-modules/.babelrc | 15 +++ spikes/css/css-modules/.eslintignore | 3 + spikes/css/css-modules/.eslintrc | 29 +++++ spikes/css/css-modules/.gitignore | 4 + spikes/css/css-modules/.storybook/config.js | 5 + spikes/css/css-modules/package.json | 59 ++++++++++ spikes/css/css-modules/readme.md | 15 +++ .../css-modules/src/components/base/index.css | 103 ++++++++++++++++++ .../css-modules/src/components/base/index.js | 12 ++ .../src/components/base/variables.css | 12 ++ .../src/components/button/index.js | 9 ++ .../src/components/container/index.css | 38 +++++++ .../src/components/container/index.js | 12 ++ .../css/css-modules/src/components/index.js | 5 + spikes/css/css-modules/src/index.js | 1 + spikes/css/css-modules/src/showcase/index.js | 17 +++ spikes/css/css-modules/src/showcase/root.js | 25 +++++ spikes/css/css-modules/static/index.html | 11 ++ spikes/css/css-modules/stories/index.js | 10 ++ spikes/css/css-modules/test/index.js | 13 +++ spikes/css/css-modules/webpack.config.js | 68 ++++++++++++ 33 files changed, 700 insertions(+) create mode 100644 spikes/css/aphrodite/.flooignore create mode 100644 spikes/css/aphrodite/.gitignore create mode 100644 spikes/css/aphrodite/.storybook/config.js create mode 100644 spikes/css/aphrodite/package.json create mode 100644 spikes/css/aphrodite/public/index.html create mode 100644 spikes/css/aphrodite/src/App.js create mode 100644 spikes/css/aphrodite/src/button.js create mode 100644 spikes/css/aphrodite/src/globals/h3.js create mode 100644 spikes/css/aphrodite/src/index.js create mode 100644 spikes/css/aphrodite/src/mixins/hover-transition.js create mode 100644 spikes/css/aphrodite/src/stories/index.js create mode 100644 spikes/css/aphrodite/src/variables.json create mode 100644 spikes/css/css-modules/.babelrc create mode 100644 spikes/css/css-modules/.eslintignore create mode 100644 spikes/css/css-modules/.eslintrc create mode 100644 spikes/css/css-modules/.gitignore create mode 100644 spikes/css/css-modules/.storybook/config.js create mode 100644 spikes/css/css-modules/package.json create mode 100644 spikes/css/css-modules/readme.md create mode 100644 spikes/css/css-modules/src/components/base/index.css create mode 100644 spikes/css/css-modules/src/components/base/index.js create mode 100644 spikes/css/css-modules/src/components/base/variables.css create mode 100644 spikes/css/css-modules/src/components/button/index.js create mode 100644 spikes/css/css-modules/src/components/container/index.css create mode 100644 spikes/css/css-modules/src/components/container/index.js create mode 100644 spikes/css/css-modules/src/components/index.js create mode 100644 spikes/css/css-modules/src/index.js create mode 100644 spikes/css/css-modules/src/showcase/index.js create mode 100644 spikes/css/css-modules/src/showcase/root.js create mode 100644 spikes/css/css-modules/static/index.html create mode 100644 spikes/css/css-modules/stories/index.js create mode 100644 spikes/css/css-modules/test/index.js create mode 100644 spikes/css/css-modules/webpack.config.js 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);