Help us understand the problem. What is going on with this article?

subsetcssでcssの値の制限をする(例えばfont-sizeの値を13px、16pxに設定するとそれ以外の値はエラーにしてくれる)

みなさん、大人数での開発でCSSの一貫性を保つのに苦労していませんか?
この問題を軽減する一つの選択肢として、今回はsubsetcssというライブラリを紹介します!

subsetcss

公式 : knownasilya/subsetcss - github

自分でCSSの値を定義し、その値のみに制限できます。

install

公式にある通りインストール

bash
yarn init -y
yarn add -D subsetcss stylelint
#または、
npm init -y
npm i -D subsetcss stylelint

Setup

公式にある通りセットアップ

stylelintのプラグインでsubsetcssを使用します。

.stylelintrc
{
  "plugins": [
    "subsetcss"
  ],
  "rules": {
    "subsetcss/config": "./.subsetcss.js"
  }
}
.subsetcss.js
module.exports = {
    'subsets': {
        'font-size': [
            '.75rem',
            '.875rem',
            '1rem',
            '1.125rem',
            '1.25rem',
            '1.5rem',
            '1.875rem',
            '2.25rem',
            '3rem',
        ],
        'border-width': [
            '0',
            '1px',
            '2px',
            '3px'
        ],
        'border-color': [
            'transparent',
            '#22292f',
            '#3d4852',
            '#606f7b',
            '#8795a1',
            '#b8c2cc'
        ],
        'border-style': ['solid'],
        '@media': {
            'params': {
                'max-width': ['400px', '768px'],
            },
            'subsets': {
                'font-size': [
                    '1rem',
                    '1.125rem',
                    '1.25rem',
                    '1.5rem',
                    '1.875rem'
                ]
            }
        }
    }
};

実行

src/css/style.css
.sample1 {
    font-size: 3rem;
}

.sample2 {
    border-width: 5px;
}

.sample3 {
    border-color: #fff;
}
bash
yarn stylelint "src/css/*.css"
#または、
npx stylelint "src/css/*.css"

Screen Shot 2019-06-07 at 23.15.08.png

このように、.subsetcss.jsで指定されていない値をエラーにしてくれます。
とっても簡単ですね!


オマケ

stylelintを使う際は、gulpやwebpackから実行することが多いと思います。自分用にwebpackでstylelintを動かすサンプルを作成してみました。
↓ここからは私の備忘録です。読まなくても問題ありません。

1 webpackで試してみた

自分で試してみたサンプル

bash
yarn init -y
yarn add -D subsetcss stylelint stylelint-webpack-plugin webpack webpack-cli style-loader css-loader
#または、
npm init -y
npm i -D subsetcss stylelint stylelint-webpack-plugin webpack webpack-cli style-loader css-loader
src/index.js
import "./css/style.css";
webpack.config.js
const StyleLintPlugin = require("stylelint-webpack-plugin");

module.exports = {
    mode: "development",
    module: {
        rules: [{
            test: /\.css/,
            use: [
                "style-loader",
                "css-loader",
            ],
        }]
    },
    plugins: [
        new StyleLintPlugin({
            configFile: `${__dirname}/.stylelintrc`,
            context: `${__dirname}/src/css`,
            files: "**/*.css",
        }),
    ],
};

stylelint-webpack-pluginこちらを参考に設定しました。間違いなどありましたら指摘お願いしますm(_ _)m

  • configFile:stylelintの設定ファイルの場所

  • context:ルートディレクトリ

  • files:ファイルを見つけるためのglobパターン

.stylelintrc.subsetcss.jsは先ほどと同じです

これでwebpackから動かせますので試してみます。

OL50KpYCYm.gif

webpackで、設定していない値をエラーで見ることができました。

2 webpack + Sass で試してみた

自分で試してみたサンプル

sass-loadernode-sassが新たに必要になります。

bash
yarn init -y
yarn add -D subsetcss stylelint stylelint-webpack-plugin webpack webpack-cli style-loader css-loader sass-loader node-sass
#または、
npm init -y
npm i -D subsetcss stylelint stylelint-webpack-plugin webpack webpack-cli style-loader css-loader sass-loader node-sass
src/index.js
import "./scss/style.scss";
src/scss/style.scss
.sample1 {
    font-size: 3rem;

    .sample2 {
        border-width: 5px;

        .sample3 {
            border-color: #fff;
        }
    }
}
webpack.config.js
const StyleLintPlugin = require("stylelint-webpack-plugin");

module.exports = {
    mode: "development",
    module: {
        rules: [{
            test: /\.scss/,
            use: [
                "style-loader",
                "css-loader",
                "sass-loader",
            ],
        }]
    },
    plugins: [
        new StyleLintPlugin({
            configFile: `${__dirname}/.stylelintrc`,
            context: `${__dirname}/src/scss`,
            files: "**/*.scss",
        }),
    ],
};

Screen Shot 2019-06-08 at 0.59.30.png

sassを使っても特に問題なく使えました

2-1 webpack + sass で cssファイルで出力するようにする

自分で試してみたサンプル

先ほどまでindex.jsファイルをバンドルしていましたが、
index.jsをなくし、style.scssファイルをwebpackの起点となるファイルに設定、cssファイルで出力するように設定してみます。

extract-text-webpack-pluginを使用して、cssファイルで出力するようにします

bash
yarn init -y
yarn add -D subsetcss stylelint stylelint-webpack-plugin webpack webpack-cli css-loader sass-loader node-sass extract-text-webpack-plugin@next
#または、
npm init -y
npm i -D subsetcss stylelint stylelint-webpack-plugin webpack webpack-cli css-loader sass-loader node-sass extract-text-webpack-plugin@next

↑ webpack 4だと、extract-text-webpack-plugin がうまく動かないため、
extract-text-webpack-plugin@next をインストールするようにしましょう。 ※2019/05/07現在

webpack.config.js
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const StyleLintPlugin = require("stylelint-webpack-plugin");

module.exports = {
    mode: "development",
    entry: "./src/scss/style.scss",
    output: {
        path: `${__dirname}/dist`,
        filename: "[name].css", // 生成するjsファイル名
    },
    module: {
        rules: [{
            test: /\.scss/,
            use: ExtractTextPlugin.extract({
                use: [
                    "css-loader",
                    "sass-loader",
                ],
            }),
        }]
    },
    plugins: [
        // cssファイルを生成されたjsファイルと同じ名前にし上書きする
        //  -> cssファイルのみ出力という結果になる
        new ExtractTextPlugin("[name].css"),

        new StyleLintPlugin({
            configFile: `${__dirname}/.stylelintrc`,
            context: `${__dirname}/src/scss`,
            files: "**/*.scss",
        }),
    ],
};

Screen Shot 2019-06-08 at 1.26.41.png

scssファイルからcssを出力し、かつsubsetcssでエラーを出すこともできました。


最後まで読んでいただいてありがとうございました。m(_ _)m

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away