# stylelint-config-cheesecakelabs

> This package provides Cheesecake Lab's .stylelintrc extensible shared config.

Latest version **0.1.0** (published 2019-03-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install stylelint-config-cheesecakelabs
pnpm add stylelint-config-cheesecakelabs
yarn add stylelint-config-cheesecakelabs
bun add stylelint-config-cheesecakelabs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-03-15 |
| First published | 2019-03-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | matbueno |
| Keywords | stylelint, stylelintconfig, ckl, cheesecake, cheesecakelabs |

## Links

- npm: https://www.npmjs.com/package/stylelint-config-cheesecakelabs
- Repository: https://github.com/CheesecakeLabs/stylelint-config-cheesecakelabs
- Homepage: https://github.com/CheesecakeLabs/stylelint-config-cheesecakelabs.git#readme
- Issues: https://github.com/CheesecakeLabs/stylelint-config-cheesecakelabs/issues
- npm.io page: https://npm.io/package/stylelint-config-cheesecakelabs

## Dependencies (1)

- [stylelint-config-standard](https://npm.io/package/stylelint-config-standard.md) ^18.2.0

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2019-03-15

## README

# 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](https://stylelint.io/user-guide/rules/)

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

---
_Source: https://npm.io/package/stylelint-config-cheesecakelabs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._