The types API

The types API are you can specify to the rule for attributes and more. For example, determine the type to allowAttrs and disallowAttrs options on the invalid-attr rule.

{
  "invalid-attr": {
    "options": {
      "allowAttrs": [
        {
          "name": "any-attr-name",
          "value": {
            "type": "Boolean"
          }
        }
      ]
    }
  }
}

Markuplint regulates types of attributes by either the below:

Kind of types

Type identifiers

Identifier	Use on	Spec	Supported
Any	Some attributes		✅
NoEmptyAny	Some attributes		✅
OneLineAny	Some attributes		✅
Zero	Some attributes		✅
Number	Some attributes		✅
Uint	Some attributes		✅
JSON	Attributes on some frameworks etc.		✅
XMLName	svg|[attributeName] and more	XML	✅
DOMID	The id attribute and more	WHATWG	✅
FunctionBody	Event handler attributes		🚧
Pattern	input[pattern]	WHATWG	✅
DateTime	time[datetime] and more	WHATWG	✅
TabIndex	The tabindex attribute	WHATWG	✅
BCP47	The lang attribute and more	RFC	✅
URL	Some attributes	WHATWG	✅
AbsoluteURL	The itemtype attribute (as list)	WHATWG	✅
HashName	img[usemap]	WHATWG	✅
OneCodePointChar	The accesskey attribute (as list)	WHATWG	✅
CustomElementName	The is attribute	WHATWG	✅
BrowsingContextName	Use NavigableTargetName instead.	Obsolated	✅
BrowsingContextNameOrKeyword	Use NavigableTargetNameOrKeyword instead.	Obsolated	✅
NavigableTargetName	iframe[name] and more	WHATWG	✅
NavigableTargetNameOrKeyword	a[target] and more	WHATWG	✅
HTTPSchemaURL	a[ping] (as list) and more	WHATWG	✅
MIMEType	embed[type] and more	WHATWG	✅
ItemProp	The itemprop attribute (as list)	WHATWG	✅
Srcset	img[srcset] and more	WHATWG	✅
SourceSizeList	img[sizes] and more	WHATWG	✅
IconSize	link[sizes] (as list)	WHATWG	✅
AutoComplete	input[autocomplete] and more	WHATWG	✅
Accept	input[accept]	WHATWG	✅
SerializedPermissionsPolicy	iframe[allow]	W3C	✅
<css-declaration-list>	The style attribute	CSS	✅
<class-list>	The class attribute	SVG	✅
<svg-font-size>	Some attributes for SVG	CSS	🚧
<svg-font-size-adjust>	Some attributes for SVG	CSS	🚧
<'color-profile'>	Some attributes for SVG	SVG	🚧
<'color-rendering'>	Some attributes for SVG	SVG	🚧
<'enable-background'>	Some attributes for SVG	SVG	🚧
<list-of-svg-feature-string>	Some attributes for SVG	SVG	🚧
<animatable-value>	Some attributes for SVG	SVG	🚧
<begin-value-list>	Some attributes for SVG	SVG	🚧
<end-value-list>	Some attributes for SVG	SVG	🚧
<list-of-value>	Some attributes for SVG	SVG	🚧
<clock-value>	Some attributes for SVG	SMIL	🚧
<color-matrix>	Some attributes for SVG	W3C	✅
<dasharray>	Some attributes for SVG	SVG	✅
<key-points>	Some attributes for SVG	SVG	✅
<key-splines>	Some attributes for SVG	SVG	✅
<key-times>	Some attributes for SVG	SVG	✅
<system-language>	Some attributes for SVG	SVG	✅
<origin>	Some attributes for SVG	SMIL	✅
<svg-path>	Some attributes for SVG	SVG	🚧
<points>	Some attributes for SVG	SVG	✅
<preserve-aspect-ratio>	Some attributes for SVG	SVG	✅
<view-box>	Some attributes for SVG	SVG	✅
<rotate>	Some attributes for SVG	SVG	✅
<text-coordinate>	Some attributes for SVG	SVG	✅
<list-of-lengths>	Some attributes for SVG		✅
<list-of-numbers>	Some attributes for SVG		✅
<list-of-percentages>	Some attributes for SVG		✅
<number-optional-number>	Some attributes for SVG		✅

In addition, you can use types CSSTree defined.

caution

You must specify an identifier as a string in its entirety.

For example, must specify as below if <'color-profile'>:

{
  "type": "<'color-profile'>"
}

It also needs <, >, and '.

List of a type

• Specify a token type
• Specify a separator either space of comma
• Optionally, specify whether it requires uniqueness
• Optionally, specify whether it is orderable
• Optionally, specify whether it is case-sensitive
• Optionally, specify whether it doesn't matter empty
• Optionally, specify the range of items

{
  "type": {
    "token": "URL",
    "separator": "space",
    "allowEmpty": true,
    "ordered": true,
    "unique": true,
    "caseInsensitive": true
  }
}

Enumeration

• Specify a enumerated list
• Optionally, specify whether it is case-sensitive
• Optionally, specify a state of an invalid default value
• Optionally, specify a state of a missing default value

{
  "type": {
    "enum": ["text", "radio", "checkbox"],
    "caseInsensitive": false,
    "invalidValueDefault": "text",
    "missingValueDefault": "text"
  }
}

Number

• Specify a type either float of integer
• Optionally, specify a number that greater than or greater than equal
• Optionally, specify a number that less than or less than equal
• Optionally, specify whether it can be clamped

{
  "type": {
    "type": "float",
    "gt": 0,
    "lte": 100,
    "clampable": true
  }
}

Directive

Allows separating and individually validating directives and tokens within attribute values. Ensures precise validation for complex attributes by checking each part according to its rules.

• Specify an array of directive affixes
  • Evaluate as the prefix if its type is a string
  • Specify a regular expression if a complex directive is needed
  • Specify a regular expression with a named group token if a directive with a suffix is needed
• Specify a token type
• Optionally, specify a reference URL

{
  "type": {
    "directive": [
      "directive:",
      "command ",
      "/^regexp\\([a-z0-9]+\\)\\s+/i",
      "/^regexp\\s+(?<token>[a-z]+)\\s+suffix$/"
    ],
    "token": "MIMEType",
    "ref": "https://example.com/#document"
  }
}

Multiple types

Can specify types multiple as array. It is an OR condition.

{
  "type": [
    "Number",
    "<color>",
    {
      "enum": ["A", "B", "C"]
    }
  ]
}

Interface

type Type = TypeIdentifier | List | Enum | Number | Directive;

type TypeIdentifier = KeywordType | CSSSyntax;
type KeywordType = string;
type CSSSyntax = string;

interface List {
  token: TypeIdentifier | Enum | Number;
  separator: 'space' | 'comma';
  allowEmpty?: boolean;
  ordered?: boolean;
  unique?: boolean;
  caseInsensitive?: boolean;
}

interface Enum {
  enum: string[];
  caseInsensitive?: boolean;
  invalidValueDefault?: string;
  missingValueDefault?: string;
}

interface Number {
  type: 'float' | 'integer';
  gt?: number;
  gte?: number;
  lt?: number;
  lte?: number;
  clampable?: boolean;
}

interface Directive {
  directive: string[];
  token: Type;
  ref?: string;
}