Last active
July 3, 2017 16:13
-
-
Save Bernardstanislas/0a7628a96f34bda69131afc22e8ddb54 to your computer and use it in GitHub Desktop.
Style loader
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {PropTypes} from 'react'; | |
import ProductCard from '../../molecule/product-card'; | |
import PromoCode from '../../atom/promo-code'; | |
import PaymentForm from '../../molecule/payment-form'; | |
import style from './style.css'; | |
const Cart = ({ | |
productCardProps, | |
promoCodeProps, | |
paymentFormProps, | |
backUrl, | |
backTitle, | |
title | |
}) => ( | |
<div className={style.parent}> | |
<div className={style.titleContainer}> | |
<div className={style.headerTitle}>{title}</div> | |
</div> | |
<div className={style.cart}> | |
<div className={style.productBlock}> | |
<ProductCard {...productCardProps} /> | |
<PromoCode {...promoCodeProps} /> | |
</div> | |
<div className={style.paymentBlock}> | |
<PaymentForm {...paymentFormProps} /> | |
<a | |
className={style.backButton} | |
href={backUrl} | |
>{backTitle}</a> | |
</div> | |
</div> | |
</div> | |
); | |
Cart.PropTypes = { | |
productCardProps: ProductCard.PropTypes, | |
promoCodeProps: PromoCode.PropTypes, | |
paymentFormProps: PaymentForm.PropTypes, | |
backUrl: PropTypes.string, | |
backTitle: PropTypes.string, | |
title: PropTypes.string | |
}; | |
export default Cart; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@value colors: "../../variables/colors.css"; | |
@value light from colors; | |
@value blueGrey from colors; | |
@value breakpoints: "../../variables/breakpoints.css"; | |
@value mobile from breakpoints; | |
.parent { | |
background-color: light; | |
height: 100vh; | |
} | |
.cart { | |
width: 90%; | |
max-width: 1175px; | |
margin-right: auto; | |
margin-left: auto; | |
display: flex; | |
flex-direction: row; | |
flex-wrap: wrap; | |
justify-content: space-between; | |
} | |
.productBlock { | |
width: calc(50% - 20px); | |
display: flex; | |
flex-direction: column; | |
} | |
.paymentBlock { | |
width: calc(50% - 20px); | |
display: flex; | |
flex-direction: column; | |
} | |
.titleContainer { | |
height: 103px; | |
background-color: yellow; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
margin-bottom: 30px; | |
} | |
.headerTitle { | |
font-size: 40px; | |
color: darkGrey; | |
} | |
@media mobile { | |
.cart { | |
width: 100%; | |
} | |
.productBlock { | |
margin-right: 0; | |
max-width: 100%; | |
width: 100%; | |
} | |
.paymentBlock { | |
max-width: 100%; | |
width: 100%; | |
} | |
.titleContainer { | |
height: 46px; | |
margin-bottom: 0; | |
} | |
.headerTitle { | |
font-size: 15px; | |
} | |
} | |
.backButton { | |
border: none; | |
text-align: center; | |
margin: 10px 5px; | |
padding: 20px 0; | |
font-size: 17px; | |
font-weight: bold; | |
text-decoration: none; | |
background: #ECEFF1; | |
color: blueGrey; | |
cursor: pointer; | |
} | |
.backButton:hover { | |
background: #C0CAD1; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const path = require('path'); | |
const webpack = require('webpack'); | |
const BabiliPlugin = require('babili-webpack-plugin'); | |
const ExtractTextPlugin = require('extract-text-webpack-plugin'); | |
const CompressionPlugin = require('compression-webpack-plugin'); | |
const CSSWrapper = require('@coorpacademy/css-wrapper-webpack-plugin'); | |
const hash = '[folder]__[local]'; | |
const componentCSS = new ExtractTextPlugin({ | |
filename: 'bundle.css', | |
ignoreOrder: true | |
}); | |
const NODE_ENV = process.env.NODE_ENV || 'development'; | |
const config = cssScope => ({ | |
devtool: NODE_ENV === 'production' ? false : 'eval', | |
stats: { | |
children: false, | |
chunks: false, // Makes the build much quieter | |
colors: true | |
}, | |
output: { | |
library: 'Coorponents', | |
filename: '[name].js', | |
path: path.join(__dirname, 'dist'), | |
libraryTarget: 'umd' | |
}, | |
module: { | |
rules: [{ | |
test: /\.(ttf|otf|eot|svg|woff)$/, | |
loader: 'file-loader' | |
}, | |
(NODE_ENV === 'production') ? { | |
test: /\.css$/, | |
loader: componentCSS.extract({ | |
fallback: 'style-loader', | |
use: [{ | |
loader: 'css-loader', | |
options: { | |
minimize: true, | |
modules: true, | |
importLoaders: 1, | |
localIdentName: `${hash}` | |
} | |
}, { | |
loader: 'postcss-loader' | |
}] | |
}) | |
} : { | |
test: /\.css$/, | |
use: [{ | |
loader: 'style-loader' | |
}, { | |
loader: 'css-loader', | |
options: { | |
minimize: true, | |
modules: true, | |
importLoaders: 1, | |
localIdentName: `${hash}` | |
} | |
}, { | |
loader: 'postcss-loader' | |
}] | |
} | |
] | |
}, | |
plugins: (() => { | |
const plugins = [ | |
new webpack.DefinePlugin({ | |
'process.env': { | |
NODE_ENV: JSON.stringify(NODE_ENV) | |
} | |
}) | |
]; | |
if (NODE_ENV === 'production') | |
plugins.push( | |
new CompressionPlugin({ | |
asset: '[path].gz', | |
algorithm: 'gzip', | |
regExp: /\.js$|\.css$/, | |
threshold: 10240, | |
minRatio: 0.8 | |
}), | |
new webpack.LoaderOptionsPlugin({ | |
options: { | |
context: __dirname | |
}, | |
minimize: true, | |
debug: false | |
}), | |
new BabiliPlugin({ | |
comments: false, | |
sourceMap: false, | |
simplify: false | |
}), | |
componentCSS | |
); | |
if (cssScope) { | |
plugins.push( | |
new CSSWrapper('bundle.css', cssScope) | |
); | |
} | |
return plugins; | |
})() | |
}); | |
module.exports = config; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment