zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-06-02 18:41:17 +00: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
index.html
+1
View File
@@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="dist/react-web-sdk.css">
<div id="react-root"></div> <div id="react-root"></div>
<script src="dist/example.js"></script> <script src="dist/example.js"></script>
index.js
+1 -1
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 Component from './lib/components/Component';
import Image from './lib/components/Image'; import Image from './lib/components/Image';
import Text from './lib/components/Text'; import Text from './lib/components/Text';
lib/StylePropTypes/BorderTheme.js
+10 -15
View File
@@ -1,5 +1,10 @@
import {PropTypes} from 'react'; import {PropTypes} from 'react';
const numberOrString = PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]);
export default { export default {
// border-color // border-color
borderColor: PropTypes.string, borderColor: PropTypes.string,
@@ -10,19 +15,9 @@ export default {
// border-style // border-style
borderStyle: PropTypes.string, borderStyle: PropTypes.string,
// border-radius // border-radius
borderRadius: PropTypes.oneOfType([ borderRadius: numberOrString,
PropTypes.number, PropTypes.string borderTopLeftRadius: numberOrString,
]), borderTopRightRadius: numberOrString,
borderTopLeftRadius: PropTypes.oneOfType([ borderBottomLeftRadius: numberOrString,
PropTypes.number, PropTypes.string borderBottomRightRadius: numberOrString
]),
borderTopRightRadius: PropTypes.oneOfType([
PropTypes.number, PropTypes.string
]),
borderBottomLeftRadius: PropTypes.oneOfType([
PropTypes.number, PropTypes.string
]),
borderBottomRightRadius: PropTypes.oneOfType([
PropTypes.number, PropTypes.string
])
}; };
lib/StylePropTypes/BoxModel.js
+22 -51
View File
@@ -1,5 +1,10 @@
import {PropTypes} from 'react'; import {PropTypes} from 'react';
const numberOrString = PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]);
export default { export default {
boxSizing: PropTypes.oneOf([ boxSizing: PropTypes.oneOf([
'border-box', 'border-box',
@@ -14,58 +19,24 @@ export default {
'inline-flex' 'inline-flex'
]), ]),
// dimensions // dimensions
height: PropTypes.oneOfType([ height: numberOrString,
PropTypes.string, PropTypes.number width: numberOrString,
]),
width: PropTypes.oneOfType([
PropTypes.string, PropTypes.number
]),
// border width // border width
borderWidth: PropTypes.oneOfType([ borderWidth: numberOrString,
PropTypes.string, PropTypes.number borderTopWidth: numberOrString,
]), borderRightWidth: numberOrString,
borderTopWidth: PropTypes.oneOfType([ borderBottomWidth: numberOrString,
PropTypes.string, PropTypes.number borderLeftWidth: numberOrString,
]),
borderRightWidth: PropTypes.oneOfType([
PropTypes.string, PropTypes.number
]),
borderBottomWidth: PropTypes.oneOfType([
PropTypes.string, PropTypes.number
]),
borderLeftWidth: PropTypes.oneOfType([
PropTypes.string, PropTypes.number
]),
// margin // margin
margin: PropTypes.oneOfType([ margin: numberOrString,
PropTypes.string, PropTypes.number marginTop: numberOrString,
]), marginBottom: numberOrString,
marginTop: PropTypes.oneOfType([ marginLeft: numberOrString,
PropTypes.string, PropTypes.number marginRight: numberOrString,
]),
marginBottom: PropTypes.oneOfType([
PropTypes.string, PropTypes.number
]),
marginLeft: PropTypes.oneOfType([
PropTypes.string, PropTypes.number
]),
marginRight: PropTypes.oneOfType([
PropTypes.string, PropTypes.number
]),
// padding // padding
padding: PropTypes.oneOfType([ padding: numberOrString,
PropTypes.string, PropTypes.number paddingTop: numberOrString,
]), paddingBottom: numberOrString,
paddingTop: PropTypes.oneOfType([ paddingLeft: numberOrString,
PropTypes.string, PropTypes.number paddingRight: numberOrString
]),
paddingBottom: PropTypes.oneOfType([
PropTypes.string, PropTypes.number
]),
paddingLeft: PropTypes.oneOfType([
PropTypes.string, PropTypes.number
]),
paddingRight: PropTypes.oneOfType([
PropTypes.string, PropTypes.number
])
}; };
lib/StylePropTypes/Position.js
+9 -4
View File
@@ -1,14 +1,19 @@
import {PropTypes} from 'react'; import {PropTypes} from 'react';
const numberOrString = PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]);
export default { export default {
position: PropTypes.oneOf([ position: PropTypes.oneOf([
'absolute', 'absolute',
'fixed', 'fixed',
'relative' 'relative'
]), ]),
bottom: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), bottom: numberOrString,
left: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), left: numberOrString,
right: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), right: numberOrString,
top: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), top: numberOrString,
zIndex: PropTypes.number zIndex: PropTypes.number
}; };
package.json
+4 -2
View File
@@ -4,10 +4,11 @@
"description": "UI SDK based on react-native", "description": "UI SDK based on react-native",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"prebuild": "rm -rf ./dist",
"build": "npm run build:package & npm run build:example", "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: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:package:watch": "npm run build:package -- --watch",
"build:watch": "npm run build:package:watch & npm run build:example:watch" "build:watch": "npm run build:package:watch & npm run build:example:watch"
}, },
@@ -19,6 +20,7 @@
"babel-loader": "^5.1.4", "babel-loader": "^5.1.4",
"babel-runtime": "^5.5.6", "babel-runtime": "^5.5.6",
"css-loader": "^0.14.4", "css-loader": "^0.14.4",
"extract-text-webpack-plugin": "^0.8.1",
"node-libs-browser": "^0.5.2", "node-libs-browser": "^0.5.2",
"postcss-loader": "^0.4.4", "postcss-loader": "^0.4.4",
"postcss-modules-local-by-default": "0.0.7", "postcss-modules-local-by-default": "0.0.7",
webpack.config.js
+8 -1
View File
@@ -1,4 +1,5 @@
var autoprefixer = require('autoprefixer-core'); var autoprefixer = require('autoprefixer-core');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var localcss = require('postcss-modules-local-by-default'); var localcss = require('postcss-modules-local-by-default');
module.exports = { module.exports = {
@@ -6,7 +7,10 @@ module.exports = {
loaders: [ loaders: [
{ {
test: /\.css$/, 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?$/, test: /\.jsx?$/,
@@ -16,5 +20,8 @@ module.exports = {
} }
] ]
}, },
plugins: [
new ExtractTextPlugin('react-web-sdk.css')
],
postcss: [ autoprefixer, localcss ] postcss: [ autoprefixer, localcss ]
}; };