Skip to content

Commit

Permalink
Add *-pattern custom message formatting (#6391)
Browse files Browse the repository at this point in the history 
- `custom-media-pattern`
- `custom-property-pattern`
- `keyframes-name-pattern`
- `selector-class-pattern`
- `selector-id-pattern`
- `selector-nested-pattern`

Also, this commit makes the rules' message more unified and simpler.

Co-authored-by: Richard Hallows <jeddy3@users.noreply.github.com>
  • Loading branch information
@ybiquitous @jeddy3
ybiquitous and jeddy3 committed Oct 4, 2022
1 parent eccf683 commit cf04b2b
Show file tree
Hide file tree
Showing 9 changed files with 63 additions and 46 deletions.
5 changes: 5 additions & 0 deletions .changeset/many-tools-build.md
View file
@@ -0,0 +1,5 @@
---
"stylelint": minor
---

Added: `*-pattern` custom message formatting
16 changes: 8 additions & 8 deletions lib/rules/custom-media-pattern/__tests__/index.js
View file
Expand Up @@ -27,31 +27,31 @@ testRule({
reject: [
{
code: '@custom-media --foa-bar (min-width: 0);',
message: messages.expected(/foo-.+/),
message: messages.expected('--foa-bar', /foo-.+/),
line: 1,
column: 15,
endLine: 1,
endColumn: 24,
},
{
code: '@cUsToM-mEdIa --foa-bar (min-width: 0);',
message: messages.expected(/foo-.+/),
message: messages.expected('--foa-bar', /foo-.+/),
line: 1,
column: 15,
endLine: 1,
endColumn: 24,
},
{
code: '@CUSTOM-MEDIA --foa-bar (min-width: 0);',
message: messages.expected(/foo-.+/),
message: messages.expected('--foa-bar', /foo-.+/),
line: 1,
column: 15,
endLine: 1,
endColumn: 24,
},
{
code: '@custom-media --foa (min-width: 0);',
message: messages.expected(/foo-.+/),
message: messages.expected('--foa', /foo-.+/),
line: 1,
column: 15,
endLine: 1,
Expand Down Expand Up @@ -79,15 +79,15 @@ testRule({
reject: [
{
code: '@custom-media --foa-bar (min-width: 0);',
message: messages.expected('foo-.+'),
message: messages.expected('--foa-bar', 'foo-.+'),
line: 1,
column: 15,
endLine: 1,
endColumn: 24,
},
{
code: '@custom-media --foa (min-width: 0);',
message: messages.expected('foo-.+'),
message: messages.expected('--foa', 'foo-.+'),
line: 1,
column: 15,
endLine: 1,
Expand All @@ -112,15 +112,15 @@ testRule({
reject: [
{
code: '@custom-media --ape-ageLess',
message: messages.expected(/^[A-Z][a-z]+-[a-z][a-zA-Z]+$/),
message: messages.expected('--ape-ageLess', /^[A-Z][a-z]+-[a-z][a-zA-Z]+$/),
line: 1,
column: 15,
endLine: 1,
endColumn: 28,
},
{
code: '@custom-media --Ape-AgeLess',
message: messages.expected(/^[A-Z][a-z]+-[a-z][a-zA-Z]+$/),
message: messages.expected('--Ape-AgeLess', /^[A-Z][a-z]+-[a-z][a-zA-Z]+$/),
line: 1,
column: 15,
endLine: 1,
Expand Down
13 changes: 6 additions & 7 deletions lib/rules/custom-media-pattern/index.js
View file
Expand Up @@ -9,7 +9,7 @@ const { isRegExp, isString } = require('../../utils/validateTypes');
const ruleName = 'custom-media-pattern';

const messages = ruleMessages(ruleName, {
expected: (pattern) => `Expected custom media query name to match pattern "${pattern}"`,
expected: (mediaName, pattern) => `Expected "${mediaName}" to match pattern "${pattern}"`,
});

const meta = {
Expand All @@ -35,25 +35,24 @@ const rule = (primary) => {
return;
}

const match = atRule.params.match(/^--(\S+)\b/);
const [fullName, customMediaName] = atRule.params.match(/^--(\S+)\b/) || [];

if (match == null || match[0] == null) {
if (fullName === undefined || customMediaName === undefined) {
throw new Error(`Unexpected at-rule params: "${atRule.params}"`);
}

const customMediaName = match[1];

if (regexpPattern.test(customMediaName)) {
return;
}

const index = atRuleParamIndex(atRule);

report({
message: messages.expected(primary),
message: messages.expected,
messageArgs: [fullName, primary],
node: atRule,
index,
endIndex: index + match[0].length,
endIndex: index + fullName.length,
result,
ruleName,
});
Expand Down
36 changes: 24 additions & 12 deletions lib/rules/custom-property-pattern/__tests__/index.js
View file
Expand Up @@ -28,39 +28,39 @@ testRule({
reject: [
{
code: ':root { --boo-bar: 0; }',
message: messages.expected(/foo-.+/),
message: messages.expected('--boo-bar', /foo-.+/),
line: 1,
column: 9,
endLine: 1,
endColumn: 18,
},
{
code: ':root { --foo-: 0; }',
message: messages.expected(/foo-.+/),
message: messages.expected('--foo-', /foo-.+/),
line: 1,
column: 9,
endLine: 1,
endColumn: 15,
},
{
code: ':root { --foo-color: #f00; } a { color: var(--boo-color); }',
message: messages.expected(/foo-.+/),
message: messages.expected('--boo-color', /foo-.+/),
line: 1,
column: 45,
endLine: 1,
endColumn: 56,
},
{
code: ':root { --foo-sub-color: #f00; } a { color: var(--foo-color, var(--boo-sub-color)); }',
message: messages.expected(/foo-.+/),
message: messages.expected('--boo-sub-color', /foo-.+/),
line: 1,
column: 66,
endLine: 1,
endColumn: 81,
},
{
code: ':root { --foo-color: #f00; } a { color: VAR(--boo-color)); }',
message: messages.expected(/foo-.+/),
message: messages.expected('--boo-color', /foo-.+/),
line: 1,
column: 45,
endLine: 1,
Expand All @@ -69,8 +69,20 @@ testRule({
{
code: ':root { --foo-color: #f00; } a { color: var(--boo-color), var(--boo-sub-color)); }',
warnings: [
{ message: messages.expected(/foo-.+/), line: 1, column: 45, endLine: 1, endColumn: 56 },
{ message: messages.expected(/foo-.+/), line: 1, column: 63, endLine: 1, endColumn: 78 },
{
message: messages.expected('--boo-color', /foo-.+/),
line: 1,
column: 45,
endLine: 1,
endColumn: 56,
},
{
message: messages.expected('--boo-sub-color', /foo-.+/),
line: 1,
column: 63,
endLine: 1,
endColumn: 78,
},
],
},
],
Expand All @@ -92,15 +104,15 @@ testRule({
reject: [
{
code: ':root { --boo-bar: 0; }',
message: messages.expected('foo-.+'),
message: messages.expected('--boo-bar', 'foo-.+'),
line: 1,
column: 9,
endLine: 1,
endColumn: 18,
},
{
code: ':root { --foo-: 0; }',
message: messages.expected('foo-.+'),
message: messages.expected('--foo-', 'foo-.+'),
line: 1,
column: 9,
endLine: 1,
Expand All @@ -125,23 +137,23 @@ testRule({
reject: [
{
code: ':root { --boo-Foo-bar: 0; }',
message: messages.expected(/^[A-Z][a-z]+-[a-z][a-zA-Z]+$/),
message: messages.expected('--boo-Foo-bar', /^[A-Z][a-z]+-[a-z][a-zA-Z]+$/),
line: 1,
column: 9,
endLine: 1,
endColumn: 22,
},
{
code: ':root { --foo-bar: 0; }',
message: messages.expected(/^[A-Z][a-z]+-[a-z][a-zA-Z]+$/),
message: messages.expected('--foo-bar', /^[A-Z][a-z]+-[a-z][a-zA-Z]+$/),
line: 1,
column: 9,
endLine: 1,
endColumn: 18,
},
{
code: ':root { --Foo-Bar: 0; }',
message: messages.expected(/^[A-Z][a-z]+-[a-z][a-zA-Z]+$/),
message: messages.expected('--Foo-Bar', /^[A-Z][a-z]+-[a-z][a-zA-Z]+$/),
line: 1,
column: 9,
endLine: 1,
Expand Down
15 changes: 8 additions & 7 deletions lib/rules/custom-property-pattern/index.js
View file
Expand Up @@ -13,7 +13,7 @@ const isStandardSyntaxProperty = require('../../utils/isStandardSyntaxProperty')
const ruleName = 'custom-property-pattern';

const messages = ruleMessages(ruleName, {
expected: (pattern) => `Expected custom property name to match pattern "${pattern}"`,
expected: (propName, pattern) => `Expected "${propName}" to match pattern "${pattern}"`,
});

const meta = {
Expand Down Expand Up @@ -62,27 +62,28 @@ const rule = (primary) => {

if (!firstNode || check(firstNode.value)) return;

complain(declarationValueIndex(decl) + firstNode.sourceIndex, firstNode.value.length, decl);
complain(declarationValueIndex(decl) + firstNode.sourceIndex, firstNode.value, decl);
});

if (check(prop)) return;

complain(0, prop.length, decl);
complain(0, prop, decl);
});

/**
* @param {number} index
* @param {number} length
* @param {string} propName
* @param {import('postcss').Declaration} decl
*/
function complain(index, length, decl) {
function complain(index, propName, decl) {
report({
result,
ruleName,
message: messages.expected(primary),
message: messages.expected,
messageArgs: [propName, primary],
node: decl,
index,
endIndex: index + length,
endIndex: index + propName.length,
});
}
};
Expand Down
6 changes: 3 additions & 3 deletions lib/rules/keyframes-name-pattern/index.js
View file
Expand Up @@ -10,8 +10,7 @@ const { isRegExp, isString } = require('../../utils/validateTypes');
const ruleName = 'keyframes-name-pattern';

const messages = ruleMessages(ruleName, {
expected: (keyframeName, pattern) =>
`Expected keyframe name "${keyframeName}" to match pattern "${pattern}"`,
expected: (keyframeName, pattern) => `Expected "${keyframeName}" to match pattern "${pattern}"`,
});

const meta = {
Expand Down Expand Up @@ -49,7 +48,8 @@ const rule = (primary) => {
report({
index,
endIndex,
message: messages.expected(value, primary),
message: messages.expected,
messageArgs: [value, primary],
node: keyframesNode,
ruleName,
result,
Expand Down
6 changes: 3 additions & 3 deletions lib/rules/selector-class-pattern/index.js
View file
Expand Up @@ -13,8 +13,7 @@ const { isBoolean, isRegExp, isString } = require('../../utils/validateTypes');
const ruleName = 'selector-class-pattern';

const messages = ruleMessages(ruleName, {
expected: (selector, pattern) =>
`Expected class selector "${selector}" to match pattern "${pattern}"`,
expected: (selector, pattern) => `Expected "${selector}" to match pattern "${pattern}"`,
});

const meta = {
Expand Down Expand Up @@ -100,7 +99,8 @@ const rule = (primary, secondaryOptions) => {
report({
result,
ruleName,
message: messages.expected(selector, primary),
message: messages.expected,
messageArgs: [selector, primary],
node: ruleNode,
index,
endIndex,
Expand Down
6 changes: 3 additions & 3 deletions lib/rules/selector-id-pattern/index.js
View file
Expand Up @@ -10,8 +10,7 @@ const { isRegExp, isString } = require('../../utils/validateTypes');
const ruleName = 'selector-id-pattern';

const messages = ruleMessages(ruleName, {
expected: (selector, pattern) =>
`Expected ID selector "${selector}" to match pattern "${pattern}"`,
expected: (selector, pattern) => `Expected "${selector}" to match pattern "${pattern}"`,
});

const meta = {
Expand Down Expand Up @@ -48,7 +47,8 @@ const rule = (primary) => {
report({
result,
ruleName,
message: messages.expected(selector, primary),
message: messages.expected,
messageArgs: [selector, primary],
node: ruleNode,
word: selector,
});
Expand Down
6 changes: 3 additions & 3 deletions lib/rules/selector-nested-pattern/index.js
View file
Expand Up @@ -9,8 +9,7 @@ const { isRegExp, isString } = require('../../utils/validateTypes');
const ruleName = 'selector-nested-pattern';

const messages = ruleMessages(ruleName, {
expected: (selector, pattern) =>
`Expected nested selector "${selector}" to match pattern "${pattern}"`,
expected: (selector, pattern) => `Expected "${selector}" to match pattern "${pattern}"`,
});

const meta = {
Expand Down Expand Up @@ -49,7 +48,8 @@ const rule = (primary) => {
report({
result,
ruleName,
message: messages.expected(selector, primary),
message: messages.expected,
messageArgs: [selector, primary],
node: ruleNode,
word: selector,
});
Expand Down

0 comments on commit cf04b2b

Please sign in to comment.