Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
Search
Tyankatsu
April 25, 2019
Programming
1
620
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
俺の話を聞け!!LT大会 #13
ベガコーポレーション Laigグループ フロントエンドエンジニア 山本勝也
Tyankatsu
April 25, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
330
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
710
転職初っ端終了しました
tyankatsu
2
810
アニメーションは どうやってできているのか
tyankatsu
0
120
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
660
npmパッケージ製作に関するあれこれ
tyankatsu
1
970
commit message 絶対統一させるマン
tyankatsu
1
220
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.2k
Other Decks in Programming
See All in Programming
はじめてのIssueOps - GitHub Actionsで実現するコメント駆動オペレーション
tmknom
2
360
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
170
Rubyと自由とAIと
yotii23
6
1.9k
JAWS Days 2025のインフラ
komakichi
1
360
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
760
Introduction to C Extensions
sylph01
3
130
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
510
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
360
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
210
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.3k
iOSでQRコード生成奮闘記
ktcryomm
2
140
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
820
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Git: the NoSQL Database
bkeepers
PRO
429
65k
The Language of Interfaces
destraynor
156
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
270
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Speed Design
sergeychernyshev
28
820
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
GitHub's CSS Performance
jonrohan
1030
460k
Code Review Best Practice
trishagee
67
18k
Making Projects Easy
brettharned
116
6k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Transcript
PostCSS͔Μͳ͍͔Β৮ͬͯΈͯ ͍ͭͰʹ stylelintͷconfigΛ࡞͍ͬͯΔ 4/25 ԶͷΛฉ͚ʂʂLTେձ #13 #chibi_developer
ࣗݾհ • νϟϯΧπ(@tyankatsu5, @tyankatsu_en) • ϕΨίʔϙϨʔγϣϯ • LaigͷϑϩϯτΤϯυΤϯδχΞ • Member
of Gridsome
ࠓ͢͜ͱ • PostCSSͱ • PostCSSͰצҧ͍ͯͨ͜͠ͱ • PostCSSͰΦϦδφϧͷϓϥάΠϯΛ࡞Δ • stylelint-config-ecss •
͓·͚
PostCSSͱ
None
PostCSS • JSʢnode.jsʣͰCSSߏจมͰ͖Δͭ • ϓϥάΠϯΛ։ൃ͢ΔϑϨʔϜϫʔΫతͳϊϦ • PostCSSΛ༻ͨ͠ϥΠϒϥϦ͕༗໊ • Autoprefixer •
stylelint • postcss-preset-env
ௐΔ·Ͱޡղͯͨ͜͠ͱ
PostCSSͬͯSASSͷΑ͏ͳ ϓϦϓϩηοαͩΑͶ
PostCSSͬͯSASSͷΑ͏ͳϓϦ ϓϩηοαͩΑͶ • ҧ͏ɻ • PostCSSೖΕ·ͨ͠ͰԿͰ͖ͳ͍ɻ • PostCSSΛͬͯ࡞ΒΕͨϓϥάΠϯ͕͋ͬͯॳΊͯ ػೳ͢Δɻ
PostCSS͕Ͱ͖ͯ ϓϥάΠϯ͕Ͱ͖ͨʁ
PostCSS͕Ͱ͖ͯ ϓϥάΠϯ͕Ͱ͖ͨʁ • ҧ͏ɻݩʑAutoprefixerͷͨΊʹPostCSS࡞ΒΕ ͨɻ • reworkͱ͍͏cssจࣈྻΛ͝ʹΐ͝ʹΐͰ͖Δ͕ͭ ͋ͬͨ • Andrey
Sitnik͕reworkΛ༻͍ͯrework-venderΛ ࡞ͬͨ
PostCSS͕Ͱ͖ͯ ϓϥάΠϯ͕Ͱ͖ͨʁ • rework-venderAutoprefixerʹ໊લΛม͑ͨ https://github.com/postcss/autoprefixer/commit/ 419a77d4d871a1d7be34ff7129e3cbf7fb755b0c • ࣌ͷAutoprefixerͷׂ • ϕϯμʔϓϨϑΟοΫε༩
• όϯυϧαΠζॖখʢminifyʣ • code errorͷࢦఠ
PostCSS͕Ͱ͖ͯ ϓϥάΠϯ͕Ͱ͖ͨʁ • ͰɺͲΕύʔεͯ͠ɺASTΛ͍͡Δ࡞ۀ͕ඞཁʹ • ͳΒ͍ͬͦreworkΈ͍ͨͳͭʹΓग़ͯ͠ɺnode ͷલॲཧ͢Δͭ࡞Ζ͏ PostCSSੜ
PostCSS͕Ͱ͖ͯ ϓϥάΠϯ͕Ͱ͖ͨʁ • https://evilmartians.com/chronicles/five-years-of- postcss-state-of-the-union • https://github.com/postcss/autoprefixer/commit/ 419a77d4d871a1d7be34ff7129e3cbf7fb755b0c • https://qiita.com/morishitter/items/
4a04eb144abf49f41d7d#%E6%AD%B4%E5%8F% B2
PostCSSͰ ΦϦδφϧͷ ϓϥάΠϯΛ࡞Δ
ͨͿΜ࣌ؒແ͍ͷͰ
https://github.com/ tyankatsu0105/try-postcss
None
None
PostCSSͰϓϥάΠϯ࡞ͬͯΈ ͯ • ϓϩύςΟͷ͕ࠪ؆୯ • ΦϒδΣΫτΛΦϓγϣϯͱͯ͠؆୯ʹઃఆͰ͖Δ • ΨΠυϥΠϯ͋ͬͨ https://github.com/postcss/ postcss/blob/master/docs/guidelines/plugin.md
• ηϛίϩϯͷऔಘํ๏͔Βͳ͔ͬͨ(semicolon: <boolean>ɹͳΒ͋ͬͨ)
stylelint-config-ecss
https://github.com/ tyankatsu0105/stylelint- config-ecss
stylelint-config-ecss • namespace-ModuleName_ChildNode-variant • namespace-ComponentName_ChildNode-variant • modulename-ComponentName_ChildNode-variant
stylelint-config-ecss • ECSS͚ͷstylelintϧʔϧ܈ • ͜ΕΈ͖ͯʹͳͬͨϧʔϧ (Vueίϯϙʔωϯτʹ ߹ΘͤͨCSSͷ໋໊نଇΛߟ͑ͨ - Qiita) •
ҰԠstylelintͷհECSSΨΠυͰͬͯΔ͚ Ͳɺϧʔϧ͕ݹ͍͠ϧʔϧηοτʢconfigʣ͕ͳ͍ (http://ecss.io/chapter9.html#stylelint)
·ͱΊ • PostCSS࿉ۚज़ͱѱຐͷੈք؍ • PostCSSCSSߏจͷύʔεͱηϨΫλΛఏڙ • PostCSSͷྺ࢙Autoprefixerͱڞʹ͋Δ • PostCSSϓϥάΠϯ؆୯ʹ࡞ΕΔ •
ECSS͚ͷstylelint config࡞ͬͯ·͢
͓ΘΓ
͓·͚
stylelint-plugin-ecss
https://github.com/ tyankatsu0105/stylelint- plugin-ecss
stylelint-plugin-ecss • طଘͷstylelintϧʔϧ͚ͩͰແཧͳܯࠂΛࣗͰ ϧʔϧ࡞ͬͯࢦఠ͢ΔΑ͏ʹͨ͠ɻ • ecss/ ͷωʔϜεϖʔεͰ༻Մೳ • stylelint-config-ecssͱͷซ༻Λఆͨ͠plugin
͔Βͷ
None
stylelint organization JOIN
ࣗݾհ • νϟϯΧπ(@tyankatsu5, @tyankatsu_en) • ϕΨίʔϙϨʔγϣϯ • LaigͷϑϩϯτΤϯυΤϯδχΞ • Member
of Gridsome • Member of stylelint ← NEW !!
ຊͱશؔ͘ͳ͍ߏ
ESLintͱstylelint Ͳͬͪplugin࡞ͬͨ
ମܥతʹ͔Δ configͱpluginͷ࡞Γํ ͋ͱTIPS ·ͱ·ͬͯͨΒخ͍͠ʁʁ
࠶͓ΘΓ