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
630
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
720
転職初っ端終了しました
tyankatsu
2
810
アニメーションは どうやってできているのか
tyankatsu
0
120
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
670
npmパッケージ製作に関するあれこれ
tyankatsu
1
980
commit message 絶対統一させるマン
tyankatsu
1
220
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.3k
Other Decks in Programming
See All in Programming
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
100
The Evolution of the CRuby Build System
kateinoigakukun
1
740
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
160
カウシェで Four Keys の改善を試みた理由
ike002jp
1
110
Qiita Bash
mercury_dev0517
2
220
Orleans + Sekiban + SignalR でリアルタイムWeb作ってみた
tomohisa
0
140
ComposeでのPicture in Picture
takathemax
0
130
RubyKaigi Dev Meeting 2025
tenderlove
1
690
Being an ethical software engineer
xgouchet
PRO
0
220
監視 やばい
syossan27
11
10k
SwiftDataのカスタムデータストアを試してみた
1mash0
0
130
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
5
1.3k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Language of Interfaces
destraynor
157
25k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
How to train your dragon (web standard)
notwaldorf
91
6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Scaling GitHub
holman
459
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
136
33k
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 ·ͱ·ͬͯͨΒخ͍͠ʁʁ
࠶͓ΘΓ