Modify config to have overrides that correspond to multiple file types

[jonrohan]

Currently the config is optimized for .scss files. As when this package was created we were only using these files for styling. We now have other ways of styling that we need to lint.

This pull request aims to refactor the config to adapt for all package styles.

• .scss
• modules.css
• .pcss postcss
• .tsx styled react components

To accomplish this, I utilized stylelint's overrides options for changing rules and syntax for other versions.

The config now starts with general rules that can be applied to all situations. These rules are meant to be turned on in all the config file types.

stylelint-config/index.js

Lines 42 to 112 in 91d79a7

	rules: {
	'alpha-value-notation': 'number',
	'at-rule-disallowed-list': ['extend'],
	'at-rule-no-unknown': null,
	'block-no-empty': true,
	'color-function-notation': null,
	'color-named': 'never',
	'color-no-invalid-hex': true,
	'comment-no-empty': null,
	'custom-property-pattern': null,
	'declaration-block-no-duplicate-properties': [true, {ignore: ['consecutive-duplicates']}],
	'declaration-block-no-redundant-longhand-properties': null,
	'declaration-block-no-shorthand-property-overrides': true,
	'declaration-property-value-disallowed-list': {
	'/^transition/': ['/all/'],
	'/^background/': ['http:', 'https:'],
	'/^border/': ['none'],
	'/.+/': ['initial'],
	},
	'function-calc-no-unspaced-operator': true,
	'function-linear-gradient-no-nonstandard-direction': true,
	'function-no-unknown': null,
	'keyframes-name-pattern': null,
	'max-nesting-depth': 3,
	'media-feature-name-no-unknown': null,
	'media-feature-name-no-vendor-prefix': null,
	'no-descending-specificity': null,
	'no-duplicate-selectors': true,
	'no-invalid-position-at-import-rule': [true, {ignoreAtRules: ['use']}],
	'number-max-precision': null,
	'order/properties-order': propertyOrder,
	'plugin/no-unsupported-browser-features': [
	true,
	{
	severity: 'warning',
	ignore: ['css-nesting'],
	ignorePartialSupport: true,
	browsers,
	},
	],
	'primer/borders': true,
	'primer/box-shadow': true,
	'primer/colors': true,
	'primer/no-deprecated-colors': true,
	'primer/no-override': true,
	'primer/no-undefined-vars': [
	true,
	{severity: 'warning', files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'},
	],
	'primer/no-unused-vars': [true, {severity: 'warning'}],
	'primer/responsive-widths': true,
	'primer/spacing': true,
	'primer/typography': true,
	'primer/utilities': null,
	'selector-class-pattern': null,
	'selector-max-compound-selectors': 3,
	'selector-max-id': 0,
	'selector-max-specificity': '0,4,0',
	'selector-max-type': 0,
	'selector-no-qualifying-type': true,
	'selector-pseudo-element-no-unknown': true,
	'string-no-newline': true,
	'unit-no-unknown': true,
	'value-keyword-case': null,
	'selector-not-notation': null,
	'import-notation': ['string'],
	'annotation-no-unknown': null,
	'keyframe-selector-notation': ['percentage-unless-within-keyword-only-block'],
	'media-query-no-invalid': null,
	'media-feature-range-notation': ['prefix'],
	},

After that I have a config for each type in the overrides:

SCSS

stylelint-config/index.js

Lines 114 to 128 in 91d79a7

	{
	files: ['**/*.scss'],
	customSyntax: 'postcss-scss',
	plugins: ['stylelint-scss'],
	rules: {
	'scss/at-extend-no-missing-placeholder': true,
	'scss/at-rule-no-unknown': true,
	'scss/declaration-nested-properties-no-divided-groups': true,
	'scss/dollar-variable-no-missing-interpolation': true,
	'scss/function-quote-no-quoted-strings-inside': true,
	'scss/function-unquote-no-unquoted-strings-inside': true,
	'scss/no-duplicate-mixins': true,
	'scss/selector-no-redundant-nesting-selector': true,
	},
	},

Styled react components

stylelint-config/index.js

Lines 129 to 161 in 91d79a7

	{
	files: ['**/*.tsx'],
	customSyntax: 'postcss-styled-syntax',
	rules: {
	'order/properties-order': null,
	'rule-empty-line-before': null,
	'declaration-empty-line-before': null,
	'comment-empty-line-before': null,
	'length-zero-no-unit': null,
	'selector-max-type': null,
	'primer/spacing': null,
	'primer/colors': null,
	'primer/borders': null,
	'primer/typography': null,
	'primer/box-shadow': null,
	'primer/no-deprecated-colors': [
	true,
	{
	inlineFallback: true,
	},
	],
	'primer/no-scale-colors': true,
	'primer/no-display-colors': true,
	'primer/utilities': null,
	'property-no-unknown': [
	true,
	{
	ignoreProperties: ['@container', 'container-type'],
	},
	],
	'primer/no-override': null,
	},
	},

PostCSS

stylelint-config/index.js

Lines 162 to 182 in 91d79a7

	{
	files: ['**/*.pcss'],
	rules: {
	'media-feature-range-notation': null,
	'import-notation': null,
	'custom-property-pattern': null,
	'selector-class-pattern': null,
	'keyframes-name-pattern': null,
	'no-descending-specificity': null,
	'declaration-block-no-redundant-longhand-properties': null,
	'color-function-notation': 'legacy',
	'selector-nested-pattern': '^&\\s?\\W',
	'at-rule-no-unknown': [
	true,
	{
	ignoreAtRules: ['mixin', 'define-mixin'],
	},
	],
	'primer/no-deprecated-colors': true,
	},
	},

CSS Modules

stylelint-config/index.js

Lines 183 to 188 in 91d79a7

	{
	files: ['**/*.module.css'],
	rules: {
	'primer/no-override': null,
	},
	},

[changeset-bot]

🦋 Changeset detected

Latest commit: f15fe7d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/stylelint-config	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[langermank]

Cool 😍 do you want me to test this against dotcom, or did you already give it a go?

[jonrohan]

Cool 😍 do you want me to test this against dotcom, or did you already give it a go?

I already tested in dotcom, going to test in PVC and PCSS also