stylelint-config-cheesecakelabs

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;
          }
        }
      }
    }
  }
}