mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 17:43:00 +08:00
[change] attribute/string prefix to 'r-'
This commit is contained in:
Nicolas Gallagher
@@ -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 = () => <View style={styles.box} />
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
box: {
|
||||
margin: 0
|
||||
backgroundColor: 'red',
|
||||
height: 100,
|
||||
width: 100,
|
||||
}
|
||||
});
|
||||
```
|
||||
@@ -167,13 +169,12 @@ Output:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.rn-1mnahxq { margin-top: 0px; }
|
||||
.rn-61z16t { margin-right: 0px; }
|
||||
.rn-p1pxzi { margin-bottom: 0px; }
|
||||
.rn-11wrixw { margin-left: 0px; }
|
||||
.r-1mnahxq { background-color: red; }
|
||||
.r-p1pxzi { height: 100px; }
|
||||
.r-61z16t { width: 100px; }
|
||||
</style>
|
||||
|
||||
<div class="rn-156q2ks rn-61z16t rn-p1pxzi rn-11wrixw"></div>
|
||||
<div class="rn-156q2ks rn-61z16t rn-p1pxzi"></div>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
@@ -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`] = `
|
||||
"<style id=\\"react-native-stylesheet\\">:focus:not([data-rn-focusvisible-x92cna]){outline: none;}
|
||||
"<style id=\\"react-native-stylesheet\\">: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-ui-textinput-11ngujt{-moz-appearance:textfield;-webkit-appearance:none;background-color:transparent;border-radius:0px;border:0 solid black;box-sizing:border-box;font-family:14px System;padding:0px;resize:none}
|
||||
.rn-ui-textSingleLine-1xjj19i{max-width:100%;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}
|
||||
.rn-ui-textHasAncestor-z2plr{color:inherit;font:inherit;text-decoration:inherit;white-space:inherit}
|
||||
.rn-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}
|
||||
.rn-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}
|
||||
.rn-ui-hitSlop-14nrb4u{bottom:0px;left:0px;position:absolute;right:0px;top:0px;z-index:-1}
|
||||
.rn-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}</style>"
|
||||
.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}</style>"
|
||||
`;
|
||||
|
||||
@@ -10,7 +10,7 @@ exports[`components/Picker prop "children" items 1`] = `
|
||||
|
||||
exports[`components/Picker prop "children" renders items 1`] = `
|
||||
<select
|
||||
className="rn-fontFamily-14xgk7a rn-fontSize-7cikom rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw"
|
||||
className="r-fontFamily-14xgk7a r-fontSize-7cikom r-marginTop-1mnahxq r-marginRight-61z16t r-marginBottom-p1pxzi r-marginLeft-11wrixw"
|
||||
data-focusable={true}
|
||||
onChange={[Function]}
|
||||
>
|
||||
|
||||
@@ -17,7 +17,7 @@ const STYLE_ELEMENT_ID = 'react-native-stylesheet';
|
||||
|
||||
const createClassName = (name, value) => {
|
||||
const hashed = hash(name + normalizeValue(value));
|
||||
return process.env.NODE_ENV !== 'production' ? `rn-${name}-${hashed}` : `rn-${hashed}`;
|
||||
return process.env.NODE_ENV !== 'production' ? `r-${name}-${hashed}` : `r-${hashed}`;
|
||||
};
|
||||
|
||||
const normalizeValue = value => (typeof value === 'object' ? JSON.stringify(value) : value);
|
||||
|
||||
@@ -3,102 +3,102 @@
|
||||
exports[`StyleSheet/ReactNativeStyleResolver resolve resolves inline-style pointerEvents to classname 1`] = `
|
||||
Object {
|
||||
"classList": Array [
|
||||
"rn-pointerEvents-12vffkv",
|
||||
"r-pointerEvents-12vffkv",
|
||||
],
|
||||
"className": "rn-pointerEvents-12vffkv",
|
||||
"className": "r-pointerEvents-12vffkv",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`StyleSheet/ReactNativeStyleResolver resolve with register before RTL, resolves to correct className 1`] = `
|
||||
Object {
|
||||
"classList": Array [
|
||||
"rn-marginRight-zso239",
|
||||
"rn-right-1bnbe1j",
|
||||
"rn-textAlign-1ff274t",
|
||||
"r-marginRight-zso239",
|
||||
"r-right-1bnbe1j",
|
||||
"r-textAlign-1ff274t",
|
||||
],
|
||||
"className": "rn-marginRight-zso239 rn-right-1bnbe1j rn-textAlign-1ff274t",
|
||||
"className": "r-marginRight-zso239 r-right-1bnbe1j r-textAlign-1ff274t",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`StyleSheet/ReactNativeStyleResolver resolve with register before RTL, resolves to correct className 2`] = `
|
||||
Object {
|
||||
"classList": Array [
|
||||
"rn-left-2s0hu9",
|
||||
"rn-marginLeft-1n0xq6e",
|
||||
"rn-textAlign-fdjqy7",
|
||||
"r-left-2s0hu9",
|
||||
"r-marginLeft-1n0xq6e",
|
||||
"r-textAlign-fdjqy7",
|
||||
],
|
||||
"className": "rn-left-2s0hu9 rn-marginLeft-1n0xq6e rn-textAlign-fdjqy7",
|
||||
"className": "r-left-2s0hu9 r-marginLeft-1n0xq6e r-textAlign-fdjqy7",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to className 1`] = `
|
||||
Object {
|
||||
"classList": Array [
|
||||
"rn-borderTopColor-3vzq9n",
|
||||
"rn-borderRightColor-ycnuvz",
|
||||
"rn-borderBottomColor-wqks8h",
|
||||
"rn-borderLeftColor-3se2kx",
|
||||
"rn-borderTopWidth-13yce4e",
|
||||
"rn-borderRightWidth-fnigne",
|
||||
"rn-borderBottomWidth-ndvcnb",
|
||||
"rn-borderLeftWidth-gxnn5r",
|
||||
"rn-left-1tsx3h3",
|
||||
"rn-opacity-icoktb",
|
||||
"rn-position-u8s1d",
|
||||
"rn-width-b8lwoo",
|
||||
"r-borderTopColor-3vzq9n",
|
||||
"r-borderRightColor-ycnuvz",
|
||||
"r-borderBottomColor-wqks8h",
|
||||
"r-borderLeftColor-3se2kx",
|
||||
"r-borderTopWidth-13yce4e",
|
||||
"r-borderRightWidth-fnigne",
|
||||
"r-borderBottomWidth-ndvcnb",
|
||||
"r-borderLeftWidth-gxnn5r",
|
||||
"r-left-1tsx3h3",
|
||||
"r-opacity-icoktb",
|
||||
"r-position-u8s1d",
|
||||
"r-width-b8lwoo",
|
||||
],
|
||||
"className": "rn-borderTopColor-3vzq9n rn-borderRightColor-ycnuvz rn-borderBottomColor-wqks8h rn-borderLeftColor-3se2kx rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-b8lwoo",
|
||||
"className": "r-borderTopColor-3vzq9n r-borderRightColor-ycnuvz r-borderBottomColor-wqks8h r-borderLeftColor-3se2kx r-borderTopWidth-13yce4e r-borderRightWidth-fnigne r-borderBottomWidth-ndvcnb r-borderLeftWidth-gxnn5r r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d r-width-b8lwoo",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to className 2`] = `
|
||||
Object {
|
||||
"classList": Array [
|
||||
"rn-borderTopColor-3vzq9n",
|
||||
"rn-borderRightColor-ycnuvz",
|
||||
"rn-borderBottomColor-wqks8h",
|
||||
"rn-borderLeftColor-3se2kx",
|
||||
"rn-borderTopWidth-13yce4e",
|
||||
"rn-borderRightWidth-fnigne",
|
||||
"rn-borderBottomWidth-ndvcnb",
|
||||
"rn-borderLeftWidth-gxnn5r",
|
||||
"rn-left-1tsx3h3",
|
||||
"rn-opacity-icoktb",
|
||||
"rn-position-u8s1d",
|
||||
"rn-width-l0gwng",
|
||||
"r-borderTopColor-3vzq9n",
|
||||
"r-borderRightColor-ycnuvz",
|
||||
"r-borderBottomColor-wqks8h",
|
||||
"r-borderLeftColor-3se2kx",
|
||||
"r-borderTopWidth-13yce4e",
|
||||
"r-borderRightWidth-fnigne",
|
||||
"r-borderBottomWidth-ndvcnb",
|
||||
"r-borderLeftWidth-gxnn5r",
|
||||
"r-left-1tsx3h3",
|
||||
"r-opacity-icoktb",
|
||||
"r-position-u8s1d",
|
||||
"r-width-l0gwng",
|
||||
],
|
||||
"className": "rn-borderTopColor-3vzq9n rn-borderRightColor-ycnuvz rn-borderBottomColor-wqks8h rn-borderLeftColor-3se2kx rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-l0gwng",
|
||||
"className": "r-borderTopColor-3vzq9n r-borderRightColor-ycnuvz r-borderBottomColor-wqks8h r-borderLeftColor-3se2kx r-borderTopWidth-13yce4e r-borderRightWidth-fnigne r-borderBottomWidth-ndvcnb r-borderLeftWidth-gxnn5r r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d r-width-l0gwng",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to className 3`] = `
|
||||
Object {
|
||||
"classList": Array [
|
||||
"rn-borderTopColor-3vzq9n",
|
||||
"rn-borderRightColor-ycnuvz",
|
||||
"rn-borderBottomColor-wqks8h",
|
||||
"rn-borderLeftColor-3se2kx",
|
||||
"rn-borderTopWidth-13yce4e",
|
||||
"rn-borderRightWidth-fnigne",
|
||||
"rn-borderBottomWidth-ndvcnb",
|
||||
"rn-borderLeftWidth-gxnn5r",
|
||||
"rn-left-1tsx3h3",
|
||||
"rn-opacity-icoktb",
|
||||
"rn-position-u8s1d",
|
||||
"rn-width-b8lwoo",
|
||||
"r-borderTopColor-3vzq9n",
|
||||
"r-borderRightColor-ycnuvz",
|
||||
"r-borderBottomColor-wqks8h",
|
||||
"r-borderLeftColor-3se2kx",
|
||||
"r-borderTopWidth-13yce4e",
|
||||
"r-borderRightWidth-fnigne",
|
||||
"r-borderBottomWidth-ndvcnb",
|
||||
"r-borderLeftWidth-gxnn5r",
|
||||
"r-left-1tsx3h3",
|
||||
"r-opacity-icoktb",
|
||||
"r-position-u8s1d",
|
||||
"r-width-b8lwoo",
|
||||
],
|
||||
"className": "rn-borderTopColor-3vzq9n rn-borderRightColor-ycnuvz rn-borderBottomColor-wqks8h rn-borderLeftColor-3se2kx rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-b8lwoo",
|
||||
"className": "r-borderTopColor-3vzq9n r-borderRightColor-ycnuvz r-borderBottomColor-wqks8h r-borderLeftColor-3se2kx r-borderTopWidth-13yce4e r-borderRightWidth-fnigne r-borderBottomWidth-ndvcnb r-borderLeftWidth-gxnn5r r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d r-width-b8lwoo",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to mixed 1`] = `
|
||||
Object {
|
||||
"classList": Array [
|
||||
"rn-left-1tsx3h3",
|
||||
"rn-opacity-icoktb",
|
||||
"rn-position-u8s1d",
|
||||
"r-left-1tsx3h3",
|
||||
"r-opacity-icoktb",
|
||||
"r-position-u8s1d",
|
||||
],
|
||||
"className": "rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d",
|
||||
"className": "r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d",
|
||||
"style": Object {
|
||||
"borderBottomColor": "rgba(255,0,0,1.00)",
|
||||
"borderBottomWidth": "0px",
|
||||
@@ -116,12 +116,12 @@ Object {
|
||||
exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to mixed 2`] = `
|
||||
Object {
|
||||
"classList": Array [
|
||||
"rn-left-1tsx3h3",
|
||||
"rn-opacity-icoktb",
|
||||
"rn-position-u8s1d",
|
||||
"rn-width-l0gwng",
|
||||
"r-left-1tsx3h3",
|
||||
"r-opacity-icoktb",
|
||||
"r-position-u8s1d",
|
||||
"r-width-l0gwng",
|
||||
],
|
||||
"className": "rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d rn-width-l0gwng",
|
||||
"className": "r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d r-width-l0gwng",
|
||||
"style": Object {
|
||||
"borderBottomColor": "rgba(255,0,0,1.00)",
|
||||
"borderBottomWidth": "0px",
|
||||
@@ -138,11 +138,11 @@ Object {
|
||||
exports[`StyleSheet/ReactNativeStyleResolver resolve with register, resolves to mixed 3`] = `
|
||||
Object {
|
||||
"classList": Array [
|
||||
"rn-left-1tsx3h3",
|
||||
"rn-opacity-icoktb",
|
||||
"rn-position-u8s1d",
|
||||
"r-left-1tsx3h3",
|
||||
"r-opacity-icoktb",
|
||||
"r-position-u8s1d",
|
||||
],
|
||||
"className": "rn-left-1tsx3h3 rn-opacity-icoktb rn-position-u8s1d",
|
||||
"className": "r-left-1tsx3h3 r-opacity-icoktb r-position-u8s1d",
|
||||
"style": Object {
|
||||
"borderBottomColor": "rgba(255,0,0,1.00)",
|
||||
"borderBottomWidth": "0px",
|
||||
@@ -222,7 +222,7 @@ Object {
|
||||
|
||||
exports[`StyleSheet/ReactNativeStyleResolver resolveWithNode next class names have priority over current inline styles 1`] = `
|
||||
Object {
|
||||
"className": "rn-opacity-6dt33c",
|
||||
"className": "r-opacity-6dt33c",
|
||||
"style": Object {
|
||||
"opacity": "",
|
||||
},
|
||||
@@ -270,7 +270,7 @@ Object {
|
||||
|
||||
exports[`StyleSheet/ReactNativeStyleResolver resolveWithNode when isRTL=true, resolves to flipped classNames 1`] = `
|
||||
Object {
|
||||
"className": "rn-left-1u10d71 rn-marginRight-zso239",
|
||||
"className": "r-left-1u10d71 r-marginRight-zso239",
|
||||
"style": Object {
|
||||
"marginRight": "",
|
||||
"right": "5px",
|
||||
|
||||
@@ -5,15 +5,15 @@ exports[`StyleSheet/StyleSheetManager getClassName 1`] = `undefined`;
|
||||
exports[`StyleSheet/StyleSheetManager getStyleSheet 1`] = `
|
||||
Object {
|
||||
"id": "react-native-stylesheet",
|
||||
"textContent": ":focus:not([data-rn-focusvisible-x92cna]){outline: none;}
|
||||
"textContent": ":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---test-property-ax3bxi{--test-property:test-value}",
|
||||
.r---test-property-ax3bxi{--test-property:test-value}",
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
|
||||
exports[`StyleSheet/createAtomicRules transforms custom "animationName" declaration 1`] = `
|
||||
Array [
|
||||
"@-webkit-keyframes rn-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}",
|
||||
"@keyframes rn-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}",
|
||||
"@-webkit-keyframes rn-anim-zc91cv{from{left:0px}to{left:10px}}",
|
||||
"@keyframes rn-anim-zc91cv{from{left:0px}to{left:10px}}",
|
||||
".test{-webkit-animation-name:rn-anim-2k74q5,rn-anim-zc91cv;animation-name:rn-anim-2k74q5,rn-anim-zc91cv}",
|
||||
"@-webkit-keyframes r-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}",
|
||||
"@keyframes r-anim-2k74q5{0%{top:0px}50%{top:5px}100%{top:10px}}",
|
||||
"@-webkit-keyframes r-anim-zc91cv{from{left:0px}to{left:10px}}",
|
||||
"@keyframes r-anim-zc91cv{from{left:0px}to{left:10px}}",
|
||||
".test{-webkit-animation-name:r-anim-2k74q5,r-anim-zc91cv;animation-name:r-anim-2k74q5,r-anim-zc91cv}",
|
||||
]
|
||||
`;
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ const hashObject = obj => hash(JSON.stringify(obj));
|
||||
|
||||
const createIdentifier = obj => {
|
||||
const hashed = hashObject(obj);
|
||||
return process.env.NODE_ENV !== 'production' ? `rn-anim-${hashed}` : `rn-${hashed}`;
|
||||
return process.env.NODE_ENV !== 'production' ? `r-anim-${hashed}` : `r-${hashed}`;
|
||||
};
|
||||
|
||||
const prefixes = ['-webkit-', ''];
|
||||
|
||||
@@ -29,7 +29,7 @@ const resets = [
|
||||
'display:none;' +
|
||||
'}',
|
||||
// Reset styles for heading, link, and list DOM elements
|
||||
'.rn-reset{' +
|
||||
'.r-reset{' +
|
||||
'background-color:transparent;' +
|
||||
'color:inherit;' +
|
||||
'font:inherit;' +
|
||||
@@ -39,7 +39,7 @@ const resets = [
|
||||
'text-decoration:none;' +
|
||||
'}',
|
||||
// For pressable elements
|
||||
'.rn-pointer{cursor:pointer;}'
|
||||
'.r-pointer{cursor:pointer;}'
|
||||
];
|
||||
|
||||
const reset = [safeRule(resets.join('\n'))];
|
||||
|
||||
@@ -22,9 +22,7 @@ import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
|
||||
import hash from '../../vendor/hash';
|
||||
|
||||
const focusVisibleAttributeName =
|
||||
'data-rn-' +
|
||||
(process.env.NODE_ENV !== 'production' ? 'focusvisible-' : '') +
|
||||
hash('focusvisible');
|
||||
'data-r-' + (process.env.NODE_ENV !== 'production' ? 'focusvisible-' : '') + hash('focusvisible');
|
||||
|
||||
const rule = `:focus:not([${focusVisibleAttributeName}]){outline: none;}`;
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
exports[`components/Text prop "children" 1`] = `
|
||||
<span
|
||||
class="rn-ui-text-1ntzlq4 rn-ui-textHasAncestor-z2plr"
|
||||
class="r-ui-text-1ntzlq4 r-ui-textHasAncestor-z2plr"
|
||||
data-testid="child"
|
||||
dir="auto"
|
||||
/>
|
||||
@@ -10,7 +10,7 @@ exports[`components/Text prop "children" 1`] = `
|
||||
|
||||
exports[`components/Text prop "onPress" 1`] = `
|
||||
<div
|
||||
className="rn-ui-text-1ntzlq4 rn-ui-textIsRoot-gw3a6r rn-cursor-1loqt21"
|
||||
className="r-ui-text-1ntzlq4 r-ui-textIsRoot-gw3a6r r-cursor-1loqt21"
|
||||
data-focusable={true}
|
||||
dir="auto"
|
||||
onClick={[Function]}
|
||||
@@ -21,14 +21,14 @@ exports[`components/Text prop "onPress" 1`] = `
|
||||
|
||||
exports[`components/Text prop "selectable" 1`] = `
|
||||
<div
|
||||
className="rn-ui-text-1ntzlq4 rn-ui-textIsRoot-gw3a6r"
|
||||
className="r-ui-text-1ntzlq4 r-ui-textIsRoot-gw3a6r"
|
||||
dir="auto"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`components/Text prop "selectable" 2`] = `
|
||||
<div
|
||||
className="rn-ui-text-1ntzlq4 rn-ui-textIsRoot-gw3a6r rn-userSelect-lrvibr"
|
||||
className="r-ui-text-1ntzlq4 r-ui-textIsRoot-gw3a6r r-userSelect-lrvibr"
|
||||
dir="auto"
|
||||
/>
|
||||
`;
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
|
||||
exports[`modules/createDOMProps includes "rel" values for "a" elements (to securely open external links) 1`] = `" noopener noreferrer"`;
|
||||
|
||||
exports[`modules/createDOMProps includes base reset style for browser-styled elements 1`] = `"rn-reset"`;
|
||||
exports[`modules/createDOMProps includes base reset style for browser-styled elements 1`] = `"r-reset"`;
|
||||
|
||||
exports[`modules/createDOMProps includes base reset style for browser-styled elements 2`] = `"rn-reset"`;
|
||||
exports[`modules/createDOMProps includes base reset style for browser-styled elements 2`] = `"r-reset"`;
|
||||
|
||||
exports[`modules/createDOMProps includes base reset style for browser-styled elements 3`] = `"rn-reset"`;
|
||||
exports[`modules/createDOMProps includes base reset style for browser-styled elements 3`] = `"r-reset"`;
|
||||
|
||||
exports[`modules/createDOMProps includes base reset style for browser-styled elements 4`] = `"rn-reset"`;
|
||||
exports[`modules/createDOMProps includes base reset style for browser-styled elements 4`] = `"r-reset"`;
|
||||
|
||||
exports[`modules/createDOMProps includes cursor style for pressable roles 1`] = `"rn-pointer"`;
|
||||
exports[`modules/createDOMProps includes cursor style for pressable roles 1`] = `"r-pointer"`;
|
||||
|
||||
exports[`modules/createDOMProps includes cursor style for pressable roles 2`] = `"rn-pointer"`;
|
||||
exports[`modules/createDOMProps includes cursor style for pressable roles 2`] = `"r-pointer"`;
|
||||
|
||||
@@ -137,7 +137,7 @@ const createDOMProps = (component, props, styleResolver) => {
|
||||
let c;
|
||||
// style interactive elements for mouse and mobile browsers
|
||||
if ((role === 'button' || role === 'link') && !disabled) {
|
||||
c = 'rn-pointer';
|
||||
c = 'r-pointer';
|
||||
}
|
||||
// style reset various elements (not all are used internally)
|
||||
if (
|
||||
@@ -147,7 +147,7 @@ const createDOMProps = (component, props, styleResolver) => {
|
||||
component === 'ul' ||
|
||||
role === 'heading'
|
||||
) {
|
||||
c = 'rn-reset' + (c != null ? ' ' + c : '');
|
||||
c = 'r-reset' + (c != null ? ' ' + c : '');
|
||||
}
|
||||
// style from createElement use
|
||||
if (props.className != null) {
|
||||
|
||||
Reference in New Issue
Block a user