warn valid style

一、作用

二、警告有效样式

function warnValidStyle(name, value) {
  if (__DEV__) {
    if (name.indexOf('-') > -1) {
      warnHyphenatedStyleName(name);
    } else if (badVendoredStyleNamePattern.test(name)) {
      warnBadVendoredStyleName(name);
    } else if (badStyleValueWithSemicolonPattern.test(value)) {
      warnStyleValueWithSemicolon(name, value);
    }

    if (typeof value === 'number') {
      if (isNaN(value)) {
        warnStyleValueIsNaN(name, value);
      } else if (!isFinite(value)) {
        warnStyleValueIsInfinity(name, value);
      }
    }
  }
}

export default warnValidStyle;

常量

1. 坏的供应商样式名称模式

// 'msTransform' is correct, but the other prefixes should be capitalized
// 'msTransform' 是正确的，但其他前缀应首字母大写
// 坏的供应商样式名称模式
const badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
// ms 匹配模式
const msPattern = /^-ms-/;
// 连字符模式
const hyphenPattern = /-(.)/g;

// style values shouldn't contain a semicolon
// 样式值不应包含分号
// 带分号的错误样式值模式
const badStyleValueWithSemicolonPattern = /;\s*$/;

// 警告样式名称
const warnedStyleNames = {};
// 警告样式值
const warnedStyleValues = {};

变量

1. 因 NaN 值而警告

// 因 NaN 值而警告
let warnedForNaNValue = false;
// 因无限值而警告
let warnedForInfinityValue = false;

工具

1. 驼峰式

function camelize(string) {
  return string.replace(hyphenPattern, function (_, character) {
    return character.toUpperCase();
  });
}

2. 警告连字符风格名称

function warnHyphenatedStyleName(name) {
  if (__DEV__) {
    if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
      return;
    }

    warnedStyleNames[name] = true;
    console.error(
      'Unsupported style property %s. Did you mean %s?',
      name,
      // As Andi Smith suggests
      // (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
      // is converted to lowercase `ms`.
      //
      // 正如 Andi Smith 所建议的
      // (http://www.andismith.com/blog/2012/02/modernizr-prefixed/)，
      // `-ms` 前缀会被转换为小写的 `ms`。
      camelize(name.replace(msPattern, 'ms-')),
    );
  }
}

3. 警告：不良的供应商样式名称

function warnBadVendoredStyleName(name) {
  if (__DEV__) {
    if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
      return;
    }

    warnedStyleNames[name] = true;
    console.error(
      'Unsupported vendor-prefixed style property %s. Did you mean %s?',
      name,
      name.charAt(0).toUpperCase() + name.slice(1),
    );
  }
}

4. 带分号的警告样式值

function warnStyleValueWithSemicolon(name, value) {
  if (__DEV__) {
    if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
      return;
    }

    warnedStyleValues[value] = true;
    console.error(
      "Style property values shouldn't contain a semicolon. " +
        'Try "%s: %s" instead.',
      name,
      value.replace(badStyleValueWithSemicolonPattern, ''),
    );
  }
}

5. 警告：样式值不是数字

function warnStyleValueIsNaN(name, value) {
  if (__DEV__) {
    if (warnedForNaNValue) {
      return;
    }

    warnedForNaNValue = true;
    console.error(
      '`NaN` is an invalid value for the `%s` css style property.',
      name,
    );
  }
}

6. 警告：样式值为无限大

function warnStyleValueIsInfinity(name, value) {
  if (__DEV__) {
    if (warnedForInfinityValue) {
      return;
    }

    warnedForInfinityValue = true;
    console.error(
      '`Infinity` is an invalid value for the `%s` css style property.',
      name,
    );
  }
}