zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-24 15:18:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

[change] simplify CSS generation

Browse Source
This commit is contained in:
Nicolas Gallagher
2017-01-02 13:15:38 -08:00
parent a535c558d8
commit e65f91d849
5 changed files with 54 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap
+36 -36
View File
@@ -8,41 +8,41 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit
@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform: rotate(0deg); transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg); transform: rotate(360deg);}}
@keyframes rn-ProgressBar-animation{0%{-webkit-transform: translateX(-100%); transform: translateX(-100%);}100%{-webkit-transform: translateX(400%); transform: translateX(400%);}}
.rn_pointerEvents\\:auto,.rn_pointerEvents\\:box-only,.rn_pointerEvents\\:box-none *{pointer-events:auto}.rn_pointerEvents\\:none,.rn_pointerEvents\\:box-only *,.rn_pointerEvents\\:box-none{pointer-events:none}
.rn-bottom\\:0px{bottom:0px;}
.rn-left\\:0px{left:0px;}
.rn-position\\:absolute{position:absolute;}
.rn-right\\:0px{right:0px;}
.rn-top\\:0px{top:0px;}
.rn-alignItems\\:stretch{-webkit-align-items:stretch;-ms-flex-align:stretch;-webkit-box-align:stretch;align-items:stretch;}
.rn-backgroundColor\\:transparent{background-color:transparent;}
.rn-borderTopStyle\\:solid{border-top-style:solid;}
.rn-borderRightStyle\\:solid{border-right-style:solid;}
.rn-borderBottomStyle\\:solid{border-bottom-style:solid;}
.rn-borderLeftStyle\\:solid{border-left-style:solid;}
.rn-borderTopWidth\\:0px{border-top-width:0px;}
.rn-borderRightWidth\\:0px{border-right-width:0px;}
.rn-borderBottomWidth\\:0px{border-bottom-width:0px;}
.rn-borderLeftWidth\\:0px{border-left-width:0px;}
.rn-boxSizing\\:border-box{-moz-box-sizing:border-box;box-sizing:border-box;}
.rn-color\\:inherit{color:inherit;}
.rn-display\\:flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.rn-flexBasis\\:auto{-webkit-flex-basis:auto;-ms-preferred-size:auto;flex-basis:auto;}
.rn-flexDirection\\:column{-webkit-flex-direction:column;-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;}
.rn-font\\:inherit{font:inherit;}
.rn-listStyle\\:none{list-style:none;}
.rn-marginTop\\:0px{margin-top:0px;}
.rn-marginRight\\:0px{margin-right:0px;}
.rn-marginBottom\\:0px{margin-bottom:0px;}
.rn-marginLeft\\:0px{margin-left:0px;}
.rn-minHeight\\:0px{min-height:0px;}
.rn-minWidth\\:0px{min-width:0px;}
.rn-paddingTop\\:0px{padding-top:0px;}
.rn-paddingRight\\:0px{padding-right:0px;}
.rn-paddingBottom\\:0px{padding-bottom:0px;}
.rn-paddingLeft\\:0px{padding-left:0px;}
.rn-position\\:relative{position:relative;}
.rn-textAlign\\:inherit{text-align:inherit;}
.rn-textDecoration\\:none{text-decoration:none;}
.rn-flexShrink\\:0{-webkit-flex-shrink:0px;-ms-flex-negative:0px;flex-shrink:0;}
.rn-bottom\\:0px{bottom:0px}
.rn-left\\:0px{left:0px}
.rn-position\\:absolute{position:absolute}
.rn-right\\:0px{right:0px}
.rn-top\\:0px{top:0px}
.rn-alignItems\\:stretch{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
.rn-backgroundColor\\:transparent{background-color:transparent}
.rn-borderTopStyle\\:solid{border-top-style:solid}
.rn-borderRightStyle\\:solid{border-right-style:solid}
.rn-borderBottomStyle\\:solid{border-bottom-style:solid}
.rn-borderLeftStyle\\:solid{border-left-style:solid}
.rn-borderTopWidth\\:0px{border-top-width:0px}
.rn-borderRightWidth\\:0px{border-right-width:0px}
.rn-borderBottomWidth\\:0px{border-bottom-width:0px}
.rn-borderLeftWidth\\:0px{border-left-width:0px}
.rn-boxSizing\\:border-box{-moz-box-sizing:border-box;box-sizing:border-box}
.rn-color\\:inherit{color:inherit}
.rn-display\\:flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
.rn-flexBasis\\:auto{-ms-preferred-size:auto;-webkit-flex-basis:auto;flex-basis:auto}
.rn-flexDirection\\:column{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
.rn-font\\:inherit{font:inherit}
.rn-listStyle\\:none{list-style:none}
.rn-marginTop\\:0px{margin-top:0px}
.rn-marginRight\\:0px{margin-right:0px}
.rn-marginBottom\\:0px{margin-bottom:0px}
.rn-marginLeft\\:0px{margin-left:0px}
.rn-minHeight\\:0px{min-height:0px}
.rn-minWidth\\:0px{min-width:0px}
.rn-paddingTop\\:0px{padding-top:0px}
.rn-paddingRight\\:0px{padding-right:0px}
.rn-paddingBottom\\:0px{padding-bottom:0px}
.rn-paddingLeft\\:0px{padding-left:0px}
.rn-position\\:relative{position:relative}
.rn-textAlign\\:inherit{text-align:inherit}
.rn-textDecoration\\:none{text-decoration:none}
.rn-flexShrink\\:0{-ms-flex-negative:0px;-webkit-flex-shrink:0px;flex-shrink:0}
</style>"
`;
src/apis/StyleSheet/__tests__/__snapshots__/generateCss-test.js.snap
+1 -1
View File
@@ -1 +1 @@
exports[`apis/StyleSheet/generateCss generates correct css 1`] = `"-webkit-transition-duration:0.1s;transition-duration:0.1s;position:absolute;border-width-right:3px;border-width-left:2px;box-shadow:1px 1px 1px 1px #000;"`;
exports[`apis/StyleSheet/generateCss generates correct css 1`] = `"-webkit-transition-duration:0.1s;border-width-left:2px;border-width-right:3px;box-shadow:1px 1px 1px 1px #000;position:absolute;transition-duration:0.1s"`;
src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap
+10 -10
View File
@@ -1,14 +1,14 @@
exports[`apis/StyleSheet renderToString 1`] = `
"<style id=\"react-native-stylesheet\">
.rn-borderTopColor\\:red{border-top-color:red;}
.rn-borderRightColor\\:red{border-right-color:red;}
.rn-borderBottomColor\\:red{border-bottom-color:red;}
.rn-borderLeftColor\\:red{border-left-color:red;}
.rn-borderTopWidth\\:0px{border-top-width:0px;}
.rn-borderRightWidth\\:0px{border-right-width:0px;}
.rn-borderBottomWidth\\:0px{border-bottom-width:0px;}
.rn-borderLeftWidth\\:0px{border-left-width:0px;}
.rn-left\\:50px{left:50px;}
.rn-position\\:absolute{position:absolute;}
.rn-borderTopColor\\:red{border-top-color:red}
.rn-borderRightColor\\:red{border-right-color:red}
.rn-borderBottomColor\\:red{border-bottom-color:red}
.rn-borderLeftColor\\:red{border-left-color:red}
.rn-borderTopWidth\\:0px{border-top-width:0px}
.rn-borderRightWidth\\:0px{border-right-width:0px}
.rn-borderBottomWidth\\:0px{border-bottom-width:0px}
.rn-borderLeftWidth\\:0px{border-left-width:0px}
.rn-left\\:50px{left:50px}
.rn-position\\:absolute{position:absolute}
</style>"
`;
src/apis/StyleSheet/generateCss.js
+5 -20
View File
@@ -3,36 +3,21 @@ import mapKeyValue from '../../modules/mapKeyValue';
import normalizeValue from './normalizeValue';
import prefixAll from 'inline-style-prefixer/static';
const RE_VENDOR = /^-/;
const sortVendorPrefixes = (a, b) => {
const vendorA = RE_VENDOR.test(a);
const vendorB = RE_VENDOR.test(b);
if (vendorA && vendorB || vendorA) {
return -1;
} else {
return 1;
}
};
const mapDeclaration = (prop, val) => {
const createDeclarationString = (prop, val) => {
const name = hyphenate(prop);
const value = normalizeValue(prop, val);
if (Array.isArray(val)) {
return val.map((v) => `${name}:${v};`).join('');
return val.map((v) => `${name}:${v}`).join(';');
}
return `${name}:${value};`;
return `${name}:${value}`;
};
/**
* Generates valid CSS rule body from a JS object
*
* generateCss({ width: 20, color: 'blue' });
* // => 'width:20px;color:blue;'
* // => 'color:blue;width:20px'
*/
const generateCss = (style) => {
const prefixed = prefixAll(style);
return mapKeyValue(prefixed, mapDeclaration).sort(sortVendorPrefixes).join('');
};
const generateCss = (style) => mapKeyValue(prefixAll(style), createDeclarationString).sort().join(';');
module.exports = generateCss;
src/apis/StyleSheet/registry.js
+2 -2
View File
@@ -95,8 +95,8 @@ const resolveProps = (reactNativeStyle) => {
if (process.env.__REACT_NATIVE_DEBUG_ENABLED__) {
console.groupCollapsed('[StyleSheet] resolving uncached styles');
console.log(
`Slow operation. Resolving style objects (uncached result). ` +
`Occurs on first render and when using styles not registered with "StyleSheet.create"`
'Slow operation. Resolving style objects (uncached result). ' +
'Occurs on first render and when using styles not registered with "StyleSheet.create"'
);
console.log('source => \n', reactNativeStyle);
console.log('flatten => \n', flatStyle);