Skip to content

v2.0.0
Compare
Choose a tag to compare
@nikolai-shabalin nikolai-shabalin released this 20 Jul 13:58
· 68 commits to master since this release
v2.0.0
0515c83

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