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
610
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
800
アニメーションは どうやってできているのか
tyankatsu
0
120
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
660
npmパッケージ製作に関するあれこれ
tyankatsu
1
960
commit message 絶対統一させるマン
tyankatsu
1
220
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.2k
Other Decks in Programming
See All in Programming
React 19アップデートのために必要なこと
uhyo
8
1.6k
color-scheme: light dark; を完全に理解する
uhyo
7
510
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
楽しく向き合う例外対応
okutsu
0
730
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
250
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
140
sappoRo.R #12 初心者セッション
kosugitti
0
280
クックパッド検索システム統合/Cookpad Search System Consolidation
giga811
0
140
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
260
良いコードレビューとは
danimal141
9
7.9k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
Building Applications with DynamoDB
mza
93
6.2k
Making Projects Easy
brettharned
116
6k
Embracing the Ebb and Flow
colly
84
4.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Unsuck your backbone
ammeep
669
57k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
660
GraphQLとの向き合い方2022年版
quramy
44
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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 ·ͱ·ͬͯͨΒخ͍͠ʁʁ
࠶͓ΘΓ