Skip to main content

The types API

The types API are you can specify to the rule for attributes and more. For example, determine the type to attrs.[any-attr-name].type option on the invalid-attr rule.

{
"invalid-attr": {
"options": {
"attrs": {
"any-attr-name": {
"type": "Boolean"
}
}
}
}
}

Markuplint regulates types of attributes by either the below:

Kind of types

Type identifiers

IdentifierUse onSpecSupported
AnySome attributes
NoEmptyAnySome attributes
OneLineAnySome attributes
ZeroSome attributes
NumberSome attributes
UintSome attributes
XMLNamesvg|[attributeName] and moreXML
DOMIDThe id attribute and moreWHATWG
FunctionBodyEvent handler attributes🚧
Patterninput[pattern]WHATWG
DateTimetime[datetime] and moreWHATWG
TabIndexThe tabindex attributeWHATWG
BCP47The lang attribute and moreRFC
URLSome attributesWHATWG
AbsoluteURLThe itemtype attribute (as list)WHATWG
HashNameimg[usemap]WHATWG
OneCodePointCharThe accesskey attribute (as list)WHATWG
CustomElementNameThe is attributeWHATWG
BrowsingContextNameiframe[name] and moreWHATWG
BrowsingContextNameOrKeyworda[target] and moreWHATWG
HTTPSchemaURLa[ping] (as list) and moreWHATWG
MIMETypeembed[type] and moreWHATWG
ItemPropThe itemprop attribute (as list)WHATWG
Srcsetimg[srcset] and moreWHATWG
SourceSizeListimg[sizes] and moreWHATWG
IconSizelink[sizes] (as list)WHATWG
AutoCompleteinput[autocomplete] and moreWHATWG
Acceptinput[accept]WHATWG
SerializedPermissionsPolicyiframe[allow]W3C
<css-declaration-list>The style attributeCSS
<class-list>The class attributeSVG
<svg-font-size>Some attributes for SVGCSS🚧
<svg-font-size-adjust>Some attributes for SVGCSS🚧
<'color-profile'>Some attributes for SVGSVG🚧
<'color-rendering'>Some attributes for SVGSVG🚧
<'enable-background'>Some attributes for SVGSVG🚧
<list-of-svg-feature-string>Some attributes for SVGSVG🚧
<animatable-value>Some attributes for SVGSVG🚧
<begin-value-list>Some attributes for SVGSVG🚧
<end-value-list>Some attributes for SVGSVG🚧
<list-of-value>Some attributes for SVGSVG🚧
<clock-value>Some attributes for SVGSMIL🚧
<color-matrix>Some attributes for SVGW3C
<dasharray>Some attributes for SVGSVG
<key-points>Some attributes for SVGSVG
<key-splines>Some attributes for SVGSVG
<key-times>Some attributes for SVGSVG
<system-language>Some attributes for SVGSVG
<origin>Some attributes for SVGSMIL
<svg-path>Some attributes for SVGSVG🚧
<points>Some attributes for SVGSVG
<preserve-aspect-ratio>Some attributes for SVGSVG
<view-box>Some attributes for SVGSVG
<rotate>Some attributes for SVGSVG
<text-coordinate>Some attributes for SVGSVG
<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
}
}

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;

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;
}