このブログポストはStylelintのバージョンV14について説明してます。もしStylelintのV15について知りたい方は次のブログポストのリンクを参考してください。
目次
概要
ウェブ開発をする時、ウェブのスタイルを管理するためCSS(Cascading Style Sheets)を使えます。今回のブログポストではStylelintを使ってCSS, SCSS, CSS-in-JSのコードスタイルを検査する方法について説明します。
ここで紹介するソースコードは下記のリンクで確認できます。
Nodeのインストール
Stylelintを使うためにはNodeをインストールする必要があります。各OSに合わせてNodeをインストールします。s
macOS
Homebrewはマックにパッケージをインストールしたり、管理するマック専用のパッケージ管理者です。Homebrewを使ってマックに必要なパッケージを簡単にインストールすることができます。次のコマンドを実行してHomebrewをインストールします。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
インストールしたら、次のコマンドを実行してうまくインストールされたか確認します。
brew --version
もし、バージョンが見えない場合、ターミナルを終了して、再び起動して実行してみます。すでにHomebrewがインストールされた方は下記のコマンドを実行してNodeをインストールします。
brew install node
Windows
ウィンドウズではChocolateyと言うパッケージマネージャーを使います。管理者権限でCMDまたはPowershellを開いて、下記のコマンドを実行してChocolateyをインストールします。
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
インストールが完了されたら、次のコマンドを実行してインストールができたか確認します。
choco –version
Chocolateyのバージョンが表示されない場合は、CMDまたはPowershellを終了して再び実行します。Chocolateyがインストールされたら下記のコマンドを実行してNodeをインストールします。
choco install -y nodejs.install
CSSのためのStylelint
CSSファイルを検査するため、Stylelintをインストールして使う方法について説明します。
CSSのためStylelintのpackage.json生成
StylelintはNodeの開発環境の上で動けます。したがって、Nodeのパッケージを管理するためのpackage.jsonファイルを生成する必要があります。次のコマンドを実行してpackage.jsonファイルを生成します。
npm init
コマンドを実行すると、次のように色んな質問が出ます。特に変更したいものがない場合は、全ての質問にEnterを入力します。
package name: (stylelint-example)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
その後、次のようにpackage.jsonファイルが生成されることが確認できます。
{
"name": "stylelint-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
CSSのためのStylelintのインストール
Stylelintを使ってCSSを検査したい場合は、下記のコマンドを使ってStylelintと追加で必要なライブラリをインストールします。
npm install --save-dev stylelint stylelint-config-standard stylelint-config-prettier
CSSのためのStylelintの設定
このようにインストールしたStylelintを使うために.stylelintrc.jsonファイルを生成して次のように修正する必要があります。
{
"extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}
CSSのためのStylelintの実行スクリプト
Stylelintを使って全てのCSSファイルを検査するためにはpackage.jsonファイルを次のように修正します。
{
...
"scripts": {
"lint:css": "stylelint --ignore-path .gitignore '**/*.css'",
},
...
}
--ignore-pathに.gitignoreファイルを設定して要らないファイルは検査しないように設定しました。
CSSのためのStylelintの実行
次はStylelintが上手く実行されるか確認するためtest.cssファイルを生成して次のように修正します。
h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
その後、次のコマンドを実行してStylelintが上手く実行されるか確認します。
npm run lint:css
Stylelintが上手くインストールされて設定されたら、次のようにワニングが表示されることが確認できます。
test.css
2:3 ✖ Unexpected longhand value '0 0 1rem 0' instead of '0 0 1rem' shorthand-property-no-redundant-values
test.cssファイルを次のように修正して、Stylelintを実行すると、問題が解決されることが確認できます。
h2 {
margin: 0 0 1rem;
font-size: 1.5rem;
}
SCSSのためのStylelint
SCSSファイルを検査するためStylelintをインストールして使う方法について説明します。
SCSSのためのStylelintのpackage.jsonの生成
StylelintはNodeの開発環境で動作します。したがって、Nodeのパッケージを管理するためのpackage.jsonファイルを生成する必要があります。次のコマンドを実行してpackage.jsonファイルを生成します。
npm init
コマンドを実行すると、次のように色んな質問が表示されます。特に変更したいことがなければ、全ての質問にEnterを入力します。
package name: (stylelint-example)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
そしたら、次のようにpackage.jsonファイルが生成されることが確認できます。
{
"name": "stylelint-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
SCSSのためのStylelintのインストール
Stylelintを使ってSCSSを検査したい場合、次のコマンドを実行してStylelintと追加で必要なライブラリをインストールします。
npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-prettier-scss
SCSSのためのStylelintの設定
このようにインストールしたStylelintを使うため.stylelintrc.jsonファイルを生成して次のように修正します。
{
"extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"]
}
SCSSのためのStylelintの実行スクリプト
Stylelintを使って全てのSCSSファイルを検査するためにpackage.jsonファイルを次のように修正します。
{
...
"scripts": {
"lint:css": "stylelint --ignore-path .gitignore '**/*.scss'",
},
...
}
--ignore-pathに.gitignoreファイルを設定して要らないファイルは検査しないように設定しました。
SCSSのためのStylelintの実行
次はStylelintが上手く実行されるか確認するためtest.scssファイルを生成して次のように修正します。
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
その後、次のコマンドを実行して、Stylelintが上手く実行されるか確認します。
npm run lint:css
Stylelintが上手くインストールされ、設定されたらか次のようにメッセージが表示されることが確認できます。
test.scss
1:14 ✖ Expected "Helvetica" to be "helvetica" value-keyword-case
test.scssファイルを次のように修正して、Stylelintを実行すると、問題が解決されることが確認できます。
$font-stack: helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
CSS-in-JSのためのStylelint
私は主にReactを使って開発をしてて、MUIとCSS-in-JSライブラリであるEmotionを使ってスタイリングを行っています。
Stylelintを使ってCSS-in-JSのスタイルを検査する方法について説明します。
プロジェクト準備
Stylelintを使ってCSS-in-JSのスタイルを検査するためにはCRA(create-react-app)を使ってサンプルプロジェクトを生成してみます。CRAをインストールしたりCRAを使ってReactプロジェクトを生成する方法について詳しい内容は以前のブログポストを参考してください。
次のコマンドを使ってReactプロジェクトを生成します。
npx create-react-app stylelint-example --template typescript
次のコマンドを使ってEmotionとMUIをインストールします。
npm install --save @mui/material @emotion/react @emotion/styled
そしてCSS-in-JSを使ってスタイリングをするため、./src/App.tsxファイルを開いて次のように修正します。
import styled from '@emotion/styled';
const Title = styled.h2`
margin: 0 0 1rem 0;
font-size: 1.5rem;
`;
function App() {
return (
<div>
<Title>Learn React</Title>
</div>
);
}
export default App;
CSS-in-JSのためのStylelintのインストール
Stylelintを使ってCSS-in-JSを検査したい場合は次のコマンドを実行してStylelintと追加で必要なライブラリをインストールする必要があります。
npm install --save-dev stylelint stylelint-config-standard stylelint-config-prettier postcss postcss-syntax @stylelint/postcss-css-in-js
CSS-in-JSのためのStylelintの設定
このようにインストールしたStylelintを使うため.stylelintrc.jsonファイルを生成して次のように修正します。
{
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
"overrides": [
{
"files": ["**/*.tsx"],
"customSyntax": "@stylelint/postcss-css-in-js"
}
],
"rules": {
"function-no-unknown": [true, { "ignoreFunctions": ["/\\${/"] }]
}
}
CSS-in-JSのためのStylelintの実行スクリプト
Stylelintを使って全てのCSS-in-JSファイルを検査するためにpackage.jsonファイルを次のように修正します。
{
...
"scripts": {
"lint:css": "stylelint --ignore-path .gitignore '**/*.(css|tsx)'"
},
...
}
--ignore-pathに.gitignoreファイルを設定して要らないファイルは検査しないように設定しました。
CSS-in-JSのためのStylelintの実行
次のコマンドを実行して、Stylelintが上手く実行されるか確認します。
npm run lint:css
Stylelintが上手くインストールされて、設定されたら下記のようにエラーメッセージが表示されることが確認できます。
src/App.css
1:1 ✖ Expected class selector to be kebab-case selector-class-pattern
5:1 ✖ Expected class selector to be kebab-case selector-class-pattern
11:3 ✖ Expected class selector to be kebab-case selector-class-pattern
16:1 ✖ Expected class selector to be kebab-case selector-class-pattern
27:1 ✖ Expected class selector to be kebab-case selector-class-pattern
31:12 ✖ Expected keyframe name to be kebab-case keyframes-name-pattern
35:3 ✖ Expected empty line before rule rule-empty-line-before
src/App.tsx
4:3 ✖ Unexpected longhand value '0 0 1rem 0' instead of '0 0 1rem' shorthand-property-no-redundant-values
src/index.css
3:64 ✖ Unexpected quotes around "Roboto" font-family-name-quotes
3:74 ✖ Unexpected quotes around "Oxygen" font-family-name-quotes
4:6 ✖ Unexpected quotes around "Ubuntu" font-family-name-quotes
4:16 ✖ Unexpected quotes around "Cantarell" font-family-name-quotes
他のファイルにも問題が出ましたが、私たちが修正した./src/App.tsxファイルでStylelintでCSSを検査した時と同じエラーが出ることが確認できます。これで、私たちが設定した内容が上手く反映されたことが分かります。
./src/App.tsxファイルを次のように修正して、Stylelintを実行すると、そのファイルのエラーがなくなることが確認できます。
import styled from '@emotion/styled';
const Title = styled.h2`
margin: 0 0 1rem;
font-size: 1.5rem;
`;
function App() {
return (
<div>
<Title>Learn React</Title>
</div>
);
}
export default App;
TypeError: Cannot read properties of undefined (reading ‘stringify’) エラー
最近Stylelintのバージョンを14.9.1から14.14.0に上げましたが、次のようなエラーが発生しました。
TypeError: Cannot read properties of undefined (reading 'stringify')
at Function.stringify (/node_modules/postcss-syntax/stringify.js:8:38)
at MapGenerator.generate (/node_modules/stylelint/node_modules/postcss/lib/map-generator.js:328:12)
at LazyResult.stringify (/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:277:20)
at LazyResult.runAsync (/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:443:17)
at LazyResult.async (/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:221:30)
at LazyResult.then (/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:206:17)
このエラーを治すため次のコマンドを実行してpostcssをインストールする必要があります。
npm install --save-dev postcss
このようにpostcssをインストールした後、Stylelintを実行してみるとエラーが修正されたことが確認できます。
完了
これでStylelintを使ってCSS/SCSSのスタイルファイルの内容を検査する方法についてみてみました。また、styled-components/EmotionのようなCSS-in-JSスタイルを検査する方法もみてみました。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
