Skip to content

Latest commit

 

History

History
848 lines (667 loc) · 31.4 KB

CHANGELOG.md

File metadata and controls

848 lines (667 loc) · 31.4 KB
Raw

Changelog

Все заметные изменения в этом проекте будут задокументированы в этом файле.

Формат основан на Keep a Changelog, и этот проект придерживается Semantic Versioning.

4.2.3 — 2024–05–28

Обновили Stylelint до 16.6.1

4.2.2 — 2024–05–24

Обновили Stylelint до 16.6.0

4.2.1 — 2024–05–02

  • Обновили Stylelint до 16.5.0
  • Обновили @stylistic/stylelint-plugin до 2.1.2

4.2.0 — 2024–04–02

  • Обновили все зависимости до самых свежих

  • Добавили новые правила:

    a {
  padding-top: 1px;
  padding-right: 2px;
  padding-bottom: 3px;
  padding-left: 4px; 
}
    a {
  padding: 1px 2px 3px 4px;
}

4.1.0 — 2024–02–19

  • Обновили husky до последней версии 9.0.11
  • Обновили @htmlacademy/editorconfig-cli до версии 2.0.9
  • Добавили новое правило named-grid-areas-alignment, которое выравнивает обращение к именованным областям в гриде

Плохо

/* ❌ Not aligned cell tokens */

div {
  grid-template-areas: 
    'a a a'
    'bb bb bb';
}

Хорошо

/* ✅ Aligned cell tokens */

div {
  grid-template-areas: 
    'a  a  a'
    'bb bb bb'
}

4.0.5 — 2024–02–01

4.0.4 — 2024–01–28

Обновили husky до последней версии 9.0.6

4.0.3 — 2024–01–19

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

4.0.2 — 2024–01–16

Добавили новое правило comment-whitespace-inside, которое требует пробелы внутри комментариев. Это повышает читабельность комментариев.

4.0.1 — 2023–12–28

  • Отсортировали правило по документу https://stylelint.io/user-guide/rules/
  • Добавили требование прописывать CSS-свойства в lowercase "selector-class-pattern": "^[a-z0-9-_]+$",

4.0.0 — 2023–12–25

  • Обновили stylelint-codeguide до "@stylistic/stylelint-plugin": "2.0.0"
  • Обновили stylelint до версии 16.1.0

3.0.2 — 2023–12–13

Перенесли stylelint-codeguide в правильные зависимости

3.0.1 — 2023–12–12

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

3.0.0 — 2023–12–12

  • Обновили поддержку stylelint до 16 версии
  • Изменили поддержку node.js по рекомендации stylelint, не ниже 18.12
  • Обновили stylelint-codeguide

2.0.6 — 2023–10–19

  • Обновили node engine до современной. Удалили 16.x
  • Обновили stylelint-codeguide
  • Обновили peerDependencies

2.0.5 — 2023–10–17

Обновили все зависимости и заменили окончания строк

2.0.4 — 2023–08–02

Обновили все зависимости и уточняет версию peerDependencies

2.0.3 — 2023–07–28

Починили поле "exports": "./.stylelintrc", в package.json

2.0.2 — 2023–07–25

Обновили peerDependencies

2.0.1 — 2023–07–20

Добавили media-query-no-invalid, которое запрещает недопустимые медиа-запросы и media-feature-name-value-no-unknown, которое запрещает неизвестные значения для медиавыражений.

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) для удобства.

1.1.5 — 2023–06–11

Удалено

  • Зависимость stylelint-config-recommended (с сохранением его правил).

Исправлено

  • Возможность указывать размерность длины у 0 в функции var().

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

/* Плохо */
a { top: 0px; }

1.1.4 — 2022–12–06

Добавлено

  • Правило font-weight-notation с требованием для font-weight только числовых значений или относительных ключевых слов bolder и lighter (спецификация).

    /* Хорошо */
a { font-weight: 400; }
a { font: bolder 20px system-ui; }

/* Плохо */
a { font-weight: normal; }
a { font: bold 20px system-ui; }

1.1.3 — 2022–11–29

Обновлено

  • stylelint до верисии 14.15.0.

1.1.2 — 2022–10–02

Обновлено

  • stylelint до верисии 14.13.0.

1.1.1 — 2022–09–20

Обновлено

  • stylelint до верисии 14.12.0.

1.1.0 — 2022–09–02

Изменено

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

Добавлено

  • Правило color-hex-alpha с запретом использования четвёртого параметра у hex-цветов для альфа-канала, потому что из значения ab не понятно сколько это в дробях, а при коммуникации мы используем человекопонятные «Прозрачность 67.1%».

    /* Хорошо */
a { color: #ffffff; }
a { color: rgb(255 255 255 / 67.1%); }

/* Плохо */
a { color: #ffffffab; }

  • Правило custom-property-no-missing-var-function с запретом использовать кастомные свойства без var.

    /* Хорошо */
a { color: var(--foo); }

/* Плохо */
a { color: --foo; }

  • Правило function-calc-no-unspaced-operator с требованием пробелов вокруг операторов в calc().

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

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

  • В правило length-zero-no-unit игнорирование функции var(). Напоминание: кастомным свойствам лучше указывать единицы измерения.

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

/* Плохо */
a { top: 0px; }

  • Правило alue-keyword-case с требованием camelCase для ключевых слов из SVG, и нижнего регистра для всех остальных.

    /* Хорошо */
a { display: block; }
a { top: currentColor; }

/* Плохо */
a { display: Block; }
a { top: currentcolor; }

  • Правило selector-not-notation с запретом сложного синтаксиса псевдокласса :not().

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

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

  • Правило annotation-no-unknown с запретом неизвестных аннотаций.

    /* Хорошо */
a { color: green !important; }

/* Плохо */
a { color: green !imprtant; }

  • Правило keyframe-block-no-duplicate-selectors с запретом повторяющихся селекторов в @keyframe.

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

/* Плохо */
@keyframes foo { 0% {} 0% {} }

  • Правило keyframe-selector-notation с требованием однотипных селекторов в @keyframes: или только проценты, или только ключевые слова.

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

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

  • Правило selector-max-universal с запретом использования более двух универсальных селекторов подряд.

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

/* Плохо */
* * * {}

1.0.0 — 2022–08–23

Обновлено

  • stylelint до верисии 14.11.0.
  • stylelint-config-recommended до верисии 9.0.0.

0.1.12 — 2021–12–07

Обновлено

  • Небезопасные зависимости.

0.1.11 — 2021–11–09

Добавлено

  • Возможность указывать единицы измерения длины у 0 в кастомных свойствах, чтобы при использовании этих кастомных свойств в calc() у операндов всегда была верная размерность.

    /* Хорошо */
a { top: 0; }
a { --foo: 0px; }

/* Плохо */
a { top: 0px; }

0.1.10 — 2021–06–15

Обновлено

  • Зависимости.

0.1.9 — 2021–06–15

Добавлено

  • Возможность использовать многострочность в фунциях, при этом не ломая однострочные функции. Это позволяет достичь комбинация правил:

    • declaration-colon-space-after с требованием пробела после двоеточия только для деклараций с однострочной функцией.
    • function-comma-space-before c запретом пробелов перед запятой между аргументами любых функций,
    • function-comma-space-after с требованием пробела после запятой между аргументами однострочных функций,
    • function-parentheses-space-inside с запретом пробельных символов внутри скобок только у однострочных функций.
    /* Хорошо */
a {
  transform: translate(1px, 1px);
}
a {
  transform:
    translate(
      1px,
      1px
    );
}

/* Плохо */
a {
  transform: translate(1px,1px);
}
a {
  transform: translate( 1px, 1px );
}
a {
  transform:
    translate(1px, 1px);
}
a {
  transform: translate(
    1px, 1px
  );
}

    Спасибо @firefoxic

0.1.8 — 2021–06–10

Обновлено

  • Зависимости.

0.1.7 — 2021–06–04

Исправлено

  • Работа с зависимостями.

0.1.6 — 2021–06–01

Изменено

  • Правило color-no-hex отключено, что разрешает писать hex-цвета.

Добавлено

  • Правило no-invalid-position-at-import-rule с требованием указывать @import раньше всех остальных директив, кроме @charset "utf-8";.

    /* Хорошо */
@charset "utf-8";
@import "foo.scss";
@import "bar.scss";

/* Плохо */
@import "foo.scss";
@media all {};
@import "bar.scss";

  • Правило color-no-invalid-hex с запретом невалидных hex-цветов.

    /* Хорошо */
a { color: #fff1a0; }
a { color: #123450aa; }

/* Плохо */
a { color: #fff1az; }
a { color: #12345aa; }

  • Правило color-named с запретом именованных цветов.

    /* Хорошо */
a { color: #ff0000; }
a { color: rgb(255 0 0); }
a { color: hsl(0 100% 50%); }

/* Плохо */
a { color: red; }

  • Правило number-max-precision с запретом превышения точности значений выше 2.

    /* Хорошо */
a { top: 0; }
a { top: 0.1%; }
a { top: 0.12%; }

/* Плохо */
a { top: 0.123%; }

0.1.5 — 2021–05–28

Изменено

  • README переведён на русский.

Добавлено

  • Тесты, чтобы правильнее следить за добавлением новых правил или изменением нынешних.

  • Стартовый конфиг stylelint-config-recommended.

  • Правило declaration-no-important с запретом использования аннотации !important.

    /* Хорошо */
a { color: #000000; }

/* Плохо */
a { color: #000000 !important; }

  • Правило keyframe-declaration-no-important с запретом использования аннотации !important в @keyframes.

    /* Хорошо */
@keyframes foo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Плохо */
@keyframes foo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1 !important;
  }
}

  • Правило max-nesting-depth с запретом уровней вложенности больше 2 без учёта директивы @media.

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

/* Плохо */
a {
  b {             /* 1 */
    i {           /* 2 */
      u {         /* 3 */
        top: 0;
      }
    }
  }
}
a {
  @--my-at-rule { /* 1 */
    b {           /* 2 */
      i {         /* 3 */
        top: 0;
      }
    }
  }
}
a {
  &--foo {        /* 1 */
    b {           /* 2 */
      i {         /* 3 */
        top: 0;
      }
    }
  }
}
a {
  b {             /* 1 */
    &:hover {     /* 2 */
      i {         /* 3 */
        top: 0;
      }
    }
  }
}

Удалено

  • Правила, повторяющие правила из stylelint-config-recommended.

0.1.4 — 2019–07–08

Добавлено

  • Директива @each в перечень разрешенных.
  • Правило function-calc-no-invalid.

0.1.1 — 2018–01–15

Добавлено

  • Правило font-family-no-missing-generic-family-keyword с требованием указания общего семейства шрифта.

    /* Хорошо */
a { font-family: Arial, sans-serif; }
a { font: 1em / 1.3 Times, serif, Apple Color Emoji; }
a { font: inherit; }
a { font-family: var(--font-family-common); }
a { font-family: Helvetica, var(--font-family-common); }

/* Плохо */
a { font-family: Helvetica, Arial, Verdana, Tahoma; }
a { font: 1em / 1.3 Times; }

  • Правило no-duplicate-at-import-rules с запретом дублирования @import.

    /* Хорошо */
@import "foo.scss";
@import "bar.scss";

/* Плохо */
@import "foo.scss";
@import "bar.scss";
@import "foo.scss";

0.1.0 — 2017–09–11

Добавлено

  • Правила для stylelint версии 7.9.0.