1. /**

  2.  * Copyright (c) Meta Platforms, Inc. and affiliates.

  3.  *

  4.  * This source code is licensed under the MIT license found in the

  5.  * LICENSE file in the root directory of this source tree.

  6.  */

  7. 

  8. // 'msTransform' is correct, but the other prefixes should be capitalized

  9. const badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;

  10. const msPattern = /^-ms-/;

  11. const hyphenPattern = /-(.)/g;

  12. 

  13. // style values shouldn't contain a semicolon

  14. const badStyleValueWithSemicolonPattern = /;\s*$/;

  15. 

  16. const warnedStyleNames = {};

  17. const warnedStyleValues = {};

  18. let warnedForNaNValue = false;

  19. let warnedForInfinityValue = false;

  20. 

  21. function camelize(string) {

  22.   return string.replace(hyphenPattern, function (_, character) {

  23.     return character.toUpperCase();

  24.   });

  25. }

  26. 

  27. function warnHyphenatedStyleName(name) {

  28.   if (__DEV__) {

  29.     if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {

  30.       return;

  31.     }

  32. 

  33.     warnedStyleNames[name] = true;

  34.     console.error(

  35.       'Unsupported style property %s. Did you mean %s?',

  36.       name,

  37.       // As Andi Smith suggests

  38.       // (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix

  39.       // is converted to lowercase `ms`.

  40.       camelize(name.replace(msPattern, 'ms-')),

  41.     );

  42.   }

  43. }

  44. 

  45. function warnBadVendoredStyleName(name) {

  46.   if (__DEV__) {

  47.     if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {

  48.       return;

  49.     }

  50. 

  51.     warnedStyleNames[name] = true;

  52.     console.error(

  53.       'Unsupported vendor-prefixed style property %s. Did you mean %s?',

  54.       name,

  55.       name.charAt(0).toUpperCase() + name.slice(1),

  56.     );

  57.   }

  58. }

  59. 

  60. function warnStyleValueWithSemicolon(name, value) {

  61.   if (__DEV__) {

  62.     if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {

  63.       return;

  64.     }

  65. 

  66.     warnedStyleValues[value] = true;

  67.     console.error(

  68.       "Style property values shouldn't contain a semicolon. " +

  69.         'Try "%s: %s" instead.',

  70.       name,

  71.       value.replace(badStyleValueWithSemicolonPattern, ''),

  72.     );

  73.   }

  74. }

  75. 

  76. function warnStyleValueIsNaN(name, value) {

  77.   if (__DEV__) {

  78.     if (warnedForNaNValue) {

  79.       return;

  80.     }

  81. 

  82.     warnedForNaNValue = true;

  83.     console.error(

  84.       '`NaN` is an invalid value for the `%s` css style property.',

  85.       name,

  86.     );

  87.   }

  88. }

  89. 

  90. function warnStyleValueIsInfinity(name, value) {

  91.   if (__DEV__) {

  92.     if (warnedForInfinityValue) {

  93.       return;

  94.     }

  95. 

  96.     warnedForInfinityValue = true;

  97.     console.error(

  98.       '`Infinity` is an invalid value for the `%s` css style property.',

  99.       name,

  100.     );

  101.   }

  102. }

  103. 

  104. function warnValidStyle(name, value) {

  105.   if (__DEV__) {

  106.     if (name.indexOf('-') > -1) {

  107.       warnHyphenatedStyleName(name);

  108.     } else if (badVendoredStyleNamePattern.test(name)) {

  109.       warnBadVendoredStyleName(name);

  110.     } else if (badStyleValueWithSemicolonPattern.test(value)) {

  111.       warnStyleValueWithSemicolon(name, value);

  112.     }

  113. 

  114.     if (typeof value === 'number') {

  115.       if (isNaN(value)) {

  116.         warnStyleValueIsNaN(name, value);

  117.       } else if (!isFinite(value)) {

  118.         warnStyleValueIsInfinity(name, value);

  119.       }

  120.     }

  121.   }

  122. }

  123. 

  124. export default warnValidStyle;
About Sign Up Leave Feedback Contact