@littlemissrobot/stylelint-config

Little Miss Robot - Stylelint configuration

This package contains a configuration for stylelint that we, at Little Miss Robot, like to use when working with CSS!

This extension can be installed in the project as an npm package and can be extended in the project stylelint configuration. Does this mean you are dependant on these settings? No, these values can be overwritten in that project stylelint configuration under the rules key.

Info

This package contains 4 types of rulesets:

• base
• scss
• order
• high-performance-animation

We recommend using them all when working with sass. We also like to use prettier to make sure our code formatting is consistent and we don't have to worry about stylistic issues.

Install

1. Install package

$ npm install --save-dev @littlemissrobot/stylelint-config

Usage

1. Create a .stylelintrc in the root of your project
2. Import the default stylelint setup (enabling prettier and stylelint-standard-config-scss)

module.exports = {
  extends: ["@littlemissrobot/stylelint-config"],
};

3. Extend the base stylelint settings within the .stylelintrc. Order is important here!

module.exports = {
  extends: [
    "@littlemissrobot/stylelint-config",
    "@littlemissrobot/stylelint-config/linters/base",
  ],
};

3. Extend any other stylelint settings within the .stylelintrc. Order is important here!

module.exports = {
  extends: [
    "@littlemissrobot/stylelint-config",
    "@littlemissrobot/stylelint-config/linters/base",
    "@littlemissrobot/stylelint-config/linters/scss",
    "@littlemissrobot/stylelint-config/linters/order",
    "@littlemissrobot/stylelint-config/linters/high-performance-animation",
  ],
};

4. Create a .prettierrc in the root of your project and setup its ruleset. Make sure it does not conflicts with your .editorconfig if you have one. You can write any special cases per extension in the overrides key. For example, the one we like to use:

{
	"printWidth": 80,
	"tabWidth": 4,
	"useTabs": true,
	"semi": true,
	"singleQuote": false,
	"quoteProps": "as-needed",
	"jsxSingleQuote": false,
	"trailingComma": "es5",
	"bracketSpacing": true,
	"bracketSameLine": false,
	"arrowParens": "always",
	"htmlWhitespaceSensitivity": "css",
	"vueIndentScriptAndStyle": false,
	"endOfLine": "lf",
	"overrides": [
		{
			"files": [
				"package.json",
				".composer.json",
				"*.yml",
				"*.md",
				"*.php"
			],
			"options": {
				"useTabs": false
			}
		},
		{
			"files": ["package.json", "*.yml", "*.md"],
			"options": {
				"tabWidth": 2
			}
		},
		{
			"files": ["composer.json", "*.php"],
			"options": {
				"tabWidth": 4
			}
		}
	]
}

Options

By default extending @littlemissrobot/stylelint-config will apply the basic setup. By adding one of these extra options you can apply linting for different extra plugins:

• @littlemissrobot/stylelint-config/linters/base: Base linting
• @littlemissrobot/stylelint-config/linters/scss: Scss linting
• @littlemissrobot/stylelint-config/linters/order: Order scss properties linting
• @littlemissrobot/stylelint-config/linters/high-performance-animation: Lints on properties which are not allowed to be animated.

stylelint-order

Plugin used to lint the order of the properties within selectors. As a reference, the order defined contains:

1. Content

content

2. Position

position
top
right
bottom
left
z-index

3. Box modal

display
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-start
grid-column-end
grid-row
grid-row-start
grid-row-end
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
flex-wrap
flex-direction
justify-content
align-items
align-content
align-self
flex
flex-basis
flex-grow
flex-shrink
flex-flow
order
float
clear
object-fit
object-position
vertical-align
width
min-width
max-width
height
min-height
max-height
overflow
overflow-x
overflow-y
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left

4. Typography

font
font-family
font-variant
font-weight
font-style
font-size
line-height
letter-spacing
text-align
text-transform
text-decoration
text-indent
text-overflow
text-shadow
text-wrap
hyphens
white-space
line-break
line-clamp
word-break
word-spacing
word-wrap

5. Visual

background
background-image
background-repeat
background-position
background-origin
background-size
background-clip
border-radius
border-radius-top-left
border-radius-top-right
border-radius-bottom-right
border-radius-bottom-left
border
border-width
border-style
border-color
border-top
border-top-width
border-top-style
border-top-color
border-right
border-right-width
border-right-style
border-right-color
border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
border-left
border-left-width
border-left-style
border-left-color
background-color
color
box-shadow
opacity
appearance
outline
list-style
list-style-type
list-style-image
list-style-position
filter

6. SVG

fill
stroke-width
stroke-align
stroke-alignment
stroke-break
stroke-color
stroke-dash-corner
stroke-dashcorner
stroke-dash-justify
stroke-dashadjust
stroke-dasharray
stroke-dashoffset
stroke-image
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-origin
stroke-position
stroke-repeat
stroke-size
stroke-width

7. Animation

perspective
perspective-origin
transform
transform-origin
transform-style
transition
transition-property
transition-duration
transition-timing-function
transition-delay
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
will-change

8. Misc

speak
cursor
backface-visibility
pointer-events
visibility
resize
user-select