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

Поддержание чистоты 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.