stylelint-config-uploadcare

stylelint-config-uploadcare

The standard shareable config for stylelint.

Use it as is or as a foundation for your own config.

It is derived from the common rules found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, Github's PrimerCSS Guidelines, Google's CSS Style Guide, Airbnb's Styleguide, and @mdo's Code Guide.

It favours flexibility over strictness for things like multi-line lists and single-line rulesets, and tries to avoid potentially divisive rules.

Example

@import url(x.css);
@import url(y.css);

/**
 * Multi-line comment
 */

.selector-1,
.selector-2,
.selector-3[type="text"] {
	background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
	box-sizing: border-box;
	display: block;
	color: #333;
}

.selector-a,
.selector-b:not(:first-child) {
	padding: 10px !important;
	top: calc(calc(1em * 2) / 3);
}

.selector-x { width: 10%; }
.selector-y { width: 20%; }
.selector-z { width: 30%; }

/* Single-line comment */

@media (min-width >= 60em) {
	.selector {
		/* Flush to parent comment */
		transform: translate(1, 1) scale(3);
	}
}

@media (min-orientation: portrait), projection and (color) {
	.selector-i + .selector-ii {
		background: color(rgb(0, 0, 0) lightness(50%));
		font-family: helvetica, "arial black", sans-serif;
	}
}

/* Flush single line comment */
@media
	screen and (min-resolution: 192dpi),
	screen and (min-resolution: 2dppx) {

	.selector {
		background-image:
			repeating-linear-gradient(
				-45deg,
				transparent,
				#fff 25px,
				rgba(255, 255, 255, 1) 50px
			);
		margin: 10px;
		margin-bottom: 5px;
		box-shadow:
			0 1px 1px #000,
			0 1px 0 #fff,
			2px 2px 1px 1px #ccc inset;
		height: 10rem;
	}

	/* Flush nested single line comment */
	.selector::after {
		content: '→';
		background-image: url(x.svg);
	}
}

Note: the config is tested against this example, as such the example contains plenty of CSS syntax, formatting and features.

Installation

$ npm install stylelint-config-uploadcare

Usage

If you've installed stylelint-config-uploadcare locally within your project, just set your stylelint config to:

{
	"extends": "stylelint-config-uploadcare"
}

If you've globally installed stylelint-config-uploadcare using the -g flag, then you'll need to use the absolute path to stylelint-config-uploadcare in your config e.g.

{
	"extends": "/absolute/path/to/stylelint-config-uploadcare"
}

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to add the at-rule-no-unknown rule and use its ignoreAtRules option, change the indentation to tabs, turn off the number-leading-zero rule and add the unit-whitelist rule:

{
	"extends": "stylelint-config-uploadcare",
	"rules": {
		"at-rule-no-unknown": [ true, {
			"ignoreAtRules": [
				"include",
				"mixin"
			]
		}],
		"indentation": "tab",
		"number-leading-zero": null,
		"unit-whitelist": ["em", "rem", "s"]
	}
}

Suggested additions

stylelint-config-uploadcare is a great foundation for your own config. You can extend it create a tailored and much stricter config:

• Specify what quotes must be used using:
  • font-family-name-quotes
  • function-url-quotes
  • selector-attribute-quotes
  • string-quotes
• Specify the order of properties using:
  • declaration-block-properties-order
• If you use autoprefixer you'll want to disallow vendor prefixes using:
  • at-rule-no-vendor-prefix
  • media-feature-name-no-vendor-prefix
  • property-no-vendor-prefix
  • selector-no-vendor-prefix
  • value-no-vendor-prefix
• Control specificity using:
  • max-nesting-depth
  • selector-max-compound-selectors
  • selector-max-specificity
• Specify acceptable selector types, units, properties, functions and words in comments using:
  • at-rule-blacklist
  • at-rule-no-unknown
  • at-rule-whitelist
  • color-named
  • color-no-hex
  • comment-word-blacklist
  • declaration-no-important
  • declaration-property-unit-blacklist
  • declaration-property-unit-whitelist
  • declaration-property-value-blacklist
  • declaration-property-value-whitelist
  • function-blacklist
  • function-whitelist
  • property-blacklist
  • property-no-unknown
  • property-whitelist
  • selector-attribute-operator-blacklist
  • selector-attribute-operator-whitelist
  • selector-no-attribute
  • selector-no-combinator
  • selector-no-id
  • selector-no-qualifying-type
  • selector-no-type
  • selector-no-universal
  • unit-blacklist
  • unit-whitelist
• Specify acceptable naming patterns using:
  • custom-media-pattern
  • custom-property-pattern
  • selector-class-pattern
  • selector-id-pattern
• Specify a notation when there are one or more valid representations using:
  • font-weight-notation
• Specify the acceptable use of custom properties using:
  • custom-property-no-outside-root
  • selector-root-no-composition
• Specify what types of URLs are allowed using:
  • function-url-data-uris
  • function-url-no-scheme-relative
• Specify a maximum line length using:
  • max-line-length
• Catch possible mistakes related to your targeted browsers using:
  • no-browser-hacks
  • no-unsupported-browser-features

Using the config with SugarSS syntax

The config is broadly compatible with SugarSS syntax. You will need to turn off the declaration-block-trailing-semicolon rule, as so:

{
	"extends": "stylelint-config-uploadcare",
	"rules": {
		"declaration-block-trailing-semicolon": null
	}
}

Changelog

License