createDangerousStringForStyles() — react Function Reference

Architecture documentation for the createDangerousStringForStyles() function in CSSPropertyOperations.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ createDangerousStringForStyles() — react Function Reference

Dependency Diagram

graph TD
  4b35d720_2de8_1dd9_f463_a3b983e3041f["createDangerousStringForStyles()"]
  e3e314a2_4cee_1a10_2d68_791d5d66f89e["CSSPropertyOperations.js"]
  4b35d720_2de8_1dd9_f463_a3b983e3041f -->|defined in| e3e314a2_4cee_1a10_2d68_791d5d66f89e
  67b4072c_3549_0182_2962_827546c9b302["diffHydratedStyles()"]
  67b4072c_3549_0182_2962_827546c9b302 -->|calls| 4b35d720_2de8_1dd9_f463_a3b983e3041f
  30c2463e_55b0_764b_3b35_078766f5cd6a["hyphenateStyleName()"]
  4b35d720_2de8_1dd9_f463_a3b983e3041f -->|calls| 30c2463e_55b0_764b_3b35_078766f5cd6a
  style 4b35d720_2de8_1dd9_f463_a3b983e3041f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/client/CSSPropertyOperations.js lines 26–66

export function createDangerousStringForStyles(styles) {
  if (__DEV__) {
    let serialized = '';
    let delimiter = '';
    for (const styleName in styles) {
      if (!styles.hasOwnProperty(styleName)) {
        continue;
      }
      const value = styles[styleName];
      if (value != null && typeof value !== 'boolean' && value !== '') {
        const isCustomProperty = styleName.indexOf('--') === 0;
        if (isCustomProperty) {
          if (__DEV__) {
            checkCSSPropertyStringCoercion(value, styleName);
          }
          serialized += delimiter + styleName + ':' + ('' + value).trim();
        } else {
          if (
            typeof value === 'number' &&
            value !== 0 &&
            !isUnitlessNumber(styleName)
          ) {
            serialized +=
              delimiter + hyphenateStyleName(styleName) + ':' + value + 'px';
          } else {
            if (__DEV__) {
              checkCSSPropertyStringCoercion(value, styleName);
            }
            serialized +=
              delimiter +
              hyphenateStyleName(styleName) +
              ':' +
              ('' + value).trim();
          }
        }
        delimiter = ';';
      }
    }
    return serialized || null;
  }
}