v2.0.0

[2.0.0] — 2023–07–20

Изменено

• Основной файл конфига конвертирован из js в json с переименованием его в стандартное имя конфига для stylelint — .stylelintrc. Теперь stylelint распознаёт его как свой конфиг и применяет прямо в этом проекте. Конфиг теперь можно взять и не изменяя использовать в другом месте даже без подключения его как зависимость. И, что наиболее важно, можно легко копировать из него строки и вставлять в свой, расширяемый этим, конфиг для переопределения правил.
• Правила отсортированы по алфавиту для более быстрого и удобного поиска. Именование правил уже само по себе группирует их так, чтобы было проще их найти.
• package.json реорганизован для большего удобства пользователей пакета.
• Команды линтинга теперь не нуждаются в уточнении синтаксиса, благодаря переопределениям (см. ниже).

Добавлено

• Бэйджи в README для наглядности состояния проекта.

• Файл с текстом лицензии.

• Переопределения (overrides) для кастомных синтаксисов less и scss. В эти переопределения:

  • для обоих синтаксисов добавлено отключение правила declaration-property-value-no-unknown, как и советует документация Stylelint;
  • для less перенесено из общих правил разрешение кастомной функции fade();
  • для scss перенесено из общих правил разрешение кастомных директив, в которые добавлены @use, @forward, @if, @else и @for.

• Плагин stylelint-codeguide, возвращающий поддержку удаляемых из Stylelint 76 стилистических правил. Теперь добавив к ним префикс codeguide/ можно продолжать использовать их в stylelint@16+.

• Правило function-linear-gradient-no-nonstandard-direction с требованием валидных и стандартных значения направления линейных градиентов: углы или to с названием одной или двух смежных сторон.

  /* Хорошо */
  a { background: linear-gradient(45%, #ffffff, #000000); }
  a { background: linear-gradient(to top, #ffffff, #000000); }
  a { background: linear-gradient(to top left, #ffffff, #000000); }
  
  /* Плохо */
  a { background: linear-gradient(45, #ffffff, #000000); }
  a { background: linear-gradient(top, #ffffff, #000000); }
  a { background: linear-gradient(to top top, #ffffff, #000000); }
  a { background: linear-gradient(to top bottom, #ffffff, #000000); }

  • Правило declaration-colon-newline-after с требованием переноса строки после двоеточия в многострочных декларациях.

  /* Хорошо */
  a {
    background: url("foo.png"), url("bar.png");
  }
  a {
    background:
      url("foo.png"),
      url("bar.png");
  }
  a {
    transform: translate(1px, 1px);
  }
  a {
    transform:
      translate(
        1px,
        1px
      );
  }
  
  /* Плохо */
  a {
    transform: translate(
      1px,
      1px
    );
  }
  a {
    background: url("foo.png"),
      url("bar.png");
  }

• Правило import-notation с требованием указания пути простой строкой, а не функцией url(), потому что хоть в CSS и работают оба варианта, но Sass склеивает только варианты со строками, а с url() оставляет в коде.

  /* Хорошо */
  @import "foo.css";
  
  /* Плохо */
  @import url("foo.css");

• Правило selector-max-compound-selectors с запретом уровня сложности составных селекторов выше 3. Сложносоставные селекторы — это те, что ошибочно называют селекторами потомка или вложенности. Ошибочно, потому что любые комбинаторы повышают уровень сложности составного селектора, включая + и ~, которые «не увеличивают вложенность».

  /* Хорошо */
  .foo div {}
  .foo > .bar {}
  .foo + .bar:not(a ~ b) {}
  
  /* Плохо */
  .foo .bar .baz {}
  .foo .bar + .baz {}
  .foo {
    .baz {
      & > .bar {}
    }
  }

Исправлено

• Ограничение вложенности. Правило max-nesting-depth ограничивает именно вложенности блоков кода (фигурных скобок) друг в друга (уберегая от «ад вложенности» вроде «ада колбэков» в JS), а не так называемые «вложенные селекторы», которые правильнее называть сложносоставными селекторами. Причём прежняя настройка ингнорирования директивы @media отключала линтинг этим правилом внутри вложенной @media, что позволяет делать там неограниченное количество уровней вложенности. Новая настройка игнорирует псевдоклассы всегда и директивы тогда, когда они не содержат собственные CSS-правила, а лишь оборачивают собой другие блоки кода. И при этом внутри проигнорированных псевдоклассов и директив продолжается подсчёт уровеней вложенности.

  /* Хорошо */
  a {
    b {              /* 1 */
      i {            /* 2 */
        top: 0;
      }
    }
  }
  .foo {
    &--bar {         /* 1 */
      a {            /* 2 */
        top: 0;
      }
    }
  }
  a {
    &:hover {
      b {            /* 1 */
        i {          /* 2 */
          top: 0;
        }
      }
    }
  }
  a {
    @media print {
      b {            /* 1 */
        i {          /* 2 */
          top: 0;
        }
      }
    }
  }
  a {
    @media print {   /* 1 */
      left: 0;
      b {            /* 2 */
        top: 0;
      }
    }
  }
  
  /* Плохо */
  a {
    b {              /* 1 */
      i {            /* 2 */
        u {          /* 3 */
          top: 0;
        }
      }
    }
  }
  .foo {
    &--bar {         /* 1 */
      b {            /* 2 */
        i {          /* 3 */
          top: 0;
        }
      }
    }
  }
  a {
    &:hover {
      b {            /* 1 */
        i {          /* 2 */
          u {        /* 3 */
            top: 0;
          }
        }
      }
    }
  }
  a {
    @media print {   /* 1 */
      left: 0;
      b {            /* 2 */
        i {          /* 3 */
          top: 0;
        }
      }
    }
  }
  a {
    @media print {
      b {            /* 1 */
        i {          /* 2 */
          u {        /* 3 */
            top: 0;
          }
        }
      }
    }
  }

Удалено

• Ненужные отключения некоторых правил.

Обновлено

• Этот файл (на основе Keep a Changelog) для удобства.

v1.1.5

1.1.5

• отказались от зависимости stylelint-config-recommended
• поправили правило length-zero-no-unit на ["var", "/^--/"]

'length-zero-no-unit': [true, {
  'ignore': ['custom-properties'],
  'ignoreFunctions': ["var", "/^--/"],
}],

Добавили правило font-weight-notation

1.1.4

Добавили правило font-weight-notation:

{
  'font-weight-notation': [
    "numeric",
    {
      'ignore': [
        "relative"
      ]
    }
  ]
}

Теперь любое использование font-weight должно быть числовым

a { font-weight: 700; }

a { font: italic 400 20px; }

@font-face { font-weight: 400 700; }

Также разрешены значения относительные значения bolder и lighter. Спецификация.

Обновили stylelint 14.14.0

Обновили зависимости до последних версий:

• stylelint 14.14.0 и 14.15.0

Обновили stylelint 14.13.0

Обновили stylelint до версии 14.13.0

Обновили стайлинт до 14.12.0

Обновили зависимости до последних версий:

• stylelint 14.12.0.

Догоняет до stylelint 14.11.0

1.1.0

• Отсортировал список правил по rules list
• Значения текущих правил не поменялись, но некоторые дополнились новыми значениями. Одно правило может иметь несколько значений используя массив [rule, rule2]
• Добавили новые правила:

color-hex-alpha: never

Правило контролирует наличие четвёртого параметра у HEX для альфа канала.

Значение never запрещает использование a { color: #ffffffaa; }

Мотивация: из такой прозрачности aa не понятно сколько это в дробях. А при коммуникации мы используем человекопонятные “Прозрачность 50%”

custom-property-no-missing-var-function: true

Правило запрещает использовать кастомные свойства без var

Хорошо: color: var(--foo)

Плохо: color: --foo

function-calc-no-unspaced-operator: true

Заставляет ставить пробел вокруг оператора в функции calc()

Хорошо: a { top: calc(1px + 2px); }

Плохо: a { top: calc(1px+2px); }

length-zero-no-unit: ignoreFunctions: ["/^--/"]

Запрещает указывать единицы измерения, кроме функций

Хорошо: a { top: 0 }, a { top: var(--foo, 0px); }

Плохо: a { top: 0px }

Напоминалка: кастомным свойствам лучше указывать единицы измерения

value-keyword-case: [lower, { camelCaseSvgKeywords: true }]

Правило разрешает писать значения только в нижнем регистре.

'camelCaseSvgKeywords' : true - разрешает писать SVG-конструкции color: currentColor;. В SVG принято писать в camelCase.

selector-not-notation: simple

Следит за использованием селектора :not

Хорошо: :not(a):not(div) {}

Плохо: :not(a, div) {}

keyframe-block-no-duplicate-selectors : true

Запрещает повторяющие селекторы в keyframe блоке

Хорошо: @keyframes foo { 0% {} 100% {} }

Плохо: @keyframes foo { 0% {} 0% {} }

annotation-no-unknown: true

Запрещает странные аннотации

Хорошо: color: green !important;

Плохо: color: green !imprtant;

keyframe-selector-notation: percentage-unless-within-keyword-only-block

Заставляет писать однотипные точки в кейфреймах. Или только 0% или только from

Хорошо: @keyframes foo { 0% {} 100% {} } @keyframes foo { from {} to {} }

Плохо: @keyframes foo { from {} 100% {} }

selector-max-universal: 2

Запрещает использовать подряд универсальные селекторы

Хорошо: .foo * {} * * {}

Плохо: * * * {}

v1.0.0: Обновляет зависимости (#24)

Перешли на мажорную версию stylelint 14+. Обновили зависимости

0.1.12

Обновили небезопасные зависимости

0.1.11

0.1.11

Убрали возможность указывать 0 в кастомных свойствах

'length-zero-no-unit': [true, {
  'ignore': [
    "custom-properties"
  ]
}],

Из-за того, что 0, это <length>, а не <integer> или <number> в calc() из-за этого могут быть проблемы. У calc() не всегда получается работать с разными типами и чаще всего не получается как раз с <length>. Поэтому лучше всё-таки указывать тип значения в кастомном свойстве.

Плохо

:root {
  --size: 0;
}

Хорошо

:root {
  --size: 0px;
}