@primer/stylelint-config 13.0.1-rc.bbe2b12 → 13.1.0-rc.437e7b4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +181 -356
- package/dist/index.mjs +179 -354
- package/package.json +2 -5
- package/plugins/colors.js +166 -41
- package/plugins/lib/utils.js +16 -0
- package/plugins/lib/decl-validator.js +0 -238
- package/plugins/lib/new-color-css-vars-map.json +0 -279
- package/plugins/lib/primitives-v8.json +0 -1482
- package/plugins/lib/variable-rules.js +0 -83
package/dist/index.cjs
CHANGED
|
@@ -5,9 +5,6 @@ var stylelint = require('stylelint');
|
|
|
5
5
|
var declarationValueIndex = require('stylelint/lib/utils/declarationValueIndex.cjs');
|
|
6
6
|
var valueParser = require('postcss-value-parser');
|
|
7
7
|
var node_module = require('node:module');
|
|
8
|
-
var anymatch = require('anymatch');
|
|
9
|
-
var TapMap = require('tap-map');
|
|
10
|
-
var variables$3 = require('@primer/css/dist/variables.json');
|
|
11
8
|
var matchAll = require('string.prototype.matchall');
|
|
12
9
|
|
|
13
10
|
var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
|
|
@@ -184,7 +181,7 @@ var propertyOrder = [
|
|
|
184
181
|
'animation-direction',
|
|
185
182
|
];
|
|
186
183
|
|
|
187
|
-
const require$2 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
|
|
184
|
+
const require$2 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
|
|
188
185
|
|
|
189
186
|
function primitivesVariables(type) {
|
|
190
187
|
const variables = [];
|
|
@@ -205,6 +202,9 @@ function primitivesVariables(type) {
|
|
|
205
202
|
files.push('functional/themes/light.json');
|
|
206
203
|
files.push('functional/size/border.json');
|
|
207
204
|
break
|
|
205
|
+
case 'colors':
|
|
206
|
+
files.push('functional/themes/light.json');
|
|
207
|
+
break
|
|
208
208
|
}
|
|
209
209
|
|
|
210
210
|
for (const file of files) {
|
|
@@ -225,6 +225,19 @@ function primitivesVariables(type) {
|
|
|
225
225
|
return variables
|
|
226
226
|
}
|
|
227
227
|
|
|
228
|
+
const HAS_VALID_HEX = /#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})(?:$|[^\da-f])/i;
|
|
229
|
+
const COLOR_FUNCTION_NAMES = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'lab', 'lch', 'oklab', 'oklch'];
|
|
230
|
+
|
|
231
|
+
/**
|
|
232
|
+
* Check if a value contains a valid 3, 4, 6 or 8 digit hex
|
|
233
|
+
*
|
|
234
|
+
* @param {string} value
|
|
235
|
+
* @returns {boolean}
|
|
236
|
+
*/
|
|
237
|
+
function hasValidColor(value) {
|
|
238
|
+
return HAS_VALID_HEX.test(value) || COLOR_FUNCTION_NAMES.includes(value)
|
|
239
|
+
}
|
|
240
|
+
|
|
228
241
|
function walkGroups$1(root, validate) {
|
|
229
242
|
for (const node of root.nodes) {
|
|
230
243
|
if (node.type === 'function') {
|
|
@@ -237,12 +250,12 @@ function walkGroups$1(root, validate) {
|
|
|
237
250
|
}
|
|
238
251
|
|
|
239
252
|
const {
|
|
240
|
-
createPlugin: createPlugin$
|
|
241
|
-
utils: {report: report$
|
|
253
|
+
createPlugin: createPlugin$4,
|
|
254
|
+
utils: {report: report$4, ruleMessages: ruleMessages$4, validateOptions: validateOptions$4},
|
|
242
255
|
} = stylelint;
|
|
243
256
|
|
|
244
|
-
const ruleName$
|
|
245
|
-
const messages$
|
|
257
|
+
const ruleName$6 = 'primer/borders';
|
|
258
|
+
const messages$6 = ruleMessages$4(ruleName$6, {
|
|
246
259
|
rejected: (value, replacement, propName) => {
|
|
247
260
|
if (propName && propName.includes('radius') && value.includes('borderWidth')) {
|
|
248
261
|
return `Border radius variables can not be used for border widths`
|
|
@@ -260,7 +273,7 @@ const messages$5 = ruleMessages$3(ruleName$5, {
|
|
|
260
273
|
},
|
|
261
274
|
});
|
|
262
275
|
|
|
263
|
-
const variables$
|
|
276
|
+
const variables$3 = primitivesVariables('border');
|
|
264
277
|
const sizes$1 = [];
|
|
265
278
|
const radii = [];
|
|
266
279
|
|
|
@@ -272,7 +285,7 @@ const valueList$1 = ['${'];
|
|
|
272
285
|
const borderShorthand = prop =>
|
|
273
286
|
/^border(-(top|right|bottom|left|block-start|block-end|inline-start|inline-end))?$/.test(prop);
|
|
274
287
|
|
|
275
|
-
for (const variable of variables$
|
|
288
|
+
for (const variable of variables$3) {
|
|
276
289
|
const name = variable['name'];
|
|
277
290
|
|
|
278
291
|
if (name.includes('borderWidth')) {
|
|
@@ -292,9 +305,9 @@ for (const variable of variables$2) {
|
|
|
292
305
|
}
|
|
293
306
|
|
|
294
307
|
/** @type {import('stylelint').Rule} */
|
|
295
|
-
const ruleFunction$
|
|
308
|
+
const ruleFunction$4 = primary => {
|
|
296
309
|
return (root, result) => {
|
|
297
|
-
const validOptions = validateOptions$
|
|
310
|
+
const validOptions = validateOptions$4(result, ruleName$6, {
|
|
298
311
|
actual: primary,
|
|
299
312
|
possible: [true],
|
|
300
313
|
});
|
|
@@ -391,13 +404,13 @@ const ruleFunction$3 = primary => {
|
|
|
391
404
|
node.value = node.value.replace(node.value, `var(${replacement['name']})`);
|
|
392
405
|
};
|
|
393
406
|
}
|
|
394
|
-
report$
|
|
407
|
+
report$4({
|
|
395
408
|
index: declarationValueIndex(declNode) + node.sourceIndex,
|
|
396
409
|
endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
|
|
397
|
-
message: messages$
|
|
410
|
+
message: messages$6.rejected(node.value, replacement, prop),
|
|
398
411
|
node: declNode,
|
|
399
412
|
result,
|
|
400
|
-
ruleName: ruleName$
|
|
413
|
+
ruleName: ruleName$6,
|
|
401
414
|
fix,
|
|
402
415
|
});
|
|
403
416
|
|
|
@@ -409,21 +422,21 @@ const ruleFunction$3 = primary => {
|
|
|
409
422
|
}
|
|
410
423
|
};
|
|
411
424
|
|
|
412
|
-
ruleFunction$
|
|
413
|
-
ruleFunction$
|
|
414
|
-
ruleFunction$
|
|
425
|
+
ruleFunction$4.ruleName = ruleName$6;
|
|
426
|
+
ruleFunction$4.messages = messages$6;
|
|
427
|
+
ruleFunction$4.meta = {
|
|
415
428
|
fixable: true,
|
|
416
429
|
};
|
|
417
430
|
|
|
418
|
-
var borders = createPlugin$
|
|
431
|
+
var borders = createPlugin$4(ruleName$6, ruleFunction$4);
|
|
419
432
|
|
|
420
433
|
const {
|
|
421
|
-
createPlugin: createPlugin$
|
|
422
|
-
utils: {report: report$
|
|
434
|
+
createPlugin: createPlugin$3,
|
|
435
|
+
utils: {report: report$3, ruleMessages: ruleMessages$3, validateOptions: validateOptions$3},
|
|
423
436
|
} = stylelint;
|
|
424
437
|
|
|
425
|
-
const ruleName$
|
|
426
|
-
const messages$
|
|
438
|
+
const ruleName$5 = 'primer/box-shadow';
|
|
439
|
+
const messages$5 = ruleMessages$3(ruleName$5, {
|
|
427
440
|
rejected: (value, replacement) => {
|
|
428
441
|
if (!replacement) {
|
|
429
442
|
return `Please use a Primer box-shadow variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/foundations/primitives/color#shadow or https://primer.style/foundations/primitives/size#border-size`
|
|
@@ -433,10 +446,10 @@ const messages$4 = ruleMessages$2(ruleName$4, {
|
|
|
433
446
|
},
|
|
434
447
|
});
|
|
435
448
|
|
|
436
|
-
const variables$
|
|
449
|
+
const variables$2 = primitivesVariables('box-shadow');
|
|
437
450
|
const shadows = [];
|
|
438
451
|
|
|
439
|
-
for (const variable of variables$
|
|
452
|
+
for (const variable of variables$2) {
|
|
440
453
|
const name = variable['name'];
|
|
441
454
|
|
|
442
455
|
// TODO: Decide if this is safe. Someday we might have variables that
|
|
@@ -447,9 +460,9 @@ for (const variable of variables$1) {
|
|
|
447
460
|
}
|
|
448
461
|
|
|
449
462
|
/** @type {import('stylelint').Rule} */
|
|
450
|
-
const ruleFunction$
|
|
463
|
+
const ruleFunction$3 = primary => {
|
|
451
464
|
return (root, result) => {
|
|
452
|
-
const validOptions = validateOptions$
|
|
465
|
+
const validOptions = validateOptions$3(result, ruleName$5, {
|
|
453
466
|
actual: primary,
|
|
454
467
|
possible: [true],
|
|
455
468
|
});
|
|
@@ -482,378 +495,190 @@ const ruleFunction$2 = primary => {
|
|
|
482
495
|
};
|
|
483
496
|
}
|
|
484
497
|
|
|
485
|
-
report$
|
|
498
|
+
report$3({
|
|
486
499
|
index: declarationValueIndex(declNode),
|
|
487
500
|
endIndex: declarationValueIndex(declNode) + value.length,
|
|
488
|
-
message: messages$
|
|
501
|
+
message: messages$5.rejected(value, replacement),
|
|
489
502
|
node: declNode,
|
|
490
503
|
result,
|
|
491
|
-
ruleName: ruleName$
|
|
504
|
+
ruleName: ruleName$5,
|
|
492
505
|
fix,
|
|
493
506
|
});
|
|
494
507
|
});
|
|
495
508
|
}
|
|
496
509
|
};
|
|
497
510
|
|
|
498
|
-
ruleFunction$
|
|
499
|
-
ruleFunction$
|
|
500
|
-
ruleFunction$
|
|
511
|
+
ruleFunction$3.ruleName = ruleName$5;
|
|
512
|
+
ruleFunction$3.messages = messages$5;
|
|
513
|
+
ruleFunction$3.meta = {
|
|
501
514
|
fixable: true,
|
|
502
515
|
};
|
|
503
516
|
|
|
504
|
-
var boxShadow = createPlugin$
|
|
505
|
-
|
|
506
|
-
const SKIP_VALUE_NODE_TYPES = new Set(['space', 'div']);
|
|
507
|
-
const SKIP_AT_RULE_NAMES = new Set(['each', 'for', 'function', 'mixin']);
|
|
517
|
+
var boxShadow = createPlugin$3(ruleName$5, ruleFunction$3);
|
|
508
518
|
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
for (const [name, {values}] of Object.entries(variables)) {
|
|
514
|
-
for (const value of values) {
|
|
515
|
-
variableReplacements.tap(value, () => []).push(name);
|
|
516
|
-
}
|
|
517
|
-
}
|
|
518
|
-
}
|
|
519
|
+
const {
|
|
520
|
+
createPlugin: createPlugin$2,
|
|
521
|
+
utils: {report: report$2, ruleMessages: ruleMessages$2, validateOptions: validateOptions$2},
|
|
522
|
+
} = stylelint;
|
|
519
523
|
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
return {
|
|
530
|
-
rule,
|
|
531
|
-
matchesProp: anymatch(props),
|
|
532
|
-
validate: Array.isArray(rule.components) ? componentValidator(rule) : valueValidator(rule),
|
|
533
|
-
}
|
|
534
|
-
})
|
|
535
|
-
.filter(Boolean);
|
|
536
|
-
|
|
537
|
-
const validatorsByProp = new TapMap();
|
|
538
|
-
const validatorsByReplacementValue = new Map();
|
|
539
|
-
for (const validator of validators) {
|
|
540
|
-
for (const value of Object.keys(validator.rule.replacements)) {
|
|
541
|
-
validatorsByReplacementValue.set(value, validator);
|
|
524
|
+
const ruleName$4 = 'primer/colors';
|
|
525
|
+
const messages$4 = ruleMessages$2(ruleName$4, {
|
|
526
|
+
rejected: (value, type) => {
|
|
527
|
+
if (type === 'fg') {
|
|
528
|
+
return `Please use a Primer foreground color variable instead of '${value}'. https://primer.style/foundations/primitives/color#foreground`
|
|
529
|
+
} else if (type === 'bg') {
|
|
530
|
+
return `Please use a Primer background color variable instead of '${value}'. https://primer.style/foundations/primitives/color#background`
|
|
531
|
+
} else if (type === 'border') {
|
|
532
|
+
return `Please use a Primer border color variable instead of '${value}'. https://primer.style/foundations/primitives/color#border`
|
|
542
533
|
}
|
|
543
|
-
|
|
534
|
+
return `Please use with a Primer color variable instead of '${value}'. https://primer.style/foundations/primitives/color`
|
|
535
|
+
},
|
|
536
|
+
});
|
|
544
537
|
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
// they want
|
|
554
|
-
return {valid: true}
|
|
555
|
-
}
|
|
556
|
-
const validator = getPropValidator(decl.prop);
|
|
557
|
-
if (validator) {
|
|
558
|
-
const result = validator.validate(decl);
|
|
559
|
-
result.errors = result.errors.map(formatMessage);
|
|
560
|
-
return result
|
|
561
|
-
} else {
|
|
562
|
-
return {valid: true}
|
|
563
|
-
}
|
|
564
|
-
}
|
|
538
|
+
let variables$1 = primitivesVariables('colors');
|
|
539
|
+
const validProps = {
|
|
540
|
+
'^color$': ['fgColor', 'iconColor'],
|
|
541
|
+
'^background(-color)?$': ['bgColor'],
|
|
542
|
+
'^border(-top|-right|-bottom|-left|-inline|-block)*(-color)?$': ['borderColor'],
|
|
543
|
+
'^fill$': ['fgColor', 'iconColor', 'bgColor'],
|
|
544
|
+
'^stroke$': ['fgColor', 'iconColor', 'bgColor', 'borderColor'],
|
|
545
|
+
};
|
|
565
546
|
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
return replacements
|
|
578
|
-
}
|
|
547
|
+
const validValues = [
|
|
548
|
+
'none',
|
|
549
|
+
'currentcolor',
|
|
550
|
+
'inherit',
|
|
551
|
+
'initial',
|
|
552
|
+
'unset',
|
|
553
|
+
'revert',
|
|
554
|
+
'revert-layer',
|
|
555
|
+
'transparent',
|
|
556
|
+
'0',
|
|
557
|
+
];
|
|
579
558
|
|
|
580
|
-
|
|
581
|
-
|
|
559
|
+
const propType = prop => {
|
|
560
|
+
if (/^color/.test(prop)) {
|
|
561
|
+
return 'fg'
|
|
562
|
+
} else if (/^background(-color)?$/.test(prop)) {
|
|
563
|
+
return 'bg'
|
|
564
|
+
} else if (/^border(-top|-right|-bottom|-left|-inline|-block)*(-color)?$/.test(prop)) {
|
|
565
|
+
return 'border'
|
|
566
|
+
} else if (/^fill$/.test(prop)) {
|
|
567
|
+
return 'fg'
|
|
568
|
+
} else if (/^stroke$/.test(prop)) {
|
|
569
|
+
return 'fg'
|
|
582
570
|
}
|
|
571
|
+
return undefined
|
|
572
|
+
};
|
|
583
573
|
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
valid: true,
|
|
590
|
-
errors: [],
|
|
591
|
-
fixable: false,
|
|
592
|
-
replacement: undefined,
|
|
593
|
-
}
|
|
594
|
-
} else if (replacements[value]) {
|
|
595
|
-
let replacement = value;
|
|
596
|
-
do {
|
|
597
|
-
replacement = replacements[replacement];
|
|
598
|
-
} while (replacements[replacement])
|
|
599
|
-
return {
|
|
600
|
-
valid: false,
|
|
601
|
-
errors: [{expects, prop, value, replacement}],
|
|
602
|
-
fixable: true,
|
|
603
|
-
replacement,
|
|
604
|
-
}
|
|
605
|
-
} else {
|
|
606
|
-
if (nested || singular) {
|
|
607
|
-
return {
|
|
608
|
-
valid: false,
|
|
609
|
-
errors: [{expects, prop, value}],
|
|
610
|
-
fixable: false,
|
|
611
|
-
replacement: undefined,
|
|
612
|
-
}
|
|
613
|
-
}
|
|
574
|
+
variables$1 = variables$1.filter(variable => {
|
|
575
|
+
const name = variable['name'];
|
|
576
|
+
// remove shadow and boxShadow variables
|
|
577
|
+
return !(name.includes('shadow') || name.includes('boxShadow'))
|
|
578
|
+
});
|
|
614
579
|
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
});
|
|
580
|
+
/** @type {import('stylelint').Rule} */
|
|
581
|
+
const ruleFunction$2 = primary => {
|
|
582
|
+
return (root, result) => {
|
|
583
|
+
const validOptions = validateOptions$2(result, ruleName$4, {
|
|
584
|
+
actual: primary,
|
|
585
|
+
possible: [true],
|
|
586
|
+
});
|
|
587
|
+
if (!validOptions) return
|
|
624
588
|
|
|
625
|
-
|
|
626
|
-
if (valid) {
|
|
627
|
-
return {valid, errors: [], fixable: false, replacement: undefined}
|
|
628
|
-
}
|
|
589
|
+
const valueIsCorrectType = (value, types) => types.some(type => value.includes(type));
|
|
629
590
|
|
|
630
|
-
|
|
631
|
-
|
|
591
|
+
root.walkDecls(declNode => {
|
|
592
|
+
const {prop, value} = declNode;
|
|
632
593
|
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
if (fixable && validation.replacement) {
|
|
636
|
-
parsed.nodes[validation.index] = {type: 'word', value: validation.replacement};
|
|
637
|
-
}
|
|
638
|
-
}
|
|
594
|
+
// Skip if prop is not a valid color prop
|
|
595
|
+
if (!Object.keys(validProps).some(validProp => new RegExp(validProp).test(prop))) return
|
|
639
596
|
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
}
|
|
597
|
+
// Get the valid types for the prop
|
|
598
|
+
const types = validProps[Object.keys(validProps).find(re => new RegExp(re).test(prop))];
|
|
643
599
|
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
replacement,
|
|
649
|
-
}
|
|
650
|
-
}
|
|
651
|
-
}
|
|
652
|
-
}
|
|
600
|
+
// Walk the value split
|
|
601
|
+
valueParser(value).walk(valueNode => {
|
|
602
|
+
// Skip if value is not a word or function
|
|
603
|
+
if (valueNode.type !== 'word' && valueNode.type !== 'function') return
|
|
653
604
|
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
return decl => {
|
|
657
|
-
const {prop, value: compoundValue} = decl;
|
|
658
|
-
const parsed = valueParser(compoundValue);
|
|
659
|
-
if (parsed.nodes.length === 1 && matchesCompoundValue(compoundValue)) {
|
|
660
|
-
return {valid: true, errors: []}
|
|
661
|
-
}
|
|
605
|
+
// Skip if value is a valid value
|
|
606
|
+
if (validValues.includes(valueNode.value)) return
|
|
662
607
|
|
|
663
|
-
|
|
608
|
+
if (hasValidColor(valueNode.value) || /^\$/.test(valueNode.value)) {
|
|
609
|
+
const rejectedValue =
|
|
610
|
+
valueNode.type === 'function'
|
|
611
|
+
? `${valueNode.value}(${valueParser.stringify(valueNode.nodes)})`
|
|
612
|
+
: valueNode.value;
|
|
664
613
|
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
614
|
+
report$2({
|
|
615
|
+
index: declarationValueIndex(declNode) + valueNode.sourceIndex,
|
|
616
|
+
endIndex: declarationValueIndex(declNode) + valueNode.sourceEndIndex,
|
|
617
|
+
message: messages$4.rejected(rejectedValue, propType(prop)),
|
|
618
|
+
node: declNode,
|
|
619
|
+
result,
|
|
620
|
+
ruleName: ruleName$4,
|
|
621
|
+
});
|
|
622
|
+
return
|
|
670
623
|
}
|
|
671
624
|
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
let validator = getPropValidator(componentProp);
|
|
676
|
-
if (validatorsByReplacementValue.has(value)) {
|
|
677
|
-
validator = validatorsByReplacementValue.get(value);
|
|
678
|
-
componentProp = validator.rule.name;
|
|
625
|
+
// Skip functions
|
|
626
|
+
if (valueNode.type === 'function') {
|
|
627
|
+
return
|
|
679
628
|
}
|
|
680
629
|
|
|
681
|
-
|
|
682
|
-
if (
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
value: result.replacement,
|
|
688
|
-
};
|
|
689
|
-
fixable = true;
|
|
690
|
-
}
|
|
691
|
-
for (const error of result.errors) {
|
|
692
|
-
errors.push(error);
|
|
693
|
-
}
|
|
694
|
-
} else {
|
|
695
|
-
errors.push({expects, prop: nestedProp, value});
|
|
630
|
+
// Variable exists and is the correct type (fg, bg, border)
|
|
631
|
+
if (
|
|
632
|
+
variables$1.some(variable => new RegExp(variable['name']).test(valueNode.value)) &&
|
|
633
|
+
valueIsCorrectType(valueNode.value, types)
|
|
634
|
+
) {
|
|
635
|
+
return
|
|
696
636
|
}
|
|
697
|
-
}
|
|
698
637
|
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
if (replacement && replacements[replacement]) {
|
|
703
|
-
do {
|
|
704
|
-
replacement = replacements[replacement];
|
|
705
|
-
} while (replacements[replacement])
|
|
706
|
-
return {
|
|
707
|
-
valid: false,
|
|
708
|
-
errors: [{expects, prop, value: compoundValue, replacement}],
|
|
709
|
-
fixable: true,
|
|
710
|
-
replacement,
|
|
638
|
+
// Value doesn't start with variable --
|
|
639
|
+
if (!valueNode.value.startsWith('--')) {
|
|
640
|
+
return
|
|
711
641
|
}
|
|
712
|
-
}
|
|
713
|
-
|
|
714
|
-
return {
|
|
715
|
-
valid: errors.length === 0,
|
|
716
|
-
errors,
|
|
717
|
-
fixable,
|
|
718
|
-
replacement,
|
|
719
|
-
}
|
|
720
|
-
}
|
|
721
|
-
}
|
|
722
642
|
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
}
|
|
733
|
-
|
|
734
|
-
function closest(node, test) {
|
|
735
|
-
let ancestor = node;
|
|
736
|
-
do {
|
|
737
|
-
if (test(ancestor)) return ancestor
|
|
738
|
-
} while ((ancestor = ancestor.parent))
|
|
739
|
-
}
|
|
740
|
-
|
|
741
|
-
function createVariableRule(ruleName, rules, url) {
|
|
742
|
-
const plugin = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
|
|
743
|
-
if (enabled === false) {
|
|
744
|
-
return noop$2
|
|
745
|
-
}
|
|
643
|
+
// Ignore old system colors --color-*
|
|
644
|
+
if (
|
|
645
|
+
[
|
|
646
|
+
/^--color-(?:[a-zA-Z0-9-]+-)*text(?:-[a-zA-Z0-9-]+)*$/,
|
|
647
|
+
/^--color-(?:[a-zA-Z0-9-](?!-))*-fg(?:-[a-zA-Z0-9-]+)*$/,
|
|
648
|
+
/^--color-[^)]+$/,
|
|
649
|
+
].some(oldSysRe => oldSysRe.test(valueNode.value))
|
|
650
|
+
) {
|
|
651
|
+
return
|
|
652
|
+
}
|
|
746
653
|
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
if (typeof overrides === 'function') {
|
|
755
|
-
delete options.rules;
|
|
756
|
-
overrides = overrides({rules: actualRules, options, ruleName, variables: variables$3});
|
|
757
|
-
}
|
|
758
|
-
if (overrides) {
|
|
759
|
-
Object.assign(actualRules, overrides);
|
|
760
|
-
}
|
|
761
|
-
const validate = declarationValidator(actualRules, {variables: variables$3});
|
|
762
|
-
|
|
763
|
-
// The stylelint docs suggest respecting a "disableFix" rule option that
|
|
764
|
-
// overrides the "global" context.fix (--fix) linting option.
|
|
765
|
-
const {verbose = false, disableFix} = options;
|
|
766
|
-
const fixEnabled = context && context.fix && !disableFix;
|
|
767
|
-
const seen = new WeakMap();
|
|
768
|
-
|
|
769
|
-
return (root, result) => {
|
|
770
|
-
root.walkRules(rule => {
|
|
771
|
-
rule.walkDecls(decl => {
|
|
772
|
-
if (seen.has(decl)) {
|
|
773
|
-
return
|
|
774
|
-
} else {
|
|
775
|
-
seen.set(decl, true);
|
|
776
|
-
}
|
|
654
|
+
// Property is shortand and value doesn't include color
|
|
655
|
+
if (
|
|
656
|
+
(/^border(-top|-right|-bottom|-left|-inline|-block)*$/.test(prop) || /^background$/.test(prop)) &&
|
|
657
|
+
!valueNode.value.toLowerCase().includes('color')
|
|
658
|
+
) {
|
|
659
|
+
return
|
|
660
|
+
}
|
|
777
661
|
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
for (const error of errors) {
|
|
786
|
-
const message = stylelint.utils
|
|
787
|
-
.ruleMessages(ruleName, {
|
|
788
|
-
rejected: m => {
|
|
789
|
-
{
|
|
790
|
-
return `${m}. See ${url}.`
|
|
791
|
-
}
|
|
792
|
-
},
|
|
793
|
-
})
|
|
794
|
-
.rejected(error);
|
|
795
|
-
|
|
796
|
-
stylelint.utils.report({
|
|
797
|
-
message,
|
|
798
|
-
node: decl,
|
|
799
|
-
result,
|
|
800
|
-
ruleName,
|
|
801
|
-
});
|
|
802
|
-
}
|
|
803
|
-
}
|
|
662
|
+
report$2({
|
|
663
|
+
index: declarationValueIndex(declNode) + valueNode.sourceIndex,
|
|
664
|
+
endIndex: declarationValueIndex(declNode) + valueNode.sourceEndIndex,
|
|
665
|
+
message: messages$4.rejected(`var(${valueNode.value})`, propType(prop)),
|
|
666
|
+
node: declNode,
|
|
667
|
+
result,
|
|
668
|
+
ruleName: ruleName$4,
|
|
804
669
|
});
|
|
805
670
|
});
|
|
806
|
-
}
|
|
807
|
-
}
|
|
808
|
-
|
|
809
|
-
Object.assign(plugin, {rules});
|
|
810
|
-
|
|
811
|
-
return plugin
|
|
812
|
-
}
|
|
671
|
+
});
|
|
672
|
+
}
|
|
673
|
+
};
|
|
813
674
|
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
// Match variables in any of the following formats: --color-bg-*, --color-*-bg-*, --color-*-bg, *bgColor*, *fgColor*, *borderColor*, *iconColor*
|
|
820
|
-
/var\(--color-(.+-)*bg(-.+)*\)/,
|
|
821
|
-
/var\(--color-[^)]+\)/,
|
|
822
|
-
/var\((.+-)*bgColor(-.+)*\)/,
|
|
823
|
-
/var\((.+-)*fgColor(-.+)*\)/,
|
|
824
|
-
/var\((.+-)*borderColor(-.+)*\)/,
|
|
825
|
-
/var\((.+-)*iconColor(-.+)*\)/,
|
|
826
|
-
];
|
|
675
|
+
ruleFunction$2.ruleName = ruleName$4;
|
|
676
|
+
ruleFunction$2.messages = messages$4;
|
|
677
|
+
ruleFunction$2.meta = {
|
|
678
|
+
fixable: false,
|
|
679
|
+
};
|
|
827
680
|
|
|
828
|
-
var colors =
|
|
829
|
-
'primer/colors',
|
|
830
|
-
{
|
|
831
|
-
'background-color': {
|
|
832
|
-
expects: 'a background color variable',
|
|
833
|
-
values: bgVars.concat('none', 'transparent'),
|
|
834
|
-
},
|
|
835
|
-
background: {
|
|
836
|
-
expects: 'a background color variable',
|
|
837
|
-
values: bgVars.concat('none', 'transparent', 'top', 'right', 'bottom', 'left', 'center', '*px', 'url(*)'),
|
|
838
|
-
},
|
|
839
|
-
'text color': {
|
|
840
|
-
expects: 'a text color variable',
|
|
841
|
-
props: 'color',
|
|
842
|
-
values: [
|
|
843
|
-
'$text-*',
|
|
844
|
-
'$tooltip-text-color',
|
|
845
|
-
'inherit',
|
|
846
|
-
// Match variables in any of the following formats: --color-text-*, --color-*-text-*, --color-*-text, *fgColor*, *iconColor*
|
|
847
|
-
/var\(--color-(.+-)*text(-.+)*\)/,
|
|
848
|
-
/var\(--color-(.+-)*fg(-.+)*\)/,
|
|
849
|
-
/var\(--color-[^)]+\)/,
|
|
850
|
-
/var\((.+-)*fgColor(-.+)*\)/,
|
|
851
|
-
/var\((.+-)*iconColor(-.+)*\)/,
|
|
852
|
-
],
|
|
853
|
-
},
|
|
854
|
-
},
|
|
855
|
-
'https://primer.style/primitives/colors',
|
|
856
|
-
);
|
|
681
|
+
var colors = createPlugin$2(ruleName$4, ruleFunction$2);
|
|
857
682
|
|
|
858
683
|
const ruleName$3 = 'primer/responsive-widths';
|
|
859
684
|
|
|
@@ -1277,7 +1102,7 @@ var noDisplayColors = stylelint.createPlugin(ruleName, (enabled, options = {}) =
|
|
|
1277
1102
|
|
|
1278
1103
|
function noop() {}
|
|
1279
1104
|
|
|
1280
|
-
const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
|
|
1105
|
+
const require$1 = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
|
|
1281
1106
|
|
|
1282
1107
|
/** @type {import('stylelint').Config} */
|
|
1283
1108
|
var index = {
|