diff --git a/packages/@d-zero/stylelint-config/values.js b/packages/@d-zero/stylelint-config/values.js index 80f1602d..f1a68d99 100644 --- a/packages/@d-zero/stylelint-config/values.js +++ b/packages/@d-zero/stylelint-config/values.js @@ -8,11 +8,104 @@ const PERCENTATE_UNITS = `(?:%|${VIEWPORT_PERCENTAGE_LENGTHS})`; module.exports = { plugins: ['@d-zero/stylelint-rules'], rules: { - 'declaration-property-value-disallowed-list': { - '/^(?:color|background|background-color|border|border-color|outline|outline-color)$/': - [/#[0-9a-f]{3}/, /(?:rgb|hsl)a?\(.+?\)/], - content: [/^"\\[0-9a-f]{1,6}"$/i], - }, + 'declaration-property-value-disallowed-list': [ + { + display: [ + /* @see https://drafts.csswg.org/css-display/#display-value-summary */ + 'block', + 'flow-root', + 'inline', + 'inline-block', + 'list-item', + 'inline list-item', + 'flex', + 'inline-flex', + 'grid', + 'inline-grid', + 'ruby', + 'table', + 'inline-table', + ], + 'z-index': ['/^-?\\d+$/'], + '/^(?:color|background|background-color|border|border-color|outline|outline-color)$/': + [/#[0-9a-f]{3}/, /(?:rgb|hsl)a?\(.+?\)/], + content: [/^"\\[0-9a-f]{1,6}"$/i], + }, + { + message: (name, value) => { + switch (name) { + case 'display': { + let multiValue = ''; + switch (value) { + case 'block': { + multiValue = 'block flow'; + break; + } + case 'flow-root': { + multiValue = 'block flow-root'; + break; + } + case 'inline': { + multiValue = 'inline flow'; + break; + } + case 'inline-block': { + multiValue = 'inline flow-root'; + break; + } + case 'list-item': { + multiValue = 'block flow list-item'; + break; + } + case 'inline list-item': { + multiValue = 'inline flow list-item'; + break; + } + case 'flex': { + multiValue = 'block flex'; + break; + } + case 'inline-flex': { + multiValue = 'inline flex'; + break; + } + case 'grid': { + multiValue = 'block grid'; + break; + } + case 'inline-grid': { + multiValue = 'inline grid'; + break; + } + case 'ruby': { + multiValue = 'inline ruby'; + break; + } + case 'table': { + multiValue = 'block table'; + break; + } + case 'inline-table': { + multiValue = 'inline table'; + break; + } + } + return `\`${value}\`の代わりに複数キーワード構文\`${multiValue}\`を使用してください。`; + } + case 'z-index': { + return `数値の\`${name}\`ではなくグローバルで定義されたCSS変数を使用してください。`; + } + case 'content': { + return `Unicode値\`${value}\`を指定せず、表示したいテキストをそのまま指定してください。`; + } + default: { + return `ハードコードされた値\`${value}\`の代わりにCSS変数を使用してください。`; + } + } + }, + severity: 'warning', + }, + ], 'declaration-property-value-allowed-list': { 'font-size': [ 'inherit', @@ -33,19 +126,53 @@ module.exports = { 'flex-shrink': ['0', '1'], }, 'unit-disallowed-list': [ - 'ex', - 'ch', - 'mm', - 'q', - 'cm', - 'in', - 'pt', - 'pc', - 'vm', - 's', - 'grad', - 'rad', - 'turn', + [ + 'ex', + 'ch', + 'mm', + 'q', + 'cm', + 'in', + 'pt', + 'pc', + 'vm', + 's', + 'grad', + 'rad', + 'turn', + 'vw', + 'vh', + 'vi', + 'vb', + 'vmin', + 'vmax', + ], + { + message: (unit) => { + const recommendationMap = { + ex: 'em, rem', + ch: 'em, rem', + mm: 'px, rem', + q: 'px, rem', + cm: 'px, rem', + in: 'px, rem', + pt: 'px, rem', + pc: 'px, rem', + s: 'ms', + grad: 'deg', + rad: 'deg', + turn: 'deg', + vw: 'svw, dvw, lvw', + vh: 'svh, dvh, lvh', + vi: 'svi, dvi, lvi', + vb: 'svb, dvb, lvb', + vmin: 'svmin, dvmin, lvmin', + vmax: 'svmax, dvmax, lvmax', + }; + return `\`${unit}\`は使用しないでください。代わりに\`${recommendationMap[unit]}\`を検討してください。`; + }, + severity: 'warning', + }, ], 'value-keyword-case': [ 'lower', diff --git a/test/cli.spec.mjs b/test/cli.spec.mjs index 11caaf7d..522e4837 100644 --- a/test/cli.spec.mjs +++ b/test/cli.spec.mjs @@ -264,7 +264,9 @@ describe('stylelint', () => { 'test/fixtures/stylelint/values.scss:18:15 Unexpected value "200%" for type "percentage" (@d-zero/declaration-value-type-disallowed-list)', 'test/fixtures/stylelint/values.scss:19:15 Unexpected value "999%" for type "percentage" (@d-zero/declaration-value-type-disallowed-list)', 'test/fixtures/stylelint/values.scss:20:15 Unexpected value "1000%" for type "percentage" (@d-zero/declaration-value-type-disallowed-list)', + 'test/fixtures/stylelint/values.scss:21:34 `vw`は使用しないでください。代わりに`svw, dvw, lvw`を検討してください。 (unit-disallowed-list)', 'test/fixtures/stylelint/values.scss:22:31 Unexpected value "1vw" for type "length" (@d-zero/declaration-value-type-disallowed-list)', + 'test/fixtures/stylelint/values.scss:22:32 `vw`は使用しないでください。代わりに`svw, dvw, lvw`を検討してください。 (unit-disallowed-list)', ]); }); @@ -279,29 +281,39 @@ describe('stylelint', () => { 'test/fixtures/stylelint/unit.scss:13:13 Unexpected value "1.2em" for property "font-size" (declaration-property-value-allowed-list)', 'test/fixtures/stylelint/unit.scss:14:13 Unexpected value "0.5em" for property "font-size" (declaration-property-value-allowed-list)', 'test/fixtures/stylelint/unit.scss:15:13 Unexpected value "4vw" for property "font-size" (declaration-property-value-allowed-list)', + 'test/fixtures/stylelint/unit.scss:15:14 `vw`は使用しないでください。代わりに`svw, dvw, lvw`を検討してください。 (unit-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:20:17 `vw`は使用しないでください。代わりに`svw, dvw, lvw`を検討してください。 (unit-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:23:26 `vw`は使用しないでください。代わりに`svw, dvw, lvw`を検討してください。 (unit-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:26:40 `vw`は使用しないでください。代わりに`svw, dvw, lvw`を検討してください。 (unit-disallowed-list)', 'test/fixtures/stylelint/unit.scss:32:13 Unexpected value "16px" for property "font-size" (declaration-property-value-allowed-list)', 'test/fixtures/stylelint/unit.scss:34:13 Unexpected value "16ex" for property "font-size" (declaration-property-value-allowed-list)', - 'test/fixtures/stylelint/unit.scss:34:15 Unexpected unit "ex" (unit-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:34:15 `ex`は使用しないでください。代わりに`em, rem`を検討してください。 (unit-disallowed-list)', 'test/fixtures/stylelint/unit.scss:35:13 Unexpected value "16pt" for property "font-size" (declaration-property-value-allowed-list)', - 'test/fixtures/stylelint/unit.scss:35:15 Unexpected unit "pt" (unit-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:35:15 `pt`は使用しないでください。代わりに`px, rem`を検討してください。 (unit-disallowed-list)', 'test/fixtures/stylelint/unit.scss:36:13 Unexpected value "16cm" for property "font-size" (declaration-property-value-allowed-list)', - 'test/fixtures/stylelint/unit.scss:36:15 Unexpected unit "cm" (unit-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:36:15 `cm`は使用しないでください。代わりに`px, rem`を検討してください。 (unit-disallowed-list)', 'test/fixtures/stylelint/unit.scss:45:15 Expected "400" to be "normal" (font-weight-notation)', 'test/fixtures/stylelint/unit.scss:57:16 Unexpected unit (length-zero-no-unit)', + 'test/fixtures/stylelint/unit.scss:63:21 `vw`は使用しないでください。代わりに`svw, dvw, lvw`を検討してください。 (unit-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:64:21 `vh`は使用しないでください。代わりに`svh, dvh, lvh`を検討してください。 (unit-disallowed-list)', 'test/fixtures/stylelint/unit.scss:67:15 Unexpected value "5%" for type "percentage" (@d-zero/declaration-value-type-disallowed-list)', 'test/fixtures/stylelint/unit.scss:68:15 Unexpected value "50%" for type "percentage" (@d-zero/declaration-value-type-disallowed-list)', 'test/fixtures/stylelint/unit.scss:69:14 Unexpected value "33.3%" for type "percentage" (@d-zero/declaration-value-type-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:72:34 `vw`は使用しないでください。代わりに`svw, dvw, lvw`を検討してください。 (unit-disallowed-list)', 'test/fixtures/stylelint/unit.scss:74:36 Unexpected value "54.2vw" for type "length-percentage" (@d-zero/declaration-value-type-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:74:40 `vw`は使用しないでください。代わりに`svw, dvw, lvw`を検討してください。 (unit-disallowed-list)', 'test/fixtures/stylelint/unit.scss:75:23 Unexpected value "2vw" for type "length" (@d-zero/declaration-value-type-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:75:24 `vw`は使用しないでください。代わりに`svw, dvw, lvw`を検討してください。 (unit-disallowed-list)', 'test/fixtures/stylelint/unit.scss:76:23 Unexpected value "50vh" for type "length" (@d-zero/declaration-value-type-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:76:25 `vh`は使用しないでください。代わりに`svh, dvh, lvh`を検討してください。 (unit-disallowed-list)', 'test/fixtures/stylelint/unit.scss:77:19 Unexpected value "105%" for type "length" (@d-zero/declaration-value-type-disallowed-list)', 'test/fixtures/stylelint/unit.scss:78:19 Unexpected value "120%" for type "length" (@d-zero/declaration-value-type-disallowed-list)', 'test/fixtures/stylelint/unit.scss:79:19 Unexpected value "200%" for type "length" (@d-zero/declaration-value-type-disallowed-list)', 'test/fixtures/stylelint/unit.scss:80:19 Unexpected value "1000%" for type "length" (@d-zero/declaration-value-type-disallowed-list)', 'test/fixtures/stylelint/unit.scss:81:17 Unexpected value "105%" for type "length" (@d-zero/declaration-value-type-disallowed-list)', - 'test/fixtures/stylelint/unit.scss:83:17 Unexpected unit "ex" (unit-disallowed-list)', - 'test/fixtures/stylelint/unit.scss:84:17 Unexpected unit "pt" (unit-disallowed-list)', - 'test/fixtures/stylelint/unit.scss:85:17 Unexpected unit "cm" (unit-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:83:17 `ex`は使用しないでください。代わりに`em, rem`を検討してください。 (unit-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:84:17 `pt`は使用しないでください。代わりに`px, rem`を検討してください。 (unit-disallowed-list)', + 'test/fixtures/stylelint/unit.scss:85:17 `cm`は使用しないでください。代わりに`px, rem`を検討してください。 (unit-disallowed-list)', 'test/fixtures/stylelint/unit.scss:95:8 Unexpected value "0 2 calc(100% / 3)" for property "flex" (declaration-property-value-allowed-list)', 'test/fixtures/stylelint/unit.scss:98:13 Unexpected value "2" for property "flex-grow" (declaration-property-value-allowed-list)', 'test/fixtures/stylelint/unit.scss:101:15 Unexpected value "2" for property "flex-shrink" (declaration-property-value-allowed-list)',