@primer/stylelint-config 13.0.0-rc.ded7701 → 13.0.0-rc.ead57f2
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/README.md +0 -1
- package/dist/index.cjs +116 -660
- package/dist/index.mjs +116 -660
- package/package.json +9 -3
- package/plugins/README.md +0 -26
- package/plugins/lib/primitives.js +36 -0
- package/plugins/spacing.js +68 -63
- package/plugins/lib/primer-utilities.js +0 -526
- package/plugins/utilities.js +0 -52
package/dist/index.cjs
CHANGED
|
@@ -7,8 +7,8 @@ var valueParser = require('postcss-value-parser');
|
|
|
7
7
|
var TapMap = require('tap-map');
|
|
8
8
|
var variables = require('@primer/css/dist/variables.json');
|
|
9
9
|
var declarationValueIndex = require('stylelint/lib/utils/declarationValueIndex.cjs');
|
|
10
|
-
var matchAll = require('string.prototype.matchall');
|
|
11
10
|
var node_module = require('node:module');
|
|
11
|
+
var matchAll = require('string.prototype.matchall');
|
|
12
12
|
|
|
13
13
|
var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
|
|
14
14
|
var propertyOrder = [
|
|
@@ -422,7 +422,7 @@ function closest(node, test) {
|
|
|
422
422
|
function createVariableRule(ruleName, rules, url) {
|
|
423
423
|
const plugin = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
|
|
424
424
|
if (enabled === false) {
|
|
425
|
-
return noop$
|
|
425
|
+
return noop$2
|
|
426
426
|
}
|
|
427
427
|
|
|
428
428
|
let actualRules = rules;
|
|
@@ -499,7 +499,7 @@ function createVariableRule(ruleName, rules, url) {
|
|
|
499
499
|
return plugin
|
|
500
500
|
}
|
|
501
501
|
|
|
502
|
-
function noop$
|
|
502
|
+
function noop$2() {}
|
|
503
503
|
|
|
504
504
|
var borders = createVariableRule(
|
|
505
505
|
'primer/borders',
|
|
@@ -627,9 +627,9 @@ var colors = createVariableRule(
|
|
|
627
627
|
'https://primer.style/primitives/colors',
|
|
628
628
|
);
|
|
629
629
|
|
|
630
|
-
const ruleName$
|
|
630
|
+
const ruleName$2 = 'primer/responsive-widths';
|
|
631
631
|
|
|
632
|
-
const messages$
|
|
632
|
+
const messages$2 = stylelint.utils.ruleMessages(ruleName$2, {
|
|
633
633
|
rejected: value => {
|
|
634
634
|
return `A value larger than the smallest viewport could break responsive pages. Use a width value smaller than ${value}. https://primer.style/css/support/breakpoints`
|
|
635
635
|
},
|
|
@@ -649,9 +649,9 @@ const walkGroups$1 = (root, validate) => {
|
|
|
649
649
|
};
|
|
650
650
|
|
|
651
651
|
// eslint-disable-next-line no-unused-vars
|
|
652
|
-
var responsiveWidths = stylelint.createPlugin(ruleName$
|
|
652
|
+
var responsiveWidths = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context) => {
|
|
653
653
|
if (!enabled) {
|
|
654
|
-
return noop$
|
|
654
|
+
return noop$1
|
|
655
655
|
}
|
|
656
656
|
|
|
657
657
|
const lintResult = (root, result) => {
|
|
@@ -662,7 +662,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
|
|
|
662
662
|
}
|
|
663
663
|
|
|
664
664
|
if (decl.type !== 'decl' || !decl.prop.match(/^(min-width|width)/)) {
|
|
665
|
-
return noop$
|
|
665
|
+
return noop$1
|
|
666
666
|
}
|
|
667
667
|
|
|
668
668
|
const problems = [];
|
|
@@ -685,7 +685,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
|
|
|
685
685
|
if (parseInt(valueUnit.number) > 320) {
|
|
686
686
|
problems.push({
|
|
687
687
|
index: declarationValueIndex(decl) + node.sourceIndex,
|
|
688
|
-
message: messages$
|
|
688
|
+
message: messages$2.rejected(node.value),
|
|
689
689
|
});
|
|
690
690
|
}
|
|
691
691
|
break
|
|
@@ -693,7 +693,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
|
|
|
693
693
|
if (parseInt(valueUnit.number) > 100) {
|
|
694
694
|
problems.push({
|
|
695
695
|
index: declarationValueIndex(decl) + node.sourceIndex,
|
|
696
|
-
message: messages$
|
|
696
|
+
message: messages$2.rejected(node.value),
|
|
697
697
|
});
|
|
698
698
|
}
|
|
699
699
|
break
|
|
@@ -707,7 +707,7 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
|
|
|
707
707
|
message: err.message,
|
|
708
708
|
node: decl,
|
|
709
709
|
result,
|
|
710
|
-
ruleName: ruleName$
|
|
710
|
+
ruleName: ruleName$2,
|
|
711
711
|
});
|
|
712
712
|
}
|
|
713
713
|
}
|
|
@@ -717,40 +717,47 @@ var responsiveWidths = stylelint.createPlugin(ruleName$3, (enabled, options = {}
|
|
|
717
717
|
return lintResult
|
|
718
718
|
});
|
|
719
719
|
|
|
720
|
-
function noop$
|
|
721
|
-
|
|
722
|
-
// TODO: Pull this in from primer/primitives
|
|
723
|
-
const spacerValues = {
|
|
724
|
-
'$spacer-1': '4px',
|
|
725
|
-
'$spacer-2': '8px',
|
|
726
|
-
'$spacer-3': '16px',
|
|
727
|
-
'$spacer-4': '24px',
|
|
728
|
-
'$spacer-5': '32px',
|
|
729
|
-
'$spacer-6': '40px',
|
|
730
|
-
'$spacer-7': '48px',
|
|
731
|
-
'$spacer-8': '64px',
|
|
732
|
-
'$spacer-9': '80px',
|
|
733
|
-
'$spacer-10': '96px',
|
|
734
|
-
'$spacer-11': '112px',
|
|
735
|
-
'$spacer-12': '128px',
|
|
736
|
-
'$em-spacer-1': '0.0625em',
|
|
737
|
-
'$em-spacer-2': '0.125em',
|
|
738
|
-
'$em-spacer-3': '0.25em',
|
|
739
|
-
'$em-spacer-4': '0.375em',
|
|
740
|
-
'$em-spacer-5': '0.5em',
|
|
741
|
-
'$em-spacer-6': '0.75em',
|
|
742
|
-
};
|
|
720
|
+
function noop$1() {}
|
|
743
721
|
|
|
744
|
-
const
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
722
|
+
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)));
|
|
723
|
+
|
|
724
|
+
async function primitivesVariables(type) {
|
|
725
|
+
const variables = [];
|
|
726
|
+
|
|
727
|
+
const files = [];
|
|
728
|
+
switch (type) {
|
|
729
|
+
case 'size':
|
|
730
|
+
files.push('base/size/size.json');
|
|
731
|
+
break
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
for (const file of files) {
|
|
735
|
+
// eslint-disable-next-line import/no-dynamic-require
|
|
736
|
+
const data = require$2(`@primer/primitives/dist/styleLint/${file}`);
|
|
737
|
+
|
|
738
|
+
for (const key of Object.keys(data)) {
|
|
739
|
+
const size = data[key];
|
|
740
|
+
const values = size['value'];
|
|
741
|
+
const intValue = parseInt(size['original']['value']);
|
|
742
|
+
if (![2, 6].includes(intValue)) {
|
|
743
|
+
values.push(`${intValue + 1}px`);
|
|
744
|
+
values.push(`${intValue - 1}px`);
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
variables.push({
|
|
748
|
+
name: `--${size['name']}`,
|
|
749
|
+
values,
|
|
750
|
+
});
|
|
749
751
|
}
|
|
752
|
+
}
|
|
750
753
|
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
+
return variables
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
const {
|
|
758
|
+
createPlugin,
|
|
759
|
+
utils: {report, ruleMessages, validateOptions},
|
|
760
|
+
} = stylelint;
|
|
754
761
|
|
|
755
762
|
const walkGroups = (root, validate) => {
|
|
756
763
|
for (const node of root.nodes) {
|
|
@@ -763,24 +770,47 @@ const walkGroups = (root, validate) => {
|
|
|
763
770
|
return root
|
|
764
771
|
};
|
|
765
772
|
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
773
|
+
const ruleName$1 = 'primer/spacing';
|
|
774
|
+
const messages$1 = ruleMessages(ruleName$1, {
|
|
775
|
+
rejected: (value, replacement) => {
|
|
776
|
+
if (!replacement) {
|
|
777
|
+
return `Please use a primer size variable instead of '${value}'. Consult the primer docs for a suitable replacement. https://primer.style/foundations/primitives/size`
|
|
778
|
+
}
|
|
771
779
|
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
return noop$2
|
|
776
|
-
}
|
|
780
|
+
return `Please replace '${value}' with size variable '${replacement['name']}'. https://primer.style/foundations/primitives/size`
|
|
781
|
+
},
|
|
782
|
+
});
|
|
777
783
|
|
|
778
|
-
|
|
784
|
+
const meta = {
|
|
785
|
+
fixable: true,
|
|
786
|
+
};
|
|
787
|
+
|
|
788
|
+
/** @type {import('stylelint').Rule} */
|
|
789
|
+
const ruleFunction = (primary, secondaryOptions, context) => {
|
|
790
|
+
return async (root, result) => {
|
|
791
|
+
// Props that we want to check
|
|
792
|
+
const propList = ['padding', 'margin', 'top', 'right', 'bottom', 'left'];
|
|
793
|
+
// Values that we want to ignore
|
|
794
|
+
const valueList = ['${'];
|
|
795
|
+
|
|
796
|
+
const sizes = await primitivesVariables('size');
|
|
797
|
+
|
|
798
|
+
const validOptions = validateOptions(result, ruleName$1, {
|
|
799
|
+
actual: primary,
|
|
800
|
+
possible: [true],
|
|
801
|
+
});
|
|
802
|
+
|
|
803
|
+
if (!validOptions) return
|
|
804
|
+
|
|
805
|
+
root.walkDecls(declNode => {
|
|
806
|
+
const {prop, value} = declNode;
|
|
779
807
|
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
const cleanValue = node.value.replace(/^-/g, '');
|
|
808
|
+
if (!propList.some(spacingProp => prop.startsWith(spacingProp))) return
|
|
809
|
+
if (valueList.some(valueToIgnore => value.includes(valueToIgnore))) return
|
|
783
810
|
|
|
811
|
+
const problems = [];
|
|
812
|
+
|
|
813
|
+
const parsedValue = walkGroups(valueParser(value), node => {
|
|
784
814
|
// Only check word types. https://github.com/TrySound/postcss-value-parser#word
|
|
785
815
|
if (node.type !== 'word') {
|
|
786
816
|
return
|
|
@@ -791,30 +821,36 @@ var spacing = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context
|
|
|
791
821
|
return
|
|
792
822
|
}
|
|
793
823
|
|
|
794
|
-
const valueUnit = valueParser.unit(
|
|
824
|
+
const valueUnit = valueParser.unit(node.value);
|
|
825
|
+
|
|
826
|
+
if (valueUnit && (valueUnit.unit === '' || !/^-?[0-9.]+$/.test(valueUnit.number))) {
|
|
827
|
+
return
|
|
828
|
+
}
|
|
795
829
|
|
|
796
|
-
if
|
|
830
|
+
// Skip if the value unit isn't a supported unit.
|
|
831
|
+
if (valueUnit && !['px', 'rem', 'em'].includes(valueUnit.unit)) {
|
|
797
832
|
return
|
|
798
833
|
}
|
|
799
834
|
|
|
800
|
-
// If the
|
|
835
|
+
// If the variable is found in the value, skip it.
|
|
801
836
|
if (
|
|
802
|
-
|
|
803
|
-
new RegExp(`${variable.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(
|
|
837
|
+
sizes.some(variable =>
|
|
838
|
+
new RegExp(`${variable['name'].replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`).test(node.value),
|
|
804
839
|
)
|
|
805
840
|
) {
|
|
806
841
|
return
|
|
807
842
|
}
|
|
808
843
|
|
|
809
|
-
const replacement =
|
|
810
|
-
const
|
|
844
|
+
const replacement = sizes.find(variable => variable.values.includes(node.value.replace('-', '')));
|
|
845
|
+
const fixable = replacement && valueUnit && !valueUnit.number.includes('-');
|
|
811
846
|
|
|
812
|
-
if (
|
|
813
|
-
node.value = node.value.replace(
|
|
847
|
+
if (fixable && context.fix) {
|
|
848
|
+
node.value = node.value.replace(node.value, `var(${replacement['name']})`);
|
|
814
849
|
} else {
|
|
815
850
|
problems.push({
|
|
816
|
-
index: declarationValueIndex(
|
|
817
|
-
|
|
851
|
+
index: declarationValueIndex(declNode) + node.sourceIndex,
|
|
852
|
+
endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
|
|
853
|
+
message: messages$1.rejected(node.value, replacement),
|
|
818
854
|
});
|
|
819
855
|
}
|
|
820
856
|
|
|
@@ -822,27 +858,30 @@ var spacing = stylelint.createPlugin(ruleName$2, (enabled, options = {}, context
|
|
|
822
858
|
});
|
|
823
859
|
|
|
824
860
|
if (context.fix) {
|
|
825
|
-
|
|
861
|
+
declNode.value = parsedValue.toString();
|
|
826
862
|
}
|
|
827
863
|
|
|
828
864
|
if (problems.length) {
|
|
829
865
|
for (const err of problems) {
|
|
830
|
-
|
|
866
|
+
report({
|
|
831
867
|
index: err.index,
|
|
868
|
+
endIndex: err.endIndex,
|
|
832
869
|
message: err.message,
|
|
833
|
-
node:
|
|
870
|
+
node: declNode,
|
|
834
871
|
result,
|
|
835
|
-
ruleName: ruleName$
|
|
872
|
+
ruleName: ruleName$1,
|
|
836
873
|
});
|
|
837
874
|
}
|
|
838
875
|
}
|
|
839
876
|
});
|
|
840
|
-
}
|
|
877
|
+
}
|
|
878
|
+
};
|
|
841
879
|
|
|
842
|
-
|
|
843
|
-
|
|
880
|
+
ruleFunction.ruleName = ruleName$1;
|
|
881
|
+
ruleFunction.messages = messages$1;
|
|
882
|
+
ruleFunction.meta = meta;
|
|
844
883
|
|
|
845
|
-
|
|
884
|
+
var spacing = createPlugin(ruleName$1, ruleFunction);
|
|
846
885
|
|
|
847
886
|
var typography = createVariableRule(
|
|
848
887
|
'primer/typography',
|
|
@@ -867,583 +906,6 @@ var typography = createVariableRule(
|
|
|
867
906
|
'https://primer.style/css/utilities/typography',
|
|
868
907
|
);
|
|
869
908
|
|
|
870
|
-
// Meant as temp until we can move to primitives or css
|
|
871
|
-
const colorTypes = ['accent', 'success', 'attention', 'severe', 'danger', 'open', 'closed', 'done', 'sponsors'];
|
|
872
|
-
|
|
873
|
-
var utilities$1 = {
|
|
874
|
-
color: [
|
|
875
|
-
{
|
|
876
|
-
value: 'var(--color-fg-default)',
|
|
877
|
-
utilityClass: 'color-fg-default',
|
|
878
|
-
},
|
|
879
|
-
{
|
|
880
|
-
value: 'var(--color-fg-muted)',
|
|
881
|
-
utilityClass: 'color-fg-muted',
|
|
882
|
-
},
|
|
883
|
-
{
|
|
884
|
-
value: 'var(--color-fg-subtle)',
|
|
885
|
-
utilityClass: 'color-fg-subtle',
|
|
886
|
-
},
|
|
887
|
-
].concat(
|
|
888
|
-
colorTypes.map(type => {
|
|
889
|
-
return {
|
|
890
|
-
value: `var(--color-${type}-fg)`,
|
|
891
|
-
utilityClass: `color-fg-${type}`,
|
|
892
|
-
}
|
|
893
|
-
}),
|
|
894
|
-
),
|
|
895
|
-
'background-color': [
|
|
896
|
-
{
|
|
897
|
-
value: 'var(--color-canvas-default)',
|
|
898
|
-
utilityClass: 'color-bg-default',
|
|
899
|
-
},
|
|
900
|
-
{
|
|
901
|
-
value: 'var(--color-canvas-overlay)',
|
|
902
|
-
utilityClass: 'color-bg-overlay',
|
|
903
|
-
},
|
|
904
|
-
{
|
|
905
|
-
value: 'var(--color-canvas-inset)',
|
|
906
|
-
utilityClass: 'color-bg-inset',
|
|
907
|
-
},
|
|
908
|
-
{
|
|
909
|
-
value: 'var(--color-canvas-subtle)',
|
|
910
|
-
utilityClass: 'color-bg-subtle',
|
|
911
|
-
},
|
|
912
|
-
{
|
|
913
|
-
value: 'transparent',
|
|
914
|
-
utilityClass: 'color-bg-transparent',
|
|
915
|
-
},
|
|
916
|
-
]
|
|
917
|
-
.concat(
|
|
918
|
-
colorTypes.map(type => {
|
|
919
|
-
return {
|
|
920
|
-
value: `var(--color-${type}-subtle)`,
|
|
921
|
-
utilityClass: `color-bg-${type}`,
|
|
922
|
-
}
|
|
923
|
-
}),
|
|
924
|
-
)
|
|
925
|
-
.concat(
|
|
926
|
-
colorTypes.map(type => {
|
|
927
|
-
return {
|
|
928
|
-
value: `var(--color-${type}-emphasis)`,
|
|
929
|
-
utilityClass: `color-bg-${type}-emphasis`,
|
|
930
|
-
}
|
|
931
|
-
}),
|
|
932
|
-
),
|
|
933
|
-
'border-color': [
|
|
934
|
-
{
|
|
935
|
-
value: 'var(--color-border-default',
|
|
936
|
-
utilityClass: 'color-border-default',
|
|
937
|
-
},
|
|
938
|
-
{
|
|
939
|
-
value: 'var(--color-border-muted',
|
|
940
|
-
utilityClass: 'color-border-muted',
|
|
941
|
-
},
|
|
942
|
-
{
|
|
943
|
-
value: 'var(--color-border-subtle',
|
|
944
|
-
utilityClass: 'color-border-subtle',
|
|
945
|
-
},
|
|
946
|
-
]
|
|
947
|
-
.concat(
|
|
948
|
-
colorTypes.map(type => {
|
|
949
|
-
return {
|
|
950
|
-
value: `var(--color-${type}-muted)`,
|
|
951
|
-
utilityClass: `color-border-${type}`,
|
|
952
|
-
}
|
|
953
|
-
}),
|
|
954
|
-
)
|
|
955
|
-
.concat(
|
|
956
|
-
colorTypes.map(type => {
|
|
957
|
-
return {
|
|
958
|
-
value: `var(--color-${type}-emphasis)`,
|
|
959
|
-
utilityClass: `color-border-${type}-emphasis`,
|
|
960
|
-
}
|
|
961
|
-
}),
|
|
962
|
-
),
|
|
963
|
-
margin: Array.from(new Array(6)).map((_, i) => {
|
|
964
|
-
return {
|
|
965
|
-
value: `$spacer-${i + 1}`,
|
|
966
|
-
utilityClass: `m-${i + 1}`,
|
|
967
|
-
}
|
|
968
|
-
}),
|
|
969
|
-
'margin-top': Array.from(new Array(6)).map((_, i) => {
|
|
970
|
-
return {
|
|
971
|
-
value: `$spacer-${i + 1}`,
|
|
972
|
-
utilityClass: `mt-${i + 1}`,
|
|
973
|
-
}
|
|
974
|
-
}),
|
|
975
|
-
'margin-right': Array.from(new Array(6)).map((_, i) => {
|
|
976
|
-
return {
|
|
977
|
-
value: `$spacer-${i + 1}`,
|
|
978
|
-
utilityClass: `mr-${i + 1}`,
|
|
979
|
-
}
|
|
980
|
-
}),
|
|
981
|
-
'margin-bottom': Array.from(new Array(6)).map((_, i) => {
|
|
982
|
-
return {
|
|
983
|
-
value: `$spacer-${i + 1}`,
|
|
984
|
-
utilityClass: `mb-${i + 1}`,
|
|
985
|
-
}
|
|
986
|
-
}),
|
|
987
|
-
'margin-left': Array.from(new Array(6)).map((_, i) => {
|
|
988
|
-
return {
|
|
989
|
-
value: `$spacer-${i + 1}`,
|
|
990
|
-
utilityClass: `ml-${i + 1}`,
|
|
991
|
-
}
|
|
992
|
-
}),
|
|
993
|
-
padding: Array.from(new Array(6)).map((_, i) => {
|
|
994
|
-
return {
|
|
995
|
-
value: `$spacer-${i + 1}`,
|
|
996
|
-
utilityClass: `p-${i + 1}`,
|
|
997
|
-
}
|
|
998
|
-
}),
|
|
999
|
-
'padding-top': Array.from(new Array(6)).map((_, i) => {
|
|
1000
|
-
return {
|
|
1001
|
-
value: `$spacer-${i + 1}`,
|
|
1002
|
-
utilityClass: `pt-${i + 1}`,
|
|
1003
|
-
}
|
|
1004
|
-
}),
|
|
1005
|
-
'padding-right': Array.from(new Array(6)).map((_, i) => {
|
|
1006
|
-
return {
|
|
1007
|
-
value: `$spacer-${i + 1}`,
|
|
1008
|
-
utilityClass: `pr-${i + 1}`,
|
|
1009
|
-
}
|
|
1010
|
-
}),
|
|
1011
|
-
'padding-bottom': Array.from(new Array(6)).map((_, i) => {
|
|
1012
|
-
return {
|
|
1013
|
-
value: `$spacer-${i + 1}`,
|
|
1014
|
-
utilityClass: `pb-${i + 1}`,
|
|
1015
|
-
}
|
|
1016
|
-
}),
|
|
1017
|
-
'padding-left': Array.from(new Array(6)).map((_, i) => {
|
|
1018
|
-
return {
|
|
1019
|
-
value: `$spacer-${i + 1}`,
|
|
1020
|
-
utilityClass: `pl-${i + 1}`,
|
|
1021
|
-
}
|
|
1022
|
-
}),
|
|
1023
|
-
'line-height': [
|
|
1024
|
-
{
|
|
1025
|
-
value: '$lh-condensed-ultra',
|
|
1026
|
-
utilityClass: 'lh-condensed-ultra',
|
|
1027
|
-
},
|
|
1028
|
-
{
|
|
1029
|
-
value: '$lh-condensed',
|
|
1030
|
-
utilityClass: 'lh-condensed',
|
|
1031
|
-
},
|
|
1032
|
-
{
|
|
1033
|
-
value: '$lh-default',
|
|
1034
|
-
utilityClass: 'lh-default',
|
|
1035
|
-
},
|
|
1036
|
-
{
|
|
1037
|
-
value: '0',
|
|
1038
|
-
utilityClass: 'lh-0',
|
|
1039
|
-
},
|
|
1040
|
-
],
|
|
1041
|
-
'text-align': [
|
|
1042
|
-
{
|
|
1043
|
-
value: 'left',
|
|
1044
|
-
utilityClass: 'text-left',
|
|
1045
|
-
},
|
|
1046
|
-
{
|
|
1047
|
-
value: 'right',
|
|
1048
|
-
utilityClass: 'text-right',
|
|
1049
|
-
},
|
|
1050
|
-
{
|
|
1051
|
-
value: 'center',
|
|
1052
|
-
utilityClass: 'text-center',
|
|
1053
|
-
},
|
|
1054
|
-
],
|
|
1055
|
-
'font-style': [
|
|
1056
|
-
{
|
|
1057
|
-
value: 'italic',
|
|
1058
|
-
utilityClass: 'text-italic',
|
|
1059
|
-
},
|
|
1060
|
-
],
|
|
1061
|
-
'text-transform': [
|
|
1062
|
-
{
|
|
1063
|
-
value: 'uppercase',
|
|
1064
|
-
utilityClass: 'text-uppercase',
|
|
1065
|
-
},
|
|
1066
|
-
],
|
|
1067
|
-
'text-decoration': [
|
|
1068
|
-
{
|
|
1069
|
-
value: 'underline',
|
|
1070
|
-
utilityClass: 'text-underline',
|
|
1071
|
-
},
|
|
1072
|
-
{
|
|
1073
|
-
value: 'none',
|
|
1074
|
-
utilityClass: 'no-underline',
|
|
1075
|
-
},
|
|
1076
|
-
],
|
|
1077
|
-
'white-space': [
|
|
1078
|
-
{
|
|
1079
|
-
value: 'nowrap',
|
|
1080
|
-
utilityClass: 'no-wrap',
|
|
1081
|
-
},
|
|
1082
|
-
{
|
|
1083
|
-
value: 'normal',
|
|
1084
|
-
utilityClass: 'ws-normal',
|
|
1085
|
-
},
|
|
1086
|
-
],
|
|
1087
|
-
'word-break': [
|
|
1088
|
-
{
|
|
1089
|
-
value: 'break-all',
|
|
1090
|
-
utilityClass: 'wb-break-all',
|
|
1091
|
-
},
|
|
1092
|
-
],
|
|
1093
|
-
width: [
|
|
1094
|
-
{
|
|
1095
|
-
value: '100%',
|
|
1096
|
-
utilityClass: 'width-full',
|
|
1097
|
-
},
|
|
1098
|
-
{
|
|
1099
|
-
value: 'auto%',
|
|
1100
|
-
utilityClass: 'width-auto',
|
|
1101
|
-
},
|
|
1102
|
-
],
|
|
1103
|
-
overflow: [
|
|
1104
|
-
{
|
|
1105
|
-
value: 'visible',
|
|
1106
|
-
utilityClass: 'overflow-visible',
|
|
1107
|
-
},
|
|
1108
|
-
{
|
|
1109
|
-
value: 'hidden',
|
|
1110
|
-
utilityClass: 'overflow-hidden',
|
|
1111
|
-
},
|
|
1112
|
-
{
|
|
1113
|
-
value: 'auto',
|
|
1114
|
-
utilityClass: 'overflow-auto',
|
|
1115
|
-
},
|
|
1116
|
-
{
|
|
1117
|
-
value: 'scroll',
|
|
1118
|
-
utilityClass: 'overflow-scroll',
|
|
1119
|
-
},
|
|
1120
|
-
],
|
|
1121
|
-
'overflow-x': [
|
|
1122
|
-
{
|
|
1123
|
-
value: 'visible',
|
|
1124
|
-
utilityClass: 'overflow-x-visible',
|
|
1125
|
-
},
|
|
1126
|
-
{
|
|
1127
|
-
value: 'hidden',
|
|
1128
|
-
utilityClass: 'overflow-x-hidden',
|
|
1129
|
-
},
|
|
1130
|
-
{
|
|
1131
|
-
value: 'auto',
|
|
1132
|
-
utilityClass: 'overflow-x-auto',
|
|
1133
|
-
},
|
|
1134
|
-
{
|
|
1135
|
-
value: 'scroll',
|
|
1136
|
-
utilityClass: 'overflow-x-scroll',
|
|
1137
|
-
},
|
|
1138
|
-
],
|
|
1139
|
-
'overflow-y': [
|
|
1140
|
-
{
|
|
1141
|
-
value: 'visible',
|
|
1142
|
-
utilityClass: 'overflow-y-visible',
|
|
1143
|
-
},
|
|
1144
|
-
{
|
|
1145
|
-
value: 'hidden',
|
|
1146
|
-
utilityClass: 'overflow-y-hidden',
|
|
1147
|
-
},
|
|
1148
|
-
{
|
|
1149
|
-
value: 'auto',
|
|
1150
|
-
utilityClass: 'overflow-y-auto',
|
|
1151
|
-
},
|
|
1152
|
-
{
|
|
1153
|
-
value: 'scroll',
|
|
1154
|
-
utilityClass: 'overflow-y-scroll',
|
|
1155
|
-
},
|
|
1156
|
-
],
|
|
1157
|
-
height: [
|
|
1158
|
-
{
|
|
1159
|
-
value: '100%',
|
|
1160
|
-
utilityClass: 'height-full',
|
|
1161
|
-
},
|
|
1162
|
-
],
|
|
1163
|
-
'max-width': [
|
|
1164
|
-
{
|
|
1165
|
-
value: '100%',
|
|
1166
|
-
utilityClass: 'width-fit',
|
|
1167
|
-
},
|
|
1168
|
-
],
|
|
1169
|
-
'max-height': [
|
|
1170
|
-
{
|
|
1171
|
-
value: '100%',
|
|
1172
|
-
utilityClass: 'height-fit',
|
|
1173
|
-
},
|
|
1174
|
-
],
|
|
1175
|
-
'min-width': [
|
|
1176
|
-
{
|
|
1177
|
-
value: '0',
|
|
1178
|
-
utilityClass: 'min-width-0',
|
|
1179
|
-
},
|
|
1180
|
-
],
|
|
1181
|
-
float: [
|
|
1182
|
-
{
|
|
1183
|
-
value: 'left',
|
|
1184
|
-
utilityClass: 'float-left',
|
|
1185
|
-
},
|
|
1186
|
-
{
|
|
1187
|
-
value: 'right',
|
|
1188
|
-
utilityClass: 'float-right',
|
|
1189
|
-
},
|
|
1190
|
-
{
|
|
1191
|
-
value: 'none',
|
|
1192
|
-
utilityClass: 'float-none',
|
|
1193
|
-
},
|
|
1194
|
-
],
|
|
1195
|
-
'list-style': [
|
|
1196
|
-
{
|
|
1197
|
-
value: 'none',
|
|
1198
|
-
utilityClass: 'list-style-none',
|
|
1199
|
-
},
|
|
1200
|
-
],
|
|
1201
|
-
'user-select': [
|
|
1202
|
-
{
|
|
1203
|
-
value: 'none',
|
|
1204
|
-
utilityClass: 'user-select-none',
|
|
1205
|
-
},
|
|
1206
|
-
],
|
|
1207
|
-
visibility: [
|
|
1208
|
-
{
|
|
1209
|
-
value: 'hidden',
|
|
1210
|
-
utilityClass: 'v-hidden',
|
|
1211
|
-
},
|
|
1212
|
-
{
|
|
1213
|
-
value: 'visible',
|
|
1214
|
-
utilityClass: 'v-visible',
|
|
1215
|
-
},
|
|
1216
|
-
],
|
|
1217
|
-
'vertical-align': [
|
|
1218
|
-
{
|
|
1219
|
-
value: 'middle',
|
|
1220
|
-
utilityClass: 'v-align-middle',
|
|
1221
|
-
},
|
|
1222
|
-
{
|
|
1223
|
-
value: 'top',
|
|
1224
|
-
utilityClass: 'v-align-top',
|
|
1225
|
-
},
|
|
1226
|
-
{
|
|
1227
|
-
value: 'bottom',
|
|
1228
|
-
utilityClass: 'v-align-bottom',
|
|
1229
|
-
},
|
|
1230
|
-
{
|
|
1231
|
-
value: 'text-top',
|
|
1232
|
-
utilityClass: 'v-align-text-top',
|
|
1233
|
-
},
|
|
1234
|
-
{
|
|
1235
|
-
value: 'text-bottom',
|
|
1236
|
-
utilityClass: 'v-align-text-bottom',
|
|
1237
|
-
},
|
|
1238
|
-
{
|
|
1239
|
-
value: 'text-baseline',
|
|
1240
|
-
utilityClass: 'v-align-baseline',
|
|
1241
|
-
},
|
|
1242
|
-
],
|
|
1243
|
-
'font-weight': [
|
|
1244
|
-
{
|
|
1245
|
-
value: '$font-weight-normal',
|
|
1246
|
-
utilityClass: 'text-normal',
|
|
1247
|
-
},
|
|
1248
|
-
{
|
|
1249
|
-
value: '$font-weight-bold',
|
|
1250
|
-
utilityClass: 'text-bold',
|
|
1251
|
-
},
|
|
1252
|
-
{
|
|
1253
|
-
value: '$font-weight-semibold',
|
|
1254
|
-
utilityClass: 'text-semibold',
|
|
1255
|
-
},
|
|
1256
|
-
{
|
|
1257
|
-
value: '$font-weight-light',
|
|
1258
|
-
utilityClass: 'text-light',
|
|
1259
|
-
},
|
|
1260
|
-
],
|
|
1261
|
-
top: [
|
|
1262
|
-
{
|
|
1263
|
-
value: '0',
|
|
1264
|
-
utilityClass: 'top-0',
|
|
1265
|
-
},
|
|
1266
|
-
{
|
|
1267
|
-
value: 'auto',
|
|
1268
|
-
utilityClass: 'top-auto',
|
|
1269
|
-
},
|
|
1270
|
-
],
|
|
1271
|
-
right: [
|
|
1272
|
-
{
|
|
1273
|
-
value: '0',
|
|
1274
|
-
utilityClass: 'right-0',
|
|
1275
|
-
},
|
|
1276
|
-
{
|
|
1277
|
-
value: 'auto',
|
|
1278
|
-
utilityClass: 'right-auto',
|
|
1279
|
-
},
|
|
1280
|
-
],
|
|
1281
|
-
bottom: [
|
|
1282
|
-
{
|
|
1283
|
-
value: '0',
|
|
1284
|
-
utilityClass: 'bottom-0',
|
|
1285
|
-
},
|
|
1286
|
-
{
|
|
1287
|
-
value: 'auto',
|
|
1288
|
-
utilityClass: 'bottom-auto',
|
|
1289
|
-
},
|
|
1290
|
-
],
|
|
1291
|
-
left: [
|
|
1292
|
-
{
|
|
1293
|
-
value: '0',
|
|
1294
|
-
utilityClass: 'left-0',
|
|
1295
|
-
},
|
|
1296
|
-
{
|
|
1297
|
-
value: 'auto',
|
|
1298
|
-
utilityClass: 'left-auto',
|
|
1299
|
-
},
|
|
1300
|
-
],
|
|
1301
|
-
position: [
|
|
1302
|
-
{
|
|
1303
|
-
value: 'static',
|
|
1304
|
-
utilityClass: 'position-static',
|
|
1305
|
-
},
|
|
1306
|
-
{
|
|
1307
|
-
value: 'relative',
|
|
1308
|
-
utilityClass: 'position-relative',
|
|
1309
|
-
},
|
|
1310
|
-
{
|
|
1311
|
-
value: 'absolute',
|
|
1312
|
-
utilityClass: 'position-absolute',
|
|
1313
|
-
},
|
|
1314
|
-
{
|
|
1315
|
-
value: 'fixed',
|
|
1316
|
-
utilityClass: 'position-fixed',
|
|
1317
|
-
},
|
|
1318
|
-
{
|
|
1319
|
-
value: 'sticky',
|
|
1320
|
-
utilityClass: 'position-sticky',
|
|
1321
|
-
},
|
|
1322
|
-
],
|
|
1323
|
-
'box-shadow': [
|
|
1324
|
-
{
|
|
1325
|
-
value: 'none',
|
|
1326
|
-
utilityClass: 'box-shadow-none',
|
|
1327
|
-
},
|
|
1328
|
-
{
|
|
1329
|
-
value: 'var(--color-shadow-small)',
|
|
1330
|
-
utilityClass: 'box-shadow-small',
|
|
1331
|
-
},
|
|
1332
|
-
{
|
|
1333
|
-
value: 'var(--color-shadow-medium)',
|
|
1334
|
-
utilityClass: 'box-shadow-medium',
|
|
1335
|
-
},
|
|
1336
|
-
{
|
|
1337
|
-
value: 'var(--color-shadow-large)',
|
|
1338
|
-
utilityClass: 'box-shadow-large',
|
|
1339
|
-
},
|
|
1340
|
-
{
|
|
1341
|
-
value: 'var(--color-shadow-extra-large)',
|
|
1342
|
-
utilityClass: 'box-shadow-extra-large',
|
|
1343
|
-
},
|
|
1344
|
-
],
|
|
1345
|
-
border: [
|
|
1346
|
-
{
|
|
1347
|
-
value: '$border',
|
|
1348
|
-
utilityClass: 'border',
|
|
1349
|
-
},
|
|
1350
|
-
{
|
|
1351
|
-
value: '0',
|
|
1352
|
-
utilityClass: 'border-0',
|
|
1353
|
-
},
|
|
1354
|
-
],
|
|
1355
|
-
'border-top': [
|
|
1356
|
-
{
|
|
1357
|
-
value: '$border',
|
|
1358
|
-
utilityClass: 'border-top',
|
|
1359
|
-
},
|
|
1360
|
-
{
|
|
1361
|
-
value: '0',
|
|
1362
|
-
utilityClass: 'border-top-0',
|
|
1363
|
-
},
|
|
1364
|
-
],
|
|
1365
|
-
'border-right': [
|
|
1366
|
-
{
|
|
1367
|
-
value: '$border',
|
|
1368
|
-
utilityClass: 'border-right',
|
|
1369
|
-
},
|
|
1370
|
-
{
|
|
1371
|
-
value: '0',
|
|
1372
|
-
utilityClass: 'border-right-0',
|
|
1373
|
-
},
|
|
1374
|
-
],
|
|
1375
|
-
'border-bottom': [
|
|
1376
|
-
{
|
|
1377
|
-
value: '$border',
|
|
1378
|
-
utilityClass: 'border-bottom',
|
|
1379
|
-
},
|
|
1380
|
-
{
|
|
1381
|
-
value: '0',
|
|
1382
|
-
utilityClass: 'border-bottom-0',
|
|
1383
|
-
},
|
|
1384
|
-
],
|
|
1385
|
-
'border-left': [
|
|
1386
|
-
{
|
|
1387
|
-
value: '$border',
|
|
1388
|
-
utilityClass: 'border-left',
|
|
1389
|
-
},
|
|
1390
|
-
{
|
|
1391
|
-
value: '0',
|
|
1392
|
-
utilityClass: 'border-left-0',
|
|
1393
|
-
},
|
|
1394
|
-
],
|
|
1395
|
-
};
|
|
1396
|
-
|
|
1397
|
-
const ruleName$1 = 'primer/utilities';
|
|
1398
|
-
|
|
1399
|
-
const messages$1 = stylelint.utils.ruleMessages(ruleName$1, {
|
|
1400
|
-
rejected: (selector, utilityClass) => {
|
|
1401
|
-
return `Consider using the Primer utility '.${utilityClass}' instead of the selector '${selector}' in your html. https://primer.style/css/utilities`
|
|
1402
|
-
},
|
|
1403
|
-
});
|
|
1404
|
-
|
|
1405
|
-
// eslint-disable-next-line no-unused-vars
|
|
1406
|
-
var utilities = stylelint.createPlugin(ruleName$1, (enabled, options = {}, context) => {
|
|
1407
|
-
if (!enabled) {
|
|
1408
|
-
return noop$1
|
|
1409
|
-
}
|
|
1410
|
-
|
|
1411
|
-
const utilityReplacement = (declaration, value) => {
|
|
1412
|
-
const declarationUtilities = utilities$1[declaration];
|
|
1413
|
-
if (declarationUtilities) {
|
|
1414
|
-
return declarationUtilities.find(utility => {
|
|
1415
|
-
return utility.value === value
|
|
1416
|
-
})
|
|
1417
|
-
}
|
|
1418
|
-
};
|
|
1419
|
-
|
|
1420
|
-
const lintResult = (root, result) => {
|
|
1421
|
-
root.walkRules(rule => {
|
|
1422
|
-
if (!/^\.[\w\-_]+$/.exec(rule.selector)) {
|
|
1423
|
-
return
|
|
1424
|
-
}
|
|
1425
|
-
const decls = rule.nodes.filter(decl => decl.type === 'decl');
|
|
1426
|
-
|
|
1427
|
-
if (decls.length === 1) {
|
|
1428
|
-
const replacement = utilityReplacement(decls[0].prop, decls[0].value);
|
|
1429
|
-
if (replacement) {
|
|
1430
|
-
stylelint.utils.report({
|
|
1431
|
-
index: rule.sourceIndex,
|
|
1432
|
-
message: messages$1.rejected(rule.selector, replacement.utilityClass),
|
|
1433
|
-
node: rule,
|
|
1434
|
-
result,
|
|
1435
|
-
ruleName: ruleName$1,
|
|
1436
|
-
});
|
|
1437
|
-
}
|
|
1438
|
-
}
|
|
1439
|
-
});
|
|
1440
|
-
};
|
|
1441
|
-
|
|
1442
|
-
return lintResult
|
|
1443
|
-
});
|
|
1444
|
-
|
|
1445
|
-
function noop$1() {}
|
|
1446
|
-
|
|
1447
909
|
const ruleName = 'primer/no-display-colors';
|
|
1448
910
|
const messages = stylelint.utils.ruleMessages(ruleName, {
|
|
1449
911
|
rejected: varName => `${varName} is in alpha and should be used with caution with approval from the Primer team`,
|
|
@@ -1509,7 +971,6 @@ var index = {
|
|
|
1509
971
|
responsiveWidths,
|
|
1510
972
|
spacing,
|
|
1511
973
|
typography,
|
|
1512
|
-
utilities,
|
|
1513
974
|
noDisplayColors,
|
|
1514
975
|
],
|
|
1515
976
|
rules: {
|
|
@@ -1577,7 +1038,6 @@ var index = {
|
|
|
1577
1038
|
'primer/responsive-widths': true,
|
|
1578
1039
|
'primer/spacing': true,
|
|
1579
1040
|
'primer/typography': true,
|
|
1580
|
-
'primer/utilities': null,
|
|
1581
1041
|
'primer/no-display-colors': true,
|
|
1582
1042
|
'property-no-unknown': [
|
|
1583
1043
|
true,
|
|
@@ -1628,12 +1088,10 @@ var index = {
|
|
|
1628
1088
|
'comment-empty-line-before': null,
|
|
1629
1089
|
'length-zero-no-unit': null,
|
|
1630
1090
|
'selector-max-type': null,
|
|
1631
|
-
'primer/spacing': null,
|
|
1632
1091
|
'primer/colors': null,
|
|
1633
1092
|
'primer/borders': null,
|
|
1634
1093
|
'primer/typography': null,
|
|
1635
1094
|
'primer/box-shadow': null,
|
|
1636
|
-
'primer/utilities': null,
|
|
1637
1095
|
},
|
|
1638
1096
|
},
|
|
1639
1097
|
{
|
|
@@ -1658,9 +1116,8 @@ var index = {
|
|
|
1658
1116
|
},
|
|
1659
1117
|
{
|
|
1660
1118
|
files: ['**/*.module.css'],
|
|
1119
|
+
plugins: ['stylelint-css-modules-no-global-scoped-selector'],
|
|
1661
1120
|
rules: {
|
|
1662
|
-
// Don't support nesting until it's more broadly shipped
|
|
1663
|
-
'max-nesting-depth': [0],
|
|
1664
1121
|
'property-no-unknown': [
|
|
1665
1122
|
true,
|
|
1666
1123
|
{
|
|
@@ -1684,12 +1141,11 @@ var index = {
|
|
|
1684
1141
|
ignoreFunctions: ['global'],
|
|
1685
1142
|
},
|
|
1686
1143
|
],
|
|
1144
|
+
'css-modules/no-global-scoped-selector': true,
|
|
1687
1145
|
// temporarily disabiling Primer plugins while we work on upgrades https://github.com/github/primer/issues/3165
|
|
1688
|
-
'primer/spacing': null,
|
|
1689
1146
|
'primer/borders': null,
|
|
1690
1147
|
'primer/typography': null,
|
|
1691
1148
|
'primer/box-shadow': null,
|
|
1692
|
-
'primer/utilities': null,
|
|
1693
1149
|
},
|
|
1694
1150
|
},
|
|
1695
1151
|
],
|