メインコンテンツまでスキップ

タイプAPI

タイプAPIは、属性などのルールに指定できる型情報を定義していたり、評価するAPIを提供しています。 例えば、invalid-attrルールのallowAttrsdisallowAttrsオプションで使用されています。

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

Markuplintは、以下のいずれかの方法で属性の種類を管理しています。

タイプの種類

識別子

識別子主に使用されている箇所仕様サポート
Anyいくつかの属性
NoEmptyAnyいくつかの属性
OneLineAnyいくつかの属性
Zeroいくつかの属性
Numberいくつかの属性
Uintいくつかの属性
JSONいくつかフレームワークの属性など
XMLNamesvg|[attributeName]XML
DOMIDid属性ほかWHATWG
FunctionBodyEvent handler属性s🚧
Patterninput[pattern]WHATWG
DateTimetime[datetime]ほかWHATWG
TabIndextabindex属性WHATWG
BCP47lang属性ほかRFC
URLいくつかの属性WHATWG
AbsoluteURLitemtype属性(リストとして)WHATWG
HashNameimg[usemap]WHATWG
OneCodePointCharaccesskey属性(リストとして)WHATWG
CustomElementNameis属性WHATWG
BrowsingContextName代わりにNavigableTargetNameを使ってください廃止
BrowsingContextNameOrKeyword代わりにNavigableTargetNameOrKeywordを使ってください廃止
NavigableTargetNameiframe[name]ほかWHATWG
NavigableTargetNameOrKeyworda[target]ほかWHATWG
HTTPSchemaURLa[ping]ほか(リストとして)WHATWG
MIMETypeembed[type]ほかWHATWG
ItemPropitemprop属性(リストとして)WHATWG
Srcsetimg[srcset]ほかWHATWG
SourceSizeListimg[sizes]ほかWHATWG
IconSizelink[sizes](リストとして)WHATWG
AutoCompleteinput[autocomplete]ほかWHATWG
Acceptinput[accept]WHATWG
SerializedPermissionsPolicyiframe[allow]W3C
<css-declaration-list>style属性CSS
<class-list>class属性SVG
<svg-font-size>SVGがいくつかの属性CSS🚧
<svg-font-size-adjust>SVGがいくつかの属性CSS🚧
<'color-profile'>SVGがいくつかの属性SVG🚧
<'color-rendering'>SVGがいくつかの属性SVG🚧
<'enable-background'>SVGがいくつかの属性SVG🚧
<list-of-svg-feature-string>SVGがいくつかの属性SVG🚧
<animatable-value>SVGがいくつかの属性SVG🚧
<begin-value-list>SVGがいくつかの属性SVG🚧
<end-value-list>SVGがいくつかの属性SVG🚧
<list-of-value>SVGがいくつかの属性SVG🚧
<clock-value>SVGがいくつかの属性SMIL🚧
<color-matrix>SVGがいくつかの属性W3C
<dasharray>SVGがいくつかの属性SVG
<key-points>SVGがいくつかの属性SVG
<key-splines>SVGがいくつかの属性SVG
<key-times>SVGがいくつかの属性SVG
<system-language>SVGがいくつかの属性SVG
<origin>SVGがいくつかの属性SMIL
<svg-path>SVGがいくつかの属性SVG🚧
<points>SVGがいくつかの属性SVG
<preserve-aspect-ratio>SVGがいくつかの属性SVG
<view-box>SVGがいくつかの属性SVG
<rotate>SVGがいくつかの属性SVG
<text-coordinate>SVGがいくつかの属性SVG
<list-of-lengths>SVGがいくつかの属性
<list-of-numbers>SVGがいくつかの属性
<list-of-percentages>SVGがいくつかの属性
<number-optional-number>SVGがいくつかの属性

また、**CSSTree**が定義している型を使用できます。

注意

識別子は、文字列のまま指定する必要があります。

例えば、<'color-profile'>の場合、以下のように指定する必要があります。

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

<>'も必要です。

リスト型

  • トークンのタイプ(識別子)を指定します
  • 区切り文字をspaceまたはcommaで指定します
  • 任意に、一意性を必要とするかどうかを指定します
  • 任意に、順序付け可能かどうかを指定します
  • 任意に、大文字・小文字を区別するか指定します
  • 任意に、空白を問題にしないかどうかを指定します
  • 任意に、項目の範囲を指定します
{
"type": {
"token": "URL",
"separator": "space",
"allowEmpty": true,
"ordered": true,
"unique": true,
"caseInsensitive": true
}
}

列挙型

  • 列挙されたリストを指定する
  • 任意に、大文字と小文字を区別するかどうかを指定する
  • 任意に、デフォルト値が無効な場合の状態を指定します
  • 任意に、デフォルト値がない場合の状態を指定する
{
"type": {
"enum": ["text", "radio", "checkbox"],
"caseInsensitive": false,
"invalidValueDefault": "text",
"missingValueDefault": "text"
}
}

数値型

  • floatまたはintegerのどちらかの型を指定する
  • 任意に、等しいか等しいより大きい数を指定します
  • 任意に、等しいか等しいより小さい数値を指定します
  • 任意に、範囲外の数値を丸めるかどうかを指定します
{
"type": {
"type": "float",
"gt": 0,
"lte": 100,
"clampable": true
}
}

ディレクティブ型

属性値内のディレクティブとトークンを分離し、個別に検証できる機能。複雑な属性に対して、それぞれの部分を正確に検証します。

  • ディレクティブ接辞の配列を指定します
    • 文字列の場合、接頭辞として評価します
    • 複雑なディレクティブが必要な場合、正規表現を指定します
    • 接尾辞を持つディレクティブが必要な場合、名前付きグループ token を含む正規表現を指定します
  • トークンの型を指定します
  • 任意に、参照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"
}
}

複数型

複数の型を配列で指定できます。条件はORとなります。

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

インターフェイス

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