From fec8b04269526779e3edc273ce0805fbf3ca3594 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 9 Jun 2015 23:34:00 -0700 Subject: [PATCH] Extract CSS into external stylesheet --- index.html | 1 + index.js | 2 +- lib/StylePropTypes/BorderTheme.js | 25 +++++------ lib/StylePropTypes/BoxModel.js | 73 ++++++++++--------------------- lib/StylePropTypes/Position.js | 13 ++++-- package.json | 6 ++- webpack.config.js | 9 +++- 7 files changed, 55 insertions(+), 74 deletions(-) diff --git a/index.html b/index.html index a4ba6afe..ad1229f5 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,5 @@ +
diff --git a/index.js b/index.js index 131addcd..500f1e52 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -import {getOtherProps, pickProps, omit} from './lib/filterObjectProps'; +import {getOtherProps, omitProps, pickProps} from './lib/filterObjectProps'; import Component from './lib/components/Component'; import Image from './lib/components/Image'; import Text from './lib/components/Text'; diff --git a/lib/StylePropTypes/BorderTheme.js b/lib/StylePropTypes/BorderTheme.js index 09446508..8028d1bf 100644 --- a/lib/StylePropTypes/BorderTheme.js +++ b/lib/StylePropTypes/BorderTheme.js @@ -1,5 +1,10 @@ import {PropTypes} from 'react'; +const numberOrString = PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string, +]); + export default { // border-color borderColor: PropTypes.string, @@ -10,19 +15,9 @@ export default { // border-style borderStyle: PropTypes.string, // border-radius - borderRadius: PropTypes.oneOfType([ - PropTypes.number, PropTypes.string - ]), - borderTopLeftRadius: PropTypes.oneOfType([ - PropTypes.number, PropTypes.string - ]), - borderTopRightRadius: PropTypes.oneOfType([ - PropTypes.number, PropTypes.string - ]), - borderBottomLeftRadius: PropTypes.oneOfType([ - PropTypes.number, PropTypes.string - ]), - borderBottomRightRadius: PropTypes.oneOfType([ - PropTypes.number, PropTypes.string - ]) + borderRadius: numberOrString, + borderTopLeftRadius: numberOrString, + borderTopRightRadius: numberOrString, + borderBottomLeftRadius: numberOrString, + borderBottomRightRadius: numberOrString }; diff --git a/lib/StylePropTypes/BoxModel.js b/lib/StylePropTypes/BoxModel.js index fd989d73..ae77a339 100644 --- a/lib/StylePropTypes/BoxModel.js +++ b/lib/StylePropTypes/BoxModel.js @@ -1,5 +1,10 @@ import {PropTypes} from 'react'; +const numberOrString = PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string, +]); + export default { boxSizing: PropTypes.oneOf([ 'border-box', @@ -14,58 +19,24 @@ export default { 'inline-flex' ]), // dimensions - height: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - width: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), + height: numberOrString, + width: numberOrString, // border width - borderWidth: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - borderTopWidth: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - borderRightWidth: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - borderBottomWidth: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - borderLeftWidth: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), + borderWidth: numberOrString, + borderTopWidth: numberOrString, + borderRightWidth: numberOrString, + borderBottomWidth: numberOrString, + borderLeftWidth: numberOrString, // margin - margin: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - marginTop: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - marginBottom: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - marginLeft: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - marginRight: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), + margin: numberOrString, + marginTop: numberOrString, + marginBottom: numberOrString, + marginLeft: numberOrString, + marginRight: numberOrString, // padding - padding: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - paddingTop: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - paddingBottom: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - paddingLeft: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]), - paddingRight: PropTypes.oneOfType([ - PropTypes.string, PropTypes.number - ]) + padding: numberOrString, + paddingTop: numberOrString, + paddingBottom: numberOrString, + paddingLeft: numberOrString, + paddingRight: numberOrString }; diff --git a/lib/StylePropTypes/Position.js b/lib/StylePropTypes/Position.js index f984ecb6..134bfa99 100644 --- a/lib/StylePropTypes/Position.js +++ b/lib/StylePropTypes/Position.js @@ -1,14 +1,19 @@ import {PropTypes} from 'react'; +const numberOrString = PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string, +]); + export default { position: PropTypes.oneOf([ 'absolute', 'fixed', 'relative' ]), - bottom: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), - left: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), - right: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), - top: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + bottom: numberOrString, + left: numberOrString, + right: numberOrString, + top: numberOrString, zIndex: PropTypes.number }; diff --git a/package.json b/package.json index 58c4bee6..7f8f640e 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,11 @@ "description": "UI SDK based on react-native", "main": "index.js", "scripts": { + "prebuild": "rm -rf ./dist", "build": "npm run build:package & npm run build:example", - "build:example": "webpack index.js dist/main.js --config webpack.config.js", + "build:example": "webpack index.js ./dist/main.js --config webpack.config.js", "build:example:watch": "npm run build:example -- --watch", - "build:package": "webpack example.js dist/example.js --config webpack.config.js", + "build:package": "webpack example.js ./dist/example.js --config webpack.config.js", "build:package:watch": "npm run build:package -- --watch", "build:watch": "npm run build:package:watch & npm run build:example:watch" }, @@ -19,6 +20,7 @@ "babel-loader": "^5.1.4", "babel-runtime": "^5.5.6", "css-loader": "^0.14.4", + "extract-text-webpack-plugin": "^0.8.1", "node-libs-browser": "^0.5.2", "postcss-loader": "^0.4.4", "postcss-modules-local-by-default": "0.0.7", diff --git a/webpack.config.js b/webpack.config.js index 279ced49..1c688062 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,5 @@ var autoprefixer = require('autoprefixer-core'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); var localcss = require('postcss-modules-local-by-default'); module.exports = { @@ -6,7 +7,10 @@ module.exports = { loaders: [ { test: /\.css$/, - loader: 'style-loader!css-loader?localIdentName=[hash:base64:5]!postcss-loader' + loader: ExtractTextPlugin.extract( + 'style-loader', + 'css-loader?localIdentName=[hash:base64:5]!postcss-loader' + ) }, { test: /\.jsx?$/, @@ -16,5 +20,8 @@ module.exports = { } ] }, + plugins: [ + new ExtractTextPlugin('react-web-sdk.css') + ], postcss: [ autoprefixer, localcss ] };