diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap index 712f2c7e..eed035a8 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap @@ -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", }, diff --git a/packages/react-native-web/src/exports/StyleSheet/compile.js b/packages/react-native-web/src/exports/StyleSheet/compile.js index a6ff8d0b..035af6d1 100644 --- a/packages/react-native-web/src/exports/StyleSheet/compile.js +++ b/packages/react-native-web/src/exports/StyleSheet/compile.js @@ -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 = []; diff --git a/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js b/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js index 17b063a0..5ddca90d 100644 --- a/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js +++ b/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js @@ -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);