HTML sanitization removes allowed attributes and styles

The html sanitization leaves only <span>SAMPLE text</span> from <span style="color: rgb(230, 0, 0);">SAMPLE text</span>. The text is sanitized by both sanitize and sanitizeforCards. Why do the sanitizers remove style="color: rgb(230, 0, 0);" from the span tag?

My sanitizer is below:

import sanitizeHtml from 'sanitize-html'

const sanitizerConfig = {
  allowedTags: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'div', 'b', 'i', 'strong', 'em', 'span', 'ul', 'ol', 'li', 'a',
    'u', 's', 'br'],
  allowedAttributes: {
    a: ['href', 'target', 'style'],
    span: ['style'],
    h1: ['style'],
    h2: ['style'],
    h3: ['style'],
    h4: ['style'],
    h5: ['style'],
    h6: ['style'],
    p: ['style'],
    div: ['style'],
    b: ['style'],
    i: ['style'],
    strong: ['style'],
    em: ['style'],
    ul: ['style'],
    ol: ['style'],
    li: ['style'],
    u: ['style'],
    s: ['style']
  },
  allowedStyles: {
    '*': {
      'text-align': [/^left$/, /^right$/, /^center$/]
    },
    span: {
      'text-decoration': [/^underline$/],
      color: true
    }
  }
}
const sanitizerConfigForCards = {
  allowedTags: ['p', 'div', 'b', 'i', 'strong', 'em', 'span', 'ul', 'ol', 'li'],
  allowedAttributes: {
    span: ['style']
  },
  allowedStyles: {
    span: {
      color: true
    }
  }
}

export const sanitize = (content) => sanitizeHtml(content, sanitizerConfig)
/** Sanitizes user-generated html content for displaying it inside of card components. */
export const sanitizeforCard = (content) => sanitizeHtml(content, sanitizerConfigForCards)

From what I found in the documentation for sanitize-html, there is no wildcard option for allowedStyles like what you were trying to achieve using color: true.

Instead, try this:

'color': [/^#(0x)?[0-9a-f]+$/i, /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/],