От автора: мне нравится CSS в JS. Я использую его все время на работе и в личных проектах. Мне нравится, как он создает крутые темы и динамические стили. Но одна вещь, которой мне не хватает из обычного CSS — это линтинг.
Stylelint для CSS — это фантастический проект, который позволяет легко применять соглашения и избегать ошибок в стилях. Однако до недавнего времени я никогда не использовал его с CSS в JS. В выпуске версии 9.5.0 была добавлена поддержка первого класса для написания CSS в JS. Теперь выполнять линтинг в стиле популярных библиотек, таких как styleled-components и emotion, стало проще, чем когда-либо.
Остальная часть этой статьи будет посвящена emotion, но процесс линтинга styled-components практически идентичен.
Линтинг CSS
Давайте начнем с создания нового приложения React. Для этого мы можем использовать create-react-app.
|
1 |
create-react-app my-app |
Далее мы добавим некоторые зависимости. Мы можем начать с добавления emotion.
|
1 2 |
cd my-app yarn add @emotion/core @emotion/styled |
Это устанавливает две зависимости emotion. С помощью emotion мы можем стилизовать компоненты двумя разными способами. Чтобы убедиться, что линтинг работает должным образом, нам нужно начать с создания и стилизации компонентов.
Стилизация компонентов с помощью свойства CSS
Используя свойство css, мы можем передать либо стили объекта, либо стили строки.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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-теги.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
Теперь, когда мы разработали некоторые компоненты, давайте займемся линтингом!
|
1 |
yarn add -D stylelint stylelint-config-standard |
Затем создайте файл с именем .stylelintrc.
|
1 2 3 4 5 |
{ "extends": [ "stylelint-config-standard" ] } |
Затем мы добавляем скрипт npm в package.json.
|
1 |
"lint:css": "stylelint './src/*.js'" |
После этого мы можем запустить скрипт, и получим следующий вывод
|
1 2 3 4 5 6 |
$ 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.
|
1 2 3 4 5 6 7 8 9 10 |
{ "extends": [ "stylelint-config-standard" ], "rules": { "no-empty-source": null, "declaration-empty-line-before": null, "no-missing-end-of-source-newline": null, } } |
Теперь мы можем запустить yarn lint:css и получаем следующий вывод.
|
1 2 3 |
$ 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 — отличный способ запуска тестов, так почему бы не использовать его и для линтинга? Начните с установки некоторых зависимостей.
|
1 |
yarn add -D jest jest-runner-stylelint |
Далее создайте jest.stylelint.config.js.
|
1 2 3 4 5 6 |
module.exports = { runner: "jest-runner-stylelint", displayName: "stylelint", moduleFileExtensions: ["js"], testMatch: ["<rootDir>/src/**/*.js"], }; |
Затем мы обновляем команду lint:css:
|
1 |
"lint:css": "jest --config jest.stylelint.config.js |
После этого мы снова запускаем lint:css.
|
1 2 3 |
$ 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:
|
1 2 3 |
"resolutions": { "jest-runner-stylelint/stylelint": "10.0.1" } |
Затем снова запустите yarn, чтобы переустановить зависимости, и выполните yarn lint:css. На этот раз мы получаем тот же результат, что и раньше:
|
1 2 3 4 5 6 7 8 9 |
$ 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
Источник: //medium.com
Редакция: Команда webformyself.
