タイプAPI

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

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

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

タイプの種類

識別子

識別子	主に使用されている箇所	仕様	サポート
Any	いくつかの属性		✅
NoEmptyAny	いくつかの属性		✅
OneLineAny	いくつかの属性		✅
Zero	いくつかの属性		✅
Number	いくつかの属性		✅
Uint	いくつかの属性		✅
JSON	いくつかフレームワークの属性など		✅
XMLName	svg|[attributeName]他	XML	✅
DOMID	id属性ほか	WHATWG	✅
FunctionBody	Event handler属性s		🚧
Pattern	input[pattern]	WHATWG	✅
DateTime	time[datetime]ほか	WHATWG	✅
TabIndex	tabindex属性	WHATWG	✅
BCP47	lang属性ほか	RFC	✅
URL	いくつかの属性	WHATWG	✅
AbsoluteURL	itemtype属性（リストとして）	WHATWG	✅
HashName	img[usemap]	WHATWG	✅
OneCodePointChar	accesskey属性（リストとして）	WHATWG	✅
CustomElementName	is属性	WHATWG	✅
BrowsingContextName	代わりにNavigableTargetNameを使ってください	廃止	✅
BrowsingContextNameOrKeyword	代わりにNavigableTargetNameOrKeywordを使ってください	廃止	✅
NavigableTargetName	iframe[name]ほか	WHATWG	✅
NavigableTargetNameOrKeyword	a[target]ほか	WHATWG	✅
HTTPSchemaURL	a[ping]ほか（リストとして）	WHATWG	✅
MIMEType	embed[type]ほか	WHATWG	✅
HTTPEquivRefresh	http-equiv=refreshのmeta[content]	WHATWG	✅
HTTPEquivContentType	http-equiv=content-typeのmeta[content]	WHATWG	✅
ContentSecurityPolicy	http-equiv=content-security-policyのmeta[content]	W3C	✅
ItemProp	itemprop属性（リストとして）	WHATWG	✅
Srcset	img[srcset]ほか	WHATWG	✅
SourceSizeList	img[sizes]ほか	WHATWG	✅
IconSize	link[sizes]（リストとして）	WHATWG	✅
AutoComplete	input[autocomplete]ほか	WHATWG	✅
Accept	input[accept]	WHATWG	✅
SerializedPermissionsPolicy	iframe[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;
}