01
Июл
2019

Поддержание чистоты CSS в JS с помощью Stylelint

Поддержание чистоты CSS в JS с помощью Stylelint

От автора: мне нравится CSS в JS. Я использую его все время на работе и в личных проектах. Мне нравится, как он создает крутые темы и динамические стили. Но одна вещь, которой мне не хватает из обычного CSS — это линтинг.

Stylelint для CSS — это фантастический проект, который позволяет легко применять соглашения и избегать ошибок в стилях. Однако до недавнего времени я никогда не использовал его с CSS в JS. В выпуске версии 9.5.0 была добавлена поддержка первого класса для написания CSS в JS. Теперь выполнять линтинг в стиле популярных библиотек, таких как styleled-components и emotion, стало проще, чем когда-либо.

Остальная часть этой статьи будет посвящена emotion, но процесс линтинга styled-components практически идентичен.

Линтинг CSS

Давайте начнем с создания нового приложения React. Для этого мы можем использовать create-react-app.

create-react-app my-app

Далее мы добавим некоторые зависимости. Мы можем начать с добавления emotion.

cd my-app
yarn add @emotion/core @emotion/styled

Это устанавливает две зависимости emotion. С помощью emotion мы можем стилизовать компоненты двумя разными способами. Чтобы убедиться, что линтинг работает должным образом, нам нужно начать с создания и стилизации компонентов.

Стилизация компонентов с помощью свойства CSS

Используя свойство css, мы можем передать либо стили объекта, либо стили строки.

import { jsx, css } from "@emotion/core";const Footer = props => (
  <footer
    css={{
      // object styles!
      width: "100%",
    }}
  >
    <p
      css={css`
        /* string styles */
        color: blue;
        text-align: centre;
        font-size: 1.2re;
      `}
    >
      {props.children}
    </p>
  </footer>
);export default Footer;

В этом примере кода мы создали компонент футера. Мы стилизовали тег футера с помощью стилей объектов, а тег абзаца — с помощью строковых стилей. Для получения дополнительной информации, ознакомьтесь с документацией emotion.

Использование стилизованных компонентов

Используя styled, мы можем передавать стили в HTML-теги.

import React from "react";
import styled from "@emotion/styled";const StyledHeader = styled.header`
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
`;const StyledH1 = styled.h1`
  font-size: 2re;
`;const Header = props => (
  <StyledHeader>
    <StyledH1>{props.children}</StyledH1>
  </StyledHeader>
);export default Header;

В этом примере кода мы создали компонент заголовка и применили его к стилю prop.

Использование stylelint

Теперь, когда мы разработали некоторые компоненты, давайте займемся линтингом!

yarn add -D stylelint stylelint-config-standard

Затем создайте файл с именем .stylelintrc.

{
  "extends": [
    "stylelint-config-standard"
  ]
}

Затем мы добавляем скрипт npm в package.json.

"lint:css": "stylelint './src/*.js'"

После этого мы можем запустить скрипт, и получим следующий вывод

$ stylelint './src/*.js'src/footer.js
 17:20  ✖  Unexpected unknown unit "re"        unit-no-unknown
 18:6   ✖  Unexpected missing end-of-source    no-missing-end-of-source-newline
           newlinesrc/header.js
  5:3  ✖  Expected empty line before declaration  declaration-empty-line-before
 13:3  ✖  Expected empty line before declaration  declaration-empty-line-beforeerror Command failed with exit code 2.

Как видите, мы получаем несколько ошибок. Это связано с тем, что stylelint-config-standard оптимизирован для простого старого CSS. Давайте добавим несколько переопределений правил в файл .stylelintrc.

{
  "extends": [
    "stylelint-config-standard"
  ],
  "rules": {
    "no-empty-source": null,
    "declaration-empty-line-before": null,
    "no-missing-end-of-source-newline": null,
  }
}

Теперь мы можем запустить yarn lint:css и получаем следующий вывод.

$ stylelint './src/*.js'src/footer.js
 17:20  ✖  Unexpected unknown unit "re"   unit-no-unknownsrc/header.js
 13:14  ✖  Unexpected unknown unit "re"   unit-no-unknown

Упс! Похоже, мы написали плохой CSS. Хорошо, что Stylelint помог нам. Как вы видите, stylelint обнаружил, что наши ошибки были в компонентах, стилизованных как с помощью css, так и с помощью styled. Довольно круто!

Использование jest со stylelint

Jest — отличный способ запуска тестов, так почему бы не использовать его и для линтинга? Начните с установки некоторых зависимостей.

yarn add -D jest jest-runner-stylelint

Далее создайте jest.stylelint.config.js.

module.exports = {
  runner: "jest-runner-stylelint",
  displayName: "stylelint",
  moduleFileExtensions: ["js"],
  testMatch: ["<rootDir>/src/**/*.js"],
};

Затем мы обновляем команду lint:css:

"lint:css": "jest --config jest.stylelint.config.js

После этого мы снова запускаем lint:css.

$ jest --config jest.stylelint.config.js
 FAIL   stylelint  src/serviceWorker.jssrc/serviceWorker.js
 25:5  ✖  Unknown word   CssSyntaxError

В чем дело? Похоже, jest-runner-stylelint использует версию stylelint 8.3.1. Поддержка CSS в JS была добавлена в stylelint позже.

Давайте укажем jest-runner-stylelint использовать последнюю версию stylelint. Просто добавьте поле resolutions в package.json:

"resolutions": {
    "jest-runner-stylelint/stylelint": "10.0.1"
 }

Затем снова запустите yarn, чтобы переустановить зависимости, и выполните yarn lint:css. На этот раз мы получаем тот же результат, что и раньше:

$ jest --config jest.stylelint.config.js
 PASS   stylelint  src/serviceWorker.js
 FAIL   stylelint  src/footer.jssrc/footer.js
 17:20  ✖  Unexpected unknown unit "re"   unit-no-unknownPASS   stylelint  src/App.test.js
 PASS   stylelint  src/App.js
 PASS   stylelint  src/index.js
 FAIL   stylelint  src/header.jssrc/header.js
 13:14  ✖  Unexpected unknown unit "re"   unit-no-unknownTest Suites: 2 failed, 4 passed, 6 total
Tests:       2 failed, 4 passed, 6 total

Теперь все, что нам осталось сделать, это исправить ошибки в этих модулях, и мы готовы к работе. Посмотрите репозиторий на GitHub.

Автор: Malcolm Laing

Источник: https://medium.com

Редакция: Команда webformyself.

Share

Тебе может это понравится...