Linting stylelint

Making sure our css code is well written and maintainable

Use stylelint to lint your css code.

👨‍🏭 Installing

• Install @forter/stylelint-config

  npm add --save-dev @forter/stylelint-config

• Adjust your package.json with the following

  {
    "scripts": {
      "lint:stylelint": "stylelint **/*.css ",
      "format:stylelint": "stylelint **/*.css --fix"
    },
    "stylelintConfig": {
      "extends": [
        "@forter/stylelint-config"
      ]
    }
  }

👩‍🚀 What you get

Extends stylelint-config-standard.

This will install @forter/stylelint-config, a config based on forter but allows for some specialities needed for Web Components.

• Apply linting to css files
• Apply linting for best practices

👨‍💻 Usage

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

{
  "extends": "@forter/stylelint-config"
}

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

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

Run:

• npm run lint:stylelint to check if any file is not correctly formatted

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