こんにちは。技術部クックパッドサービス基盤グループのkaorun343です。我々のチームでは レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 にて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回はこの新システムの CSS の話 です。 背景 クックパッドのレシピサービスを Next.js と TypeScript で置き換えはじめた当初、CSS については Next.js に標準で組み込まれているCSS in JS ライブラリである styled-jsx を使っていました。プロジェクトが大きくなりはじめたタイミングで 「CSS の技術選定を考えなおしてもいいかもしれない」とチームの中で話し合い、改めて技術選定をしました。 技術選定 結論として、本システムでは CSS in JS ライブラリのem
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a
Stylelintは、スタイルシートの問題検出や自動修正を行えるLintと呼ばれる静的解析ツールです。利用することで、CSSやSCSSファイルのコード品質の向上に役立ち、具体的には以下のメリットがあります。 プロジェクトのすべてのスタイルシートから構文エラーを検出する セレクターやプロパティの重複といった、問題になりそうな実装を未然に防ぐ 次のようなルールを強制し、コーディングスタイルを共通化してコードに一貫性を持たせる font-weightの値は、boldといったキーワード指定を強制する 疑似要素のコロンは2つに強制する（::before）など ICSでは複数人で開発することが多いため、スタイルシートの一貫性のためにStylelintが役立っています。HTMLコーディングが多い場面で恩恵を得られるツールです。 この記事ではStylelintの導入方法と、必要な設定について紹介します。
What's in a price? How to price your products and services
概要 stylelint1とはCSSのためのLintです。Lintとは「コンパイラではチェックされない、バグの要因となりそうなソースコードの記述に対し、警告を行う静的解析処理」2のことで、こうした処理によって、「コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ち」3ます。 CSSは素のままだとエラーを吐かず、どこに原因があるのかを探すのに苦労しますが、stylelintを使うことで基本的な構文エラーやスタイルの重複、タイポなどがあると、エラーを検出し、どこのファイルの何行目に問題があるのか教えてくれます。一部の書式に関する規則に対しては自動的に修正することもできます。設定できるルールは170以上あり、柔軟にカスタマイズできます4。また、GitHub5などでも使われ、CSSだけではなく、SCSSやSass、Reactのstyled c
自己紹介 @otofu-square 外部登壇2回目の初心者です🙇 JUBILEE WORKS, inc でフロントエンド業 TimeTree というカレンダーアプリ React/Redux/TypeScript/hypernova...etc 最近 wasm(Rust), Web Components に興味あり 今日お話すること 今日お話すること postcss-jsx とは postcss-jsx で出来るようになったこと① postcss-jsx で出来るようになったこと② 所感 postcss-jsx とは https://github.com/gucong3000/postcss-jsx PostCSS の syntax プラグイン 様々なCSS in JSライブラリの記法をパース CSS in JS内のスタイルにPostCSSを適用可 様々な CSS in JS ライブラリ
2021/05/20追記 各ルールについての説明部分は最新の情報に基づいた内容ではありません。 適宜、一次情報であるstylelintのドキュメントをご参照ください。 フロントエンドエンジニアの松田です。 先日、副業で開発に参加しているFindyでstylelintの導入を行ったので、導入方法と各ルールについてまとめてみました。 stylelintとは eslint, tslint等と同じようなCSSのlinterです。導入することによって、詳細度や!importantの使用制限など、CSSがカオスになってしまうのを防いでくれる効果があります。 導入方法（技術面） User Guideに書かれているように、stylelintを利用する方法は幾つかあります。チーム開発する場合はCLIツールとして導入し、npm scriptsで実行できるようにするのが良いでしょう。各種CIツールで実行する際に
Stylelintとは CSSのコードをチェックするツール。 例えばCSSを書く際は企業によってインデントの仕方がタブだったり半角スペースだったりするが、目視確認だと見落としやすい。 Stylelintがインストールされていればターミナルでのコマンド実行時やVS Codeでのコーディング中にエラーを検出できるので、確認漏れが発生しにくくなる。 Stylelintのインストール方法 npmを使用するので、例としてターミナルで以下のコマンドを実行してファイルを必要な作成する。 mkdir css-sample; cd css-sample; touch index.css .stylelintrc.json; npm init -y; 関連ファイルを作成したらStylelintとルール(stylelint-config-standard)をインストールする。 npm i -D stylelin
はじめにこんにちは。胃もたれすることが増えてきたような気がしている kimizuy です。今回は Stylelint のバージョンを 13 から 14 に上げる機会があったので、そこで得た知見をもとに v14 の変更点や設定のサンプル（SCSS と CSS-in-JS）をご紹介します。 前提VSCode で普段開発しているのですが Stylelint の拡張機能 に以下の警告が出るようになっていました。 Stylelint version 13.12.0 is no longer supported. While it may continue to work for a while, you may encounter unexpected behavior. Please upgrade to version 14.0.0 or newer. See the migration gui
stylelintの設定ファイル
stylelint.config.js �� ] V `��\ V module.exports = { plugins: ['stylelint-order', 'stylelint-scss'], rules: { indentation: 2, 'color-hex-case': 'lower', // hex値は小文字指定（大文字を禁止） 'color-hex-length': 'short', // hex値は短い表記（冗長な表記は禁止） 'color-named': 'never', // 名前付きカラー指定を禁止 'color-no-invalid-hex': true, // 無効な16進数の色指定を禁止 'function-comma-space-after': 'always-single-line', // 単一行のカンマ後には空白が必要 'function-comm
こんにちは！のせっち@nosecchi01です。 Stylelintをv13からv14へのメジャーアップデートがありました。 かなり大幅な変更がありましたので、アップデートは慎重に行う必要があります。 特に既存プロジェクトでは、既に書いているコードがあり、調整が大変だったので、注意すべき点をご紹介します。 Stylelint v14での変更点 主な変更点はStylelint公式のMigration Guideを読むのが一番確実です。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログ
React+TSプロジェクトで便利だったLint/Format設定紹介
CSSのコード品質向上のためのStylelint入門 - ICS MEDIA
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう！
stylelintの導入とVS Codeの設定の方法 - Qiita
postcss-jsxで React x CSSinJSを快適にする - Qiita
stylelintの導入方法と各ルール解説 - Qiita
Stylelintを使うなら必ず知るべき設定方法と99のルール
Stylelint 14 での SCSS と CSS-in-JS の設定方法
既存プロジェクトをStylelint v14にアップグレードするときに注意すべき点