From e65f91d849dfdba0ead23422966dcaa50146d840 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 2 Jan 2017 13:15:38 -0800 Subject: [PATCH] [change] simplify CSS generation --- .../renderApplication-test.js.snap | 72 +++++++++---------- .../__snapshots__/generateCss-test.js.snap | 2 +- .../__snapshots__/index-test.js.snap | 20 +++--- src/apis/StyleSheet/generateCss.js | 25 ++----- src/apis/StyleSheet/registry.js | 4 +- 5 files changed, 54 insertions(+), 69 deletions(-) diff --git a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap index 5de023bc..1ac43ffb 100644 --- a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap +++ b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap @@ -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} " `; diff --git a/src/apis/StyleSheet/__tests__/__snapshots__/generateCss-test.js.snap b/src/apis/StyleSheet/__tests__/__snapshots__/generateCss-test.js.snap index 958b394e..898f6b2f 100644 --- a/src/apis/StyleSheet/__tests__/__snapshots__/generateCss-test.js.snap +++ b/src/apis/StyleSheet/__tests__/__snapshots__/generateCss-test.js.snap @@ -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"`; diff --git a/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap b/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap index 95a48505..feee4a96 100644 --- a/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap +++ b/src/apis/StyleSheet/__tests__/__snapshots__/index-test.js.snap @@ -1,14 +1,14 @@ exports[`apis/StyleSheet renderToString 1`] = ` "" `; diff --git a/src/apis/StyleSheet/generateCss.js b/src/apis/StyleSheet/generateCss.js index 433f8fab..9de74d61 100644 --- a/src/apis/StyleSheet/generateCss.js +++ b/src/apis/StyleSheet/generateCss.js @@ -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; diff --git a/src/apis/StyleSheet/registry.js b/src/apis/StyleSheet/registry.js index 67411f28..8468b658 100644 --- a/src/apis/StyleSheet/registry.js +++ b/src/apis/StyleSheet/registry.js @@ -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);