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