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
600
PostCSS分かんないから触ってみて ついでに stylelintのconfigを作っている話
俺の話を聞け!!LT大会 #13
ベガコーポレーション Laigグループ フロントエンドエンジニア 山本勝也
Tyankatsu
April 25, 2019
Tweet
Share
More Decks by Tyankatsu
See All by Tyankatsu
OSSのあれこれ話すイベントやりたいと思った
tyankatsu
0
300
Veturのauto completionにGridsomeを対応させた話
tyankatsu
1
680
転職初っ端終了しました
tyankatsu
2
780
アニメーションは どうやってできているのか
tyankatsu
0
120
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
630
npmパッケージ製作に関するあれこれ
tyankatsu
1
940
commit message 絶対統一させるマン
tyankatsu
1
210
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.2k
Other Decks in Programming
See All in Programming
Outline View in SwiftUI
1024jp
1
330
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
100
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
役立つログに取り組もう
irof
28
9.6k
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
630
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
330
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Facilitating Awesome Meetings
lara
50
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
RailsConf 2023
tenderlove
29
900
Optimizing for Happiness
mojombo
376
70k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Invisible Side of Design
smashingmag
298
50k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Making Projects Easy
brettharned
115
5.9k
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 ·ͱ·ͬͯͨΒخ͍͠ʁʁ
࠶͓ΘΓ