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

Minor cleanup of StyleSheet

Browse Source
This commit is contained in:
Nicolas Gallagher
2020-05-20 10:22:33 -07:00
parent 3230713d6b
commit 52f903229e
3 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap
+2 -1
View File
@@ -63,7 +63,8 @@ Object {
"property": "scrollbarWidth",
"rules": Array [
".r-scrollbarWidth-2eszeu::-webkit-scrollbar{display:none}",
".r-scrollbarWidth-2eszeu{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;}",
".r-scrollbarWidth-2eszeu{overflow:-moz-scrollbars-none;-ms-overflow-style:none;}",
".r-scrollbarWidth-2eszeu{scrollbar-width:none;}",
],
"value": "none",
},
packages/react-native-web/src/exports/StyleSheet/compile.js
Vendored
+18 -14
View File
@@ -133,6 +133,7 @@ function createAtomicRules(identifier: string, property, value): Rules {
break;
}
// Equivalent to using '::placeholder'
case 'placeholderTextColor': {
const block = createDeclarationBlock({ color: value, opacity: 1 });
rules.push(
@@ -144,19 +145,8 @@ function createAtomicRules(identifier: string, property, value): Rules {
break;
}
// Polyfill for draft spec
// https://drafts.csswg.org/css-scrollbars-1/
case 'scrollbarWidth': {
if (value === 'none') {
rules.push(
`${selector}::-webkit-scrollbar{display:none}`,
`${selector}{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;}`
);
}
break;
}
// See #513
// Polyfill for additional 'pointer-events' values
// See d13f78622b233a0afc0c7a200c0a0792c8ca9e58
case 'pointerEvents': {
let finalValue = value;
if (value === 'auto' || value === 'box-only') {
@@ -177,6 +167,20 @@ function createAtomicRules(identifier: string, property, value): Rules {
break;
}
// Polyfill for draft spec
// https://drafts.csswg.org/css-scrollbars-1/
case 'scrollbarWidth': {
if (value === 'none') {
rules.push(
`${selector}::-webkit-scrollbar{display:none}`,
`${selector}{overflow:-moz-scrollbars-none;-ms-overflow-style:none;}`
);
}
const block = createDeclarationBlock({ [property]: value });
rules.push(`${selector}${block}`);
break;
}
default: {
const block = createDeclarationBlock({ [property]: value });
rules.push(`${selector}${block}`);
@@ -253,7 +257,7 @@ function createKeyframes(keyframes) {
*/
function processKeyframesValue(keyframesValue) {
if (typeof keyframesValue === 'number') {
throw new Error('Invalid CSS keyframes type');
throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);
}
const animationNames = [];
packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js
Vendored
+7 -12
View File
@@ -26,16 +26,13 @@ import modality from './modality';
import { STYLE_ELEMENT_ID, STYLE_GROUPS } from './constants';
export default function createStyleResolver() {
let inserted, sheet, lookup;
let inserted, sheet, cache;
const resolved = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
const init = () => {
inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(STYLE_ELEMENT_ID));
lookup = {
byClassName: {},
byProp: {}
};
cache = {};
modality(rule => sheet.insert(rule, STYLE_GROUPS.modality));
initialRules.forEach(rule => {
sheet.insert(rule, STYLE_GROUPS.reset);
@@ -44,17 +41,15 @@ export default function createStyleResolver() {
init();
function addToLookup(className, prop, value) {
if (!lookup.byProp[prop]) {
lookup.byProp[prop] = {};
function addToCache(className, prop, value) {
if (!cache[prop]) {
cache[prop] = {};
}
lookup.byProp[prop][value] = className;
lookup.byClassName[className] = { prop, value };
cache[prop][value] = className;
}
function getClassName(prop, value) {
const val = stringifyValueWithProperty(value, prop);
const cache = lookup.byProp;
return cache[prop] && cache[prop].hasOwnProperty(val) && cache[prop][val];
}
@@ -66,7 +61,7 @@ export default function createStyleResolver() {
const results = atomic(style);
Object.keys(results).forEach(key => {
const { identifier, property, rules, value } = results[key];
addToLookup(identifier, property, value);
addToCache(identifier, property, value);
rules.forEach(rule => {
const group = STYLE_GROUPS.custom[property] || STYLE_GROUPS.atomic;
sheet.insert(rule, group);