Skip to content

Commit 4abe108

Browse files
author
joeshub
committed
adding emotion
1 parent 1dfd359 commit 4abe108

File tree

11 files changed

+760
-59
lines changed

11 files changed

+760
-59
lines changed

‎.babelrc

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"presets": [
3-
"es2015",
4-
"stage-2",
3+
"es2015",
4+
"stage-2",
55
"react"
66
],
77
"plugins": [
8-
"transform-class-properties",
8+
"transform-class-properties",
99
"transform-decorators-legacy",
1010
"transform-object-rest-spread",
1111
"react-hot-loader/babel"

‎07-styled-components/button/Button.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ export class Button extends Component {
2727

2828
render () {
2929
return (
30-
<StyledButton
31-
onClick={ this.onButtonClicked }
30+
<StyledButton
31+
onClick={ this.onButtonClicked }
3232
depressed={ this.state.depressed }
33-
{ ...this.props }
33+
{ ...this.props }
3434
/>
3535
)
3636
}

‎08-emotion/button/App.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, { Component } from 'react'
2+
import pkg from './package.json'
3+
import { Button } from './Button'
4+
5+
export default class App extends Component {
6+
render () {
7+
return (
8+
<main>
9+
<p>{pkg.description}</p>
10+
<Button>Button</Button>
11+
</main>
12+
)
13+
}
14+
}

‎08-emotion/button/Button.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { Component } from 'react'
2+
import styled, { css } from 'react-emotion'
3+
4+
const dynamicStyles = props => css`
5+
display: inline-block;
6+
outline: none;
7+
text-align: center;
8+
font: bold 32px helvetica;
9+
padding: 20px 40px;
10+
border: 0;
11+
cursor: pointer;
12+
color: #fff;
13+
transition: all 300ms;
14+
&:hover {
15+
background-color: ${props.depressed === true ? '#bebebe' : '#f98d00'};
16+
}
17+
background-color: ${props.depressed === true ? '#bebebe' : '#ec4800'};
18+
`
19+
20+
const StyledButton = styled('button')`
21+
${dynamicStyles}
22+
`
23+
24+
export class Button extends Component {
25+
26+
state = { depressed: false }
27+
28+
onButtonClicked = () => this.setState({
29+
depressed: !this.state.depressed
30+
})
31+
32+
render () {
33+
return (
34+
<StyledButton
35+
onClick={ this.onButtonClicked }
36+
depressed={ this.state.depressed }
37+
{ ...this.props }
38+
/>
39+
)
40+
}
41+
}

‎08-emotion/button/entry.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react'
2+
import { render } from 'react-dom'
3+
import { AppContainer } from 'react-hot-loader'
4+
import App from './App'
5+
6+
render (
7+
<AppContainer>
8+
<App />
9+
</AppContainer>,
10+
document.getElementById('app')
11+
)
12+
13+
// Hot Module Replacement API
14+
if (module.hot) {
15+
module.hot.accept('./App', () => {
16+
const NextApp = require('./App').default
17+
render(
18+
<AppContainer>
19+
<NextApp/>
20+
</AppContainer>,
21+
document.getElementById('app')
22+
)
23+
})
24+
}

‎08-emotion/button/package.json

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "emotion-button",
3+
"version": "1.0.0",
4+
"description": "Button - Emotion",
5+
"author": "Joe Seifi",
6+
"license": "ISC",
7+
"main": "build/app.js",
8+
"scripts": {
9+
"start": "../../node_modules/.bin/cross-env NODE_ENV=development node ../../scripts/server-button.js",
10+
"build": "../../node_modules/.bin/cross-env NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.build.js --progress --colors"
11+
},
12+
"devDependencies": {
13+
"babel-core": "^6.23.1",
14+
"babel-eslint": "^7.1.1",
15+
"babel-loader": "^6.3.2",
16+
"babel-plugin-emotion": "^9.0.1",
17+
"babel-plugin-transform-decorators-legacy": "^1.3.4",
18+
"babel-polyfill": "^6.23.0",
19+
"babel-preset-es2015": "^6.22.0",
20+
"babel-preset-react": "^6.23.0",
21+
"babel-preset-stage-0": "^6.22.0",
22+
"cross-env": "^3.1.4",
23+
"css-loader": "^0.26.1",
24+
"emotion": "^9.0.2",
25+
"eslint": "^3.15.0",
26+
"eslint-plugin-react": "^6.10.0",
27+
"express": "^4.14.1",
28+
"extract-text-webpack-plugin": "^2.0.0-rc.3",
29+
"html-webpack-plugin": "^2.28.0",
30+
"json-loader": "^0.5.4",
31+
"react": "^15.4.2",
32+
"react-emotion": "^9.0.2",
33+
"react-dom": "^15.4.2",
34+
"react-hot-loader": "^3.0.0-beta.6",
35+
"style-loader": "^0.13.1",
36+
"webpack": "^2.2.1",
37+
"webpack-dev-middleware": "^1.10.1",
38+
"webpack-hot-middleware": "^2.17.0"
39+
}
40+
}

‎08-emotion/button/webpack.build.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
var HtmlWebpackPlugin = require('html-webpack-plugin')
4+
5+
module.exports = {
6+
entry: ['babel-polyfill','./entry.js'],
7+
output: {
8+
path: path.join(__dirname + '/build'),
9+
filename: 'app.js',
10+
publicPath: ''
11+
},
12+
plugins: [
13+
new HtmlWebpackPlugin({ inject: true, template: '../../templates/plain.ejs' }),
14+
new webpack.optimize.OccurrenceOrderPlugin(),
15+
new webpack.DefinePlugin({
16+
'process.env': {
17+
'NODE_ENV': JSON.stringify('production')
18+
}
19+
})
20+
],
21+
module: {
22+
rules: [
23+
{
24+
test: /\.js$/,
25+
exclude: /node_modules/,
26+
use: 'babel-loader'
27+
},
28+
{
29+
test: /\.css$/,
30+
use: ['style-loader','css-loader']
31+
},
32+
{
33+
test: /\.json$/,
34+
use: 'json-loader'
35+
}
36+
]
37+
}
38+
}

‎08-emotion/button/webpack.config.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
var HtmlWebpackPlugin = require('html-webpack-plugin')
4+
var settings = require('../../scripts/settings.js')
5+
var devServer = settings.devServer
6+
7+
module.exports = {
8+
devServer: devServer,
9+
devtool: 'source-map',
10+
entry: [
11+
'react-hot-loader/patch',
12+
'webpack-hot-middleware/client?reload=1',
13+
'babel-polyfill',
14+
'./entry'
15+
],
16+
output: {
17+
path: path.join(__dirname),
18+
filename: 'bundle.js',
19+
publicPath: '/'
20+
},
21+
plugins: [
22+
new HtmlWebpackPlugin({ inject: true, template: '../../templates/server.ejs' }),
23+
new webpack.HotModuleReplacementPlugin(),
24+
new webpack.NoEmitOnErrorsPlugin()
25+
],
26+
module: {
27+
rules: [
28+
{
29+
test: /\.js$/,
30+
exclude: /node_modules/,
31+
use: 'babel-loader'
32+
},
33+
{
34+
test: /\.css$/,
35+
use: ['style-loader','css-loader']
36+
},
37+
{
38+
test: /\.json$/,
39+
use: 'json-loader'
40+
}
41+
]
42+
}
43+
}

‎package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"babel-core": "^6.23.1",
1717
"babel-eslint": "^7.1.1",
1818
"babel-loader": "^6.4.0",
19+
"babel-plugin-emotion": "^9.0.1",
1920
"babel-plugin-transform-class-properties": "^6.23.0",
2021
"babel-plugin-transform-decorators-legacy": "^1.3.4",
2122
"babel-plugin-transform-object-rest-spread": "^6.23.0",
@@ -26,6 +27,7 @@
2627
"classnames": "^2.2.5",
2728
"cross-env": "^3.1.4",
2829
"css-loader": "^0.26.1",
30+
"emotion": "^9.0.2",
2931
"eslint": "^3.15.0",
3032
"eslint-plugin-react": "^6.10.0",
3133
"express": "^4.14.1",
@@ -45,14 +47,18 @@
4547
"react-addons-css-transition-group": "^15.5.2",
4648
"react-css-modules": "^4.2.0",
4749
"react-dom": "^15.5.4",
50+
"react-emotion": "^9.0.2",
4851
"react-hot-loader": "^3.0.0-beta.6",
4952
"serve-static": "^1.12.1",
53+
"stylable": "^5.2.2",
54+
"stylable-integration": "^6.1.1",
5055
"style-loader": "^0.13.2",
5156
"styled-components": "^2.0.0-15",
5257
"styletron-react": "^2.5.3",
5358
"url-loader": "^0.5.8",
5459
"webpack": "^2.2.1",
5560
"webpack-dev-middleware": "^1.10.1",
56-
"webpack-hot-middleware": "^2.17.1"
61+
"webpack-hot-middleware": "^2.17.1",
62+
"wix-react-tools": "^4.1.2"
5763
}
5864
}

‎webpack.config.js

+26-9
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ const path = require('path')
33
const webpack = require('webpack')
44
const HtmlWebpackPlugin = require('html-webpack-plugin')
55
const ExtractTextPlugin = require('extract-text-webpack-plugin')
6+
const StylablePlugin = require('stylable-integration/webpack-plugin')
67

78
const production = process.env.NODE_ENV === 'production'
89
const settings = require('./scripts/settings.js')
910
const devServer = settings.devServer
1011
const basePath = path.join(__dirname)
1112
const cssModulesPath = path.resolve(__dirname, '05-react-css-modules')
13+
const stylablePath = path.resolve(__dirname, '09-stylable')
1214

1315
let cssModulesLoaders = [
1416
'style-loader',
@@ -55,8 +57,8 @@ const webpackEntries = projectPaths.reduce((allEntreis, currPath) => {
5557

5658
let htmlPlugins = Object.keys(webpackEntries).reduce((acc, cur, idx, arr) => {
5759
acc.push(new HtmlWebpackPlugin({
58-
inject: true,
59-
template: cur.indexOf('button') !== -1 ? 'templates/server.ejs' : 'templates/plain.ejs',
60+
inject: true,
61+
template: cur.indexOf('button') !== -1 ? 'templates/server.ejs' : 'templates/plain.ejs',
6062
title: cur,
6163
filename: cur + '/index.html',
6264
chunks: [ cur ]
@@ -67,7 +69,8 @@ let htmlPlugins = Object.keys(webpackEntries).reduce((acc, cur, idx, arr) => {
6769
const webpackPlugins = [
6870
...htmlPlugins,
6971
new webpack.HotModuleReplacementPlugin(),
70-
new webpack.NoEmitOnErrorsPlugin()
72+
new webpack.NoEmitOnErrorsPlugin(),
73+
new StylablePlugin({ injectBundleCss: true })
7174
]
7275

7376
if (production) {
@@ -95,26 +98,40 @@ module.exports = {
9598
{
9699
test: /\.js$/,
97100
exclude: /node_modules/,
98-
use: [
99-
'react-hot-loader/webpack',
100-
'babel-loader?cacheDirectory=true'
101+
use: [
102+
'react-hot-loader/webpack',
103+
'babel-loader?cacheDirectory=true'
101104
]
102105
},
103106
{
104107
test: /\.s?css$/,
105108
include: [ cssModulesPath ],
106109
use: cssModulesLoaders
107110
},
111+
StylablePlugin.rule(),
112+
{
113+
test: /\.(png|jpg|gif|svg)$/,
114+
include: [ stylablePath ],
115+
use: [
116+
{
117+
loader: 'url-loader',
118+
options: {
119+
limit: 8192
120+
}
121+
}
122+
]
123+
},
108124
{
109125
test: /\.css$/,
110-
use: [
126+
exclude: [ stylablePath, cssModulesPath ],
127+
use: [
111128
'style-loader',
112-
'css-loader'
129+
'css-loader'
113130
],
114-
exclude: [ cssModulesPath ],
115131
},
116132
{
117133
test: /\.(jpe?g|png|gif|svg)$/i,
134+
exclude: [ stylablePath ],
118135
use: [ 'file-loader?name=[path][name].[hash].[ext]' ]
119136
},
120137
{

0 commit comments

Comments
 (0)