0.1.0 • Published 5 years ago
stylelint-config-cheesecakelabs v0.1.0
stylelint-config-cheesecakelabs
This package provides Cheesecake Lab's .stylelintrc extensible shared config.
Stylelint rules
rules: {
// extended from stylelint-config-recommended
"at-rule-no-unknown": true,
"block-no-empty": true,
"color-no-invalid-hex": true,
"comment-no-empty": true,
"declaration-block-no-duplicate-properties": [
true,
{
ignore: ["consecutive-duplicates-with-different-values"]
}
],
"declaration-block-no-shorthand-property-overrides": true,
"font-family-no-duplicate-names": true,
"font-family-no-missing-generic-family-keyword": true,
"function-calc-no-unspaced-operator": true,
"function-linear-gradient-no-nonstandard-direction": true,
"keyframe-declaration-no-important": true,
"media-feature-name-no-unknown": true,
"no-descending-specificity": true,
"no-duplicate-at-import-rules": true,
"no-duplicate-selectors": true,
"no-empty-source": true,
"no-extra-semicolons": true,
"no-invalid-double-slash-comments": true,
"property-no-unknown": true,
"selector-pseudo-class-no-unknown": true,
"selector-pseudo-element-no-unknown": true,
"selector-type-no-unknown": true,
"string-no-newline": true,
"unit-no-unknown": true,
// extended from stylelint-config-standard
"at-rule-empty-line-before": [ "always", {
except: [
"blockless-after-same-name-blockless",
"first-nested",
],
ignore: ["after-comment"],
} ],
"at-rule-name-case": "lower",
"at-rule-name-space-after": "always-single-line",
"at-rule-semicolon-newline-after": "always",
"block-closing-brace-empty-line-before": "never",
"block-closing-brace-newline-after": "always",
"block-closing-brace-newline-before": "always-multi-line",
"block-closing-brace-space-before": "always-single-line",
"block-opening-brace-newline-after": "always-multi-line",
"block-opening-brace-space-after": "always-single-line",
"block-opening-brace-space-before": "always",
"color-hex-case": "lower",
"color-hex-length": "short",
"comment-empty-line-before": [ "always", {
except: ["first-nested"],
ignore: ["stylelint-commands"],
} ],
"comment-whitespace-inside": "always",
"custom-property-empty-line-before": [ "always", {
except: [
"after-custom-property",
"first-nested",
],
ignore: [
"after-comment",
"inside-single-line-block",
],
} ],
"declaration-bang-space-after": "never",
"declaration-bang-space-before": "always",
"declaration-block-semicolon-newline-after": "always-multi-line",
"declaration-block-semicolon-space-after": "always-single-line",
"declaration-block-semicolon-space-before": "never",
"declaration-block-single-line-max-declarations": 1,
"declaration-block-trailing-semicolon": "always",
"declaration-colon-newline-after": "always-multi-line",
"declaration-colon-space-after": "always-single-line",
"declaration-colon-space-before": "never",
"declaration-empty-line-before": [ "always", {
except: [
"after-declaration",
"first-nested",
],
ignore: [
"after-comment",
"inside-single-line-block",
],
} ],
"function-comma-newline-after": "always-multi-line",
"function-comma-space-after": "always-single-line",
"function-comma-space-before": "never",
"function-max-empty-lines": 0,
"function-name-case": "lower",
"function-parentheses-newline-inside": "always-multi-line",
"function-parentheses-space-inside": "never-single-line",
"function-whitespace-after": "always",
"indentation": 2,
"length-zero-no-unit": true,
"max-empty-lines": 1,
"media-feature-colon-space-after": "always",
"media-feature-colon-space-before": "never",
"media-feature-name-case": "lower",
"media-feature-parentheses-space-inside": "never",
"media-feature-range-operator-space-after": "always",
"media-feature-range-operator-space-before": "always",
"media-query-list-comma-newline-after": "always-multi-line",
"media-query-list-comma-space-after": "always-single-line",
"media-query-list-comma-space-before": "never",
"no-eol-whitespace": true,
"no-missing-end-of-source-newline": true,
"number-leading-zero": "always",
"number-no-trailing-zeros": true,
"property-case": "lower",
"rule-empty-line-before": [ "always-multi-line", {
except: ["first-nested"],
ignore: ["after-comment"],
} ],
"selector-attribute-brackets-space-inside": "never",
"selector-attribute-operator-space-after": "never",
"selector-attribute-operator-space-before": "never",
"selector-combinator-space-after": "always",
"selector-combinator-space-before": "always",
"selector-descendant-combinator-no-non-space": true,
"selector-list-comma-newline-after": "always",
"selector-list-comma-space-before": "never",
"selector-max-empty-lines": 0,
"selector-pseudo-class-case": "lower",
"selector-pseudo-class-parentheses-space-inside": "never",
"selector-pseudo-element-case": "lower",
"selector-pseudo-element-colon-notation": "double",
"selector-type-case": "lower",
"unit-case": "lower",
"value-list-comma-newline-after": "always-multi-line",
"value-list-comma-space-after": "always-single-line",
"value-list-comma-space-before": "never",
"value-list-max-empty-lines": 0,
// Added to Cheesecake Lab's configuration, as per online recomendation for postcss
"max-nesting-depth": 3,
"max-empty-lines": 2,
"indentation": 4,
"string-quotes": "double",
"no-duplicate-selectors": true,
"rule-empty-line-before": "always-multi-line",
"media-feature-range-operator-space-before": "always",
"media-feature-range-operator-space-after": "always",
"media-feature-parentheses-space-inside": "never",
"media-feature-colon-space-before": "never",
"media-feature-colon-space-after": "always"
}
All possible rules are in stylelint's documentation
Examples
Before the use of the linter
.d2b-hero {
padding-top: 97px;
min-height: 283px;
}
.d2b-hero__background {
background-position: center;
background-size: cover;
}
.d2b-hero__hand-device {
max-width: 107px;
position: absolute;
left: 0;
bottom: 0;
@include media($break-m) {
position: static;
max-width: 400px;
margin-bottom: -1px;
vertical-align: bottom;
}
}
.d2b-hero__item {
vertical-align: bottom;
&.d2b-hero__item--right {
text-align: center;
display: block;
width: 100%;
margin-top: -14px;
@include media($break-m){
display: inline-block;
margin-top: 0;
vertical-align: top;
width: 66.666%;
text-align: left;
}
}
}
.d2b-hero__title {
@include font-size(40);
color: $white;
line-height: 38px;
font-family: $secondary-typeface;
font-weight: normal;
margin: 0 auto;
text-align: center;
@include media($break-m) {
color: $white;
@include font-size(60);
line-height: 81px;
}
}
.d2b-hero__subtitle {
color: $white;
@include font-size(16);
font-weight: normal;
margin: 2px 0 10px 0;
}
.d2b-hero__features {
list-style: none;
li {
margin-bottom: 7px;
svg {
display: inline-block;
fill: $orange;
width: 40px;
vertical-align: middle;
}
p {
@include font-size(14);
margin: 12px auto 12px 12px;
display: inline-block;
color: $gray-65;
vertical-align: middle;
}
&:last-of-type {
margin-bottom: 0;
}
}
@include media($break-m) {
padding-left: 0;
li {
svg {
fill: $white;
}
p {
color: $white;
@include font-size(20);
}
}
}
}
.d2b-hero__btn {
@include font-size(16);
padding: 9px 19px;
@include media($break-m) {
padding: 18px 57px;
@include font-size(26);
}
}
.d2b-header__line {
width: 1px;
height: 14px;
background-color: $white;
display: inline-block;
vertical-align: middle;
margin: 0 10px;
@include media($break-xl) {
margin: 0 10px 0 -20px;
height: 24px;
}
&.is-scrolled {
background-color: $gray-65;
}
}
.d2b-header__logo {
display: inline-block;
vertical-align: middle;
max-width: 72px;
img {
width: 100%;
vertical-align: sub;
}
@include media($break-xl) {
max-width: 151px;
img {
width: 100%;
}
}
&.is-scrolled {
display: none;
}
}
.d2b-header__logo--scrolled {
display: none;
&.is-scrolled {
display: inline-block;
vertical-align: middle;
max-width: 72px;
img {
width: 100%;
vertical-align: sub;
}
@include media($break-xl) {
max-width: 151px;
img {
width: 100%;
}
}
}
}
.d2b-header{
.xl--l-container {
.nav-menu__btn-wrapper {
margin: 0;
display: inline-block;
position: fixed;
right: 0;
.nav-menu__btn {
margin-right: 15px;
margin-top: 12px;
background-color: $white;
padding: 6px 8px;
color: $gray-65;
vertical-align: text-top;
}
.nav-menu__link {
display: none;
@include font-size(16);
}
&.is-scrolled {
.nav-menu__btn {
background-color: $orange;
color: $white;
}
}
@include media($break-xl) {
margin-right: 90px;
.nav-menu__link {
display:inline-block;
color: $white;
text-decoration: none;
text-transform: uppercase;
margin-top: 22px;
vertical-align: top;
}
.nav-menu__btn {
margin-top: 17px;
}
&.is-scrolled {
.nav-menu__link {
color: $gray-65;
padding: 0;
padding-right: 10px;
}
}
}
}
}
}
After the use
.d2b-hero {
padding-top: 97px;
min-height: 283px;
}
.d2b-hero__background {
background-position: center;
background-size: cover;
}
.d2b-hero__hand-device {
max-width: 107px;
position: absolute;
left: 0;
bottom: 0;
@include media($break-m) {
position: static;
max-width: 400px;
margin-bottom: -1px;
vertical-align: bottom;
}
}
.d2b-hero__item {
vertical-align: bottom;
&.d2b-hero__item--right {
text-align: center;
display: block;
width: 100%;
margin-top: -14px;
@include media($break-m) {
display: inline-block;
margin-top: 0;
vertical-align: top;
width: 66.666%;
text-align: left;
}
}
}
.d2b-hero__title {
@include font-size(40);
color: $white;
line-height: 38px;
font-family: $secondary-typeface;
font-weight: normal;
margin: 0 auto;
text-align: center;
@include media($break-m) {
color: $white;
@include font-size(60);
line-height: 81px;
}
}
.d2b-hero__subtitle {
color: $white;
@include font-size(16);
font-weight: normal;
margin: 2px 0 10px 0;
}
.d2b-hero__features {
list-style: none;
li {
margin-bottom: 7px;
svg {
display: inline-block;
fill: $orange;
width: 40px;
vertical-align: middle;
}
p {
@include font-size(14);
margin: 12px auto 12px 12px;
display: inline-block;
color: $gray-65;
vertical-align: middle;
}
&:last-of-type {
margin-bottom: 0;
}
}
@include media($break-m) {
padding-left: 0;
li {
svg {
fill: $white;
}
p {
color: $white;
@include font-size(20);
}
}
}
}
.d2b-hero__btn {
@include font-size(16);
padding: 9px 19px;
@include media($break-m) {
padding: 18px 57px;
@include font-size(26);
}
}
.d2b-header__line {
width: 1px;
height: 14px;
background-color: $white;
display: inline-block;
vertical-align: middle;
margin: 0 10px;
@include media($break-xl) {
margin: 0 10px 0 -20px;
height: 24px;
}
&.is-scrolled {
background-color: $gray-65;
}
}
.d2b-header__logo {
display: inline-block;
vertical-align: middle;
max-width: 72px;
img {
width: 100%;
vertical-align: sub;
}
@include media($break-xl) {
max-width: 151px;
img {
width: 100%;
}
}
&.is-scrolled {
display: none;
}
}
.d2b-header__logo--scrolled {
display: none;
&.is-scrolled {
display: inline-block;
vertical-align: middle;
max-width: 72px;
img {
width: 100%;
vertical-align: sub;
}
@include media($break-xl) {
max-width: 151px;
img {
width: 100%;
}
}
}
}
.d2b-header {
.xl--l-container {
.nav-menu__btn-wrapper {
margin: 0;
display: inline-block;
position: fixed;
right: 0;
.nav-menu__btn {
margin-right: 15px;
margin-top: 12px;
background-color: $white;
padding: 6px 8px;
color: $gray-65;
vertical-align: text-top;
}
.nav-menu__link {
display: none;
@include font-size(16);
}
&.is-scrolled {
.nav-menu__btn {
background-color: $orange;
color: $white;
}
}
@include media($break-xl) {
margin-right: 90px;
.nav-menu__link {
display: inline-block;
color: $white;
text-decoration: none;
text-transform: uppercase;
margin-top: 22px;
vertical-align: top;
}
.nav-menu__btn {
margin-top: 17px;
}
&.is-scrolled {
.nav-menu__link {
color: $gray-65;
padding: 0;
padding-right: 10px;
}
}
}
}
}
}
0.1.0
5 years ago