kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-04-27 21:07:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Extract CSS into external stylesheet

Browse Source
This commit is contained in:
Nicolas Gallagher
2015-06-09 23:34:00 -07:00
parent bdcc54809c
commit fec8b04269
7 changed files with 55 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -1,4 +1,5 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="dist/react-web-sdk.css">
<div id="react-root"></div>
<script src="dist/example.js"></script>

2
index.js
View File

@@ -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';

25
lib/StylePropTypes/BorderTheme.js
View File

@@ -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
};

73
lib/StylePropTypes/BoxModel.js
View File

@@ -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
};

13
lib/StylePropTypes/Position.js
View File

@@ -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
};

6
package.json
View File

@@ -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",

9
webpack.config.js
View File

@@ -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 ]
};