color-types

color-types

autofixable: no

Block or require certain color types to be used in stylesheets.

• By default, blocks all color literals

  "plugin-color/color-types": true

Color Types

This is a required property.

"plugin-color/color-types": {
    "mode": "require",
    // type strings go in this array
    "types": ["rgb", "hsl", etc.]
}

All available color types:

• "hex"
• "named"
• "rgb"
• "rgba"
• "hsl"
• "hsla"
• "hsv"
• "hsva"
• "argb"

Modes

• Require

  "plugin-color/color-types": {
      "mode": "require",
      "types": [...],
  }

  Example: require all color usage to be in rgb

  "plugin-color/color-types": {
      "mode": "require",
      "types": ["rgb"],
  }

• Block

  "plugin-color/color-types": {
      "mode": "block",
      "types": [...],
  }

  Example: block all rgb usage (and allow all other formats)

  "plugin-color/color-types": {
      "mode": "block",
      "types": ["rgb"],
  }

Examples

• Defaults:

   "plugin-color/color-types": true // same as all color types being blocked

  • Good

    div {
        color: @myColorVar;
    }

    div {
        color: var(--my-color-var);
    }

    div {
        color: $myColorVar;
    }

  • Bad

    div {
        color: #000;
    }

    div {
        color: rgb(255, 255, 255);
    }

    div {
        color: blue;
    }

• require mode with single type:

   "plugin-color/color-types": {
      "mode": "require",
      "types": ["rgb"]
  }

  • Good

    div {
        color: rgb(255, 255, 255);
    }

  • Bad

    div {
        color: #000;
    }

    div {
        color: rgba(255, 255, 255, 0.4);
    }

    div {
        color: blue;
    }

• require mode with multiple type:

   "plugin-color/color-types": {
      "mode": "require",
      "types": ["rgb", "named"]
  }

  • Good

    div {
        color: rgb(255, 255, 255);
    }

    div {
        color: blue;
    }

  • Bad

    div {
        color: #000;
    }

    div {
        color: rgba(255, 255, 255, 0.4);
    }

    div {
        color: blue;
    }

• block mode with single type:

   "plugin-color/color-types": {
      "mode": "block",
      "types": ["hex"]
  }

  • Good

    div {
        color: rgb(255, 255, 255);
    }

    div {
        color: blue;
    }

  • Bad

    div {
        color: #000;
    }

    div {
        color: #0000ff;
    }

• block mode with multiple types:

   "plugin-color/color-types": {
      "mode": "block",
      "types": ["hex", "rgba"]
  }

  • Good

    div {
        color: rgb(255, 255, 255);
    }

    div {
        color: blue;
    }

  • Bad

    div {
        color: #000;
    }

    div {
        color: #0000ff;
    }

    div {
        color: rgba(0, 0, 255, 0.5);
    }