From 18248f122923ca5f5bc184e49785e57f31f1971d Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 1 Jan 2019 14:06:27 -0800 Subject: [PATCH] [change] attribute/string prefix to 'r-' --- docs/guides/style.md | 19 +-- .../__snapshots__/index-test.js.snap | 46 +++---- .../__snapshots__/index-test.js.snap | 2 +- .../exports/StyleSheet/StyleSheetManager.js | 2 +- .../ReactNativeStyleResolver-test.js.snap | 128 +++++++++--------- .../StyleSheetManager-test.js.snap | 8 +- .../__snapshots__/createAtomicRules.js.snap | 10 +- .../StyleSheet/createKeyframesRules.js | 2 +- .../src/exports/StyleSheet/initialRules.js | 4 +- .../src/exports/StyleSheet/modality.js | 4 +- .../__snapshots__/index-test.js.snap | 8 +- .../__snapshots__/index-test.js.snap | 12 +- .../src/modules/createDOMProps/index.js | 4 +- 13 files changed, 124 insertions(+), 125 deletions(-) diff --git a/docs/guides/style.md b/docs/guides/style.md index 7d54b941..6e02fc05 100644 --- a/docs/guides/style.md +++ b/docs/guides/style.md @@ -148,8 +148,8 @@ styles defined using `StyleSheet.create` will ultimately be rendered using CSS class names. React Native for Web introduced a novel strategy to achieve this. Each rule is -broken down into declarations, properties are expanded to their long-form, and -the resulting key-value pairs are mapped to unique "atomic CSS" class names. +broken down into declarations and the resulting key-value pairs are mapped to +unique "atomic CSS" class names. Input: @@ -158,7 +158,9 @@ const Box = () => const styles = StyleSheet.create({ box: { - margin: 0 + backgroundColor: 'red', + height: 100, + width: 100, } }); ``` @@ -167,13 +169,12 @@ Output: ```html -
+
``` This ensures that CSS order doesn't impact rendering and CSS rules are @@ -226,6 +227,6 @@ handled at the component-level. ### What about using Dev Tools? -React Dev Tools supports inspecting and editing of React Native styles. It's +React Dev Tools supports inspecting of React Native styles. It's recommended that you rely more on React Dev Tools and live/hot-reloading rather than inspecting and editing the DOM directly. diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap index 928eba45..e53cc7db 100644 --- a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap @@ -2,28 +2,28 @@ exports[`AppRegistry getApplication "getStyleElement" produces styles that are a function of rendering "element": Additional CSS for styled app 1`] = ` " -.rn-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00)} -.rn-borderTopWidth-10pzpfo{border-top-width:1234px} -.rn-borderRightWidth-1y24uml{border-right-width:1234px} -.rn-borderBottomWidth-98wxn4{border-bottom-width:1234px} -.rn-borderLeftWidth-150mub4{border-left-width:1234px}" +.r-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00)} +.r-borderTopWidth-10pzpfo{border-top-width:1234px} +.r-borderRightWidth-1y24uml{border-right-width:1234px} +.r-borderBottomWidth-98wxn4{border-bottom-width:1234px} +.r-borderLeftWidth-150mub4{border-left-width:1234px}" `; exports[`AppRegistry getApplication "getStyleElement" produces styles that are a function of rendering "element": CSS for an unstyled app 1`] = ` -":focus:not([data-rn-focusvisible-x92cna]){outline: none;} +":focus:not([data-r-focusvisible-x92cna]){outline: none;} @media all{ html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);} body{margin:0;} button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;} -.rn-reset{background-color:transparent;color:inherit;font:inherit;list-style:none;margin:0;text-align:inherit;text-decoration:none;} -.rn-pointer{cursor:pointer;} +.r-reset{background-color:transparent;color:inherit;font:inherit;list-style:none;margin:0;text-align:inherit;text-decoration:none;} +.r-pointer{cursor:pointer;} } -.rn-pointerEvents-12vffkv > *{pointer-events:auto} -.rn-pointerEvents-12vffkv{pointer-events:none !important} -.rn-flexGrow-16y2uox{-ms-flex-positive:1;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1} -.rn-flexShrink-1wbh5a2{-ms-flex-negative:1;-webkit-flex-shrink:1;flex-shrink:1} -.rn-flexBasis-1ro0kt6{-ms-flex-preferred-size:0%;-webkit-flex-basis:0%;flex-basis:0%}" +.r-pointerEvents-12vffkv > *{pointer-events:auto} +.r-pointerEvents-12vffkv{pointer-events:none !important} +.r-flexGrow-16y2uox{-ms-flex-positive:1;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1} +.r-flexShrink-1wbh5a2{-ms-flex-negative:1;-webkit-flex-shrink:1;flex-shrink:1} +.r-flexBasis-1ro0kt6{-ms-flex-preferred-size:0%;-webkit-flex-basis:0%;flex-basis:0%}" `; exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] = ` @@ -35,20 +35,20 @@ exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] `; exports[`AppRegistry getApplication returns "element" and "getStyleElement" 2`] = ` -"" +.r-ui-textinput-14mbsun{-moz-appearance:textfield;-webkit-appearance:none;background-color:transparent;border-radius:0px;border:0 solid black;box-sizing:border-box;font-family:14px system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif;padding:0px;resize:none} +.r-ui-textSingleLine-1xjj19i{max-width:100%;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important} +.r-ui-textHasAncestor-z2plr{color:inherit;font:inherit;text-decoration:inherit;white-space:inherit} +.r-ui-textIsRoot-gw3a6r{color:black;font:normal 14px system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif;text-decoration:none;white-space:pre-wrap} +.r-ui-text-1ntzlq4{background-color:transparent;border-width:0px;box-sizing:border-box;display:inline;margin:0px;padding:0px;text-align:inherit;word-wrap:break-word} +.r-ui-hitSlop-14nrb4u{bottom:0px;left:0px;position:absolute;right:0px;top:0px;z-index:-1} +.r-ui-view-15pvbv0{-ms-flex-align:stretch;-ms-flex-direction:column;-ms-flex-negative:0;-ms-flex-preferred-size:auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-basis:auto;-webkit-flex-direction:column;-webkit-flex-shrink:0;align-items:stretch;background-color:transparent;border:0 solid black;box-sizing:border-box;color:inherit;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;font:inherit;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;z-index:0}" `; diff --git a/packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap index a5a042ce..0dbd27fa 100644 --- a/packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Picker/__tests__/__snapshots__/index-test.js.snap @@ -10,7 +10,7 @@ exports[`components/Picker prop "children" items 1`] = ` exports[`components/Picker prop "children" renders items 1`] = `