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
720
転職初っ端終了しました
tyankatsu
2
810
アニメーションは どうやってできているのか
tyankatsu
0
120
Gridsome向けの ESLintパッケージを作って 公式に組み込まれた話
tyankatsu
5
670
npmパッケージ製作に関するあれこれ
tyankatsu
1
970
commit message 絶対統一させるマン
tyankatsu
1
220
jest-puppeteerで e2eテストをやったら こうなった
tyankatsu
2
1.3k
Other Decks in Programming
See All in Programming
Return of the Full-Stack Developer
simas
PRO
1
330
AHC 044 混合整数計画ソルバー解法
kiri8128
0
320
custom_lintで始めるチームルール管理
akaboshinit
0
190
Windows版PHPのビルド手順とPHP 8.4における変更点
matsuo_atsushi
0
390
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
100
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
160
AIコーディングワークフローの試行 〜AIエージェント×ワークフローでの自動化を目指して〜
rkaga
2
1.5k
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
14
4.2k
Do Dumb Things
mitsuhiko
0
370
PHPUnit 高速化テクニック / PHPUnit Speedup Techniques
pinkumohikan
1
1.3k
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
890
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
150
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
630
A better future with KSS
kneath
239
17k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Being A Developer After 40
akosma
90
590k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Experiences People Love
moore
141
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2.1k
Visualization
eitanlees
146
16k
Building a Scalable Design System with Sketch
lauravandoore
462
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 ·ͱ·ͬͯͨΒخ͍͠ʁʁ
࠶͓ΘΓ