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

IdentifierUse onSpecSupported
AnySome attributes
NoEmptyAnySome attributes
OneLineAnySome attributes
ZeroSome attributes
NumberSome attributes
UintSome attributes
JSONAttributes on some frameworks etc.
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
BrowsingContextNameUse NavigableTargetName instead.Obsolated
BrowsingContextNameOrKeywordUse NavigableTargetNameOrKeyword instead.Obsolated
NavigableTargetNameiframe[name] and moreWHATWG
NavigableTargetNameOrKeyworda[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
}
}

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