PostCSS and cssnext

at html5j, 61th.

Transcript

1. PostCSS'ͱ'cssnext @morishi(er_
2. About&me • Masaaki'Morishita • Twi.er:'@morishi.er_ • GitHub:'morishi.er • Blog:'h.p:/ /morishi.er/hatenablog.com • αΠόʔΤʔδΣϯτʢ৽ଔ1೥໨ʣ • PostCSSΤόϯδΣϦετʢࣗশʣ
4. Blog
6. PostCSSͰ࡞ͬͨ΋ͷ • CSSfmt:((S)CSSίʔυ੔ܗπʔϧ • AtCSS:(Annota/ons(based(CSS(processor • postcss7style7guide:(ελΠϧΨΠυδΣωϨʔλʔ • ଞϓϥάΠϯ7ͭ
7. Agenda 1. PostCSSͱ͸ 2. PostCSSͷྺ࢙ 3. PostCSSͷύϑΥʔϚϯε 4. PostCSS੡πʔϧ 5. cssnext 6. ·ͱΊ
8. PostCSSͱ͸
9. Over%7000%!%on%GitHub
13. ੎͍͕͋Δ!
14. PostCSS'ͱ͸ • by$Andrey$Sitnik • Node.js੡ͷCSSύʔαʔ • ASTΛૢ࡞͢ΔศརAPIΛఏڙ • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰
15. PostCSSͷॲཧͷྲྀΕ
16. PostCSSͷྺ࢙
17. PostCSSͷΑ͏ͳπʔϧ͸ੲ͔Β͋ͬͨ…
18. rework Plugin'framework'for'CSS'preprocessing
19. Modular(CSS(preprocessing( with(rework h"p:/ /tjholowaychuk.tumblr.com/post/ 44267035203/modular=css=preprocessing=with= rework
20. Custom'CSS'preprocessing h"p:/ /nicolasgallagher.com/custom4css4 preprocessing/
21. rework&(in&2012) • Andrey͸reworkΛ࢖ͬͯAutoprefixerΛ࡞ͬͨ • ͔͠͠౰࣌rework͸ϒϥ΢βϋοΫΛύʔεͰ͖ͳ͔ͬͨ • ʢ͋ͱTJʹAutoprefixerΛdisΒΕͨΓ…ʣ • ʮΑ͠ɺࣗ෼ͰreworkͷΑ͏ͳ΋ͷ࡞Ζ͏ʂʯ
22. PostCSS'஀ੜ
23. PostCSSʢʙ'v1ʣ • "PostCSS)is)a)framework)for)CSS)postprocessors" • AutoprefixerͷͨΊʹ࡞ΒΕͨ • ͜ͷࠒ͸CoffeeScriptͰॻ͔Εͯͨ • ࡞ऀ͸Ruby޷͖ͰSass޷͖
24. PostCSS'(v2'ʙ'v4) • ϓϥάΠϯ͕େྔʹ࡞ΒΕ͍ͯ͘ • ݴޠ֦ுͷͨΊͷϓϥάΠϯ΋࡞ΒΕ͍ͯ͘ • cssnext,)AtCSS,)PreCSS • ʮϙετϓϩηεͱ͸͍͍ͬͨ…ʯ
26. PostCSS'v5
27. PostCSS'v5 • ࠓ·ͰͰҰ൪େ͖͍มߋ • Custom'Syntaxes • CSSҎ֎ͷߏจΛύʔεͰ͖ΔΑ͏ʹͳͬͨ • (rework͸׬શʹΦϫίϯʹ)
28. Custom'Syntaxes • postcss'scss • SCSS༻ͷύʔαʔ • postcss'js • JSΦϒδΣΫτͱͯ͠ఆٛͨ͠CSSͷύʔαʔ • ͍ΘΏΔCSS,in,JS༻
29. PostCSSͷύϑΥʔϚϯε
30. ϓϦϓϩηοαʔͱͯ͠ postcss&nested*+*postcss&simple&vars*+*postcss&calc*+*postcss&mixins
31. CSSύʔαʔͱͯ͠
32. ϕϯμʔϓϦϑΟοΫε෇༩πʔϧͱͯ͠ CompassΑΓ50ഒҎ্଎͍ ϕϯμʔϓϦϑΟοΫε෇༩ͷͨΊ͚ͩʹCompassΛ࢖͍ͬͯΔ ͳΒૣࣺͯ͘Δ΂͖
33. PostCSS'is'Fast h"ps:/ /github.com/postcss/benchmark
34. PostCSS੡πʔϧ
35. ۀ຿Ͱ͸PostCSS੡πʔϧ΍ϓϥάΠϯΛ૊ Έ߹Θͤͯ࢖͍ͬͯ͘
36. Autoprefixer ʮCan$I$Useʯͱ͍͏αΠτͷσʔλΛࢀ র͍ͯ͠Δ input: .flex { display: flex; } output: .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
37. stylelint ϞμϯͳCSSͷLintπʔϧ Custom'proper+es΍calc()౳ʹ΋ରԠ ESLintͷΑ͏ʹॊೈͳઃఆ͕Ͱ͖Δ
38. cssnano CSSͷminifyπʔϧ ͍͔ͭ͘ͷPostCSSͷϓϥάΠϯ͔ΒͰ͖ ͍ͯΔ
39. PreCSS PostCSS੡ϓϦϓϩηοαʔ Sass$like$syntax • ηϨΫλʔͷωετදه • mixin • extend • for,#each • if
40. CSS#Modules CSSͷελΠϧͷӨڹൣғΛίϯϙʔω ϯτ಺Ͱด͡Α͏ͱ͢ΔࢼΈ • webpackͷcss*loaderΛ࢖ͬͯηϨΫλ ΛBase64ͰΤϯίʔυ • composes౳ͷػೳΛPostCSSΛ࢖ͬͯ ࣮૷ CSS#Modules#ॴײ h"p:/ /morishi"er.hatenablog.com/entry/ 2015/09/28/103334
41. CSSfmt CSSϑΥʔϚολʔ • ະདྷͷCSSͷه๏ɺSCSSه๏ʹରԠ • ϑΥʔϚοςΟϯάͷΦϓγϣϯ͕Ұ ੾ͳ͍ h"ps:/ /github.com/morishi"er/cssfmt ϩΰืूதʂʂ
42. cssnext Use$tomorrow's$CSS$syntax,$ today. h"p:/ /cssnext.io/
43. cssnext
44. cssnext • by$Maxime$Thirouin • ݱࡏࡦఆஈ֊Ͱϒϥ΢β͕ະ࣮૷ͷCSSͷه๏Λɺࠓͷϒϥ΢ β͕ղऍͰ͖ΔΑ͏ʹτϥϯεύΠϧ͢Δπʔϧ • PostCSS੡
45. cssnext ͍͔ͭ͘ͷPostCSSϓϥάΠϯ͔ΒͰ͖͍ͯΔ • Custom(proper,es • Custom(media(queries • Custom(selectors • color(),(hwb(),(gray() • Autoprefixer • etc...
46. Custom'proper+es input: :root { --color: red; } div { color: var(--color); } output: div { color: red; }
47. Custom'media'queries input: @custom-media --small-viewport (max-width: 30em); @media (--small-viewport) { /* styles for small viewport */ } output: @media (max-width: 30em) { /* styles for small viewport */ } • ϝσΟΞΫΤϦʔͷmax%width:,30emͱ͔ʹ໊લΛ෇͚ͯ؅ཧ ͢Δ͜ͱ͕Ͱ͖·͢ɻ
48. Media&query&ranges input: @media screen and (width >= 500px) and (width <= 1200px) { .foo { display: block; } } output: @media screen and (min-width: 500px) and (max-width: 1200px) { .bar { display: block; } }
49. Custom'selectors input: @custom-selector :--heading h1, h2, h3; article :--heading + p { margin-top: 0; } output: article h1 + p, article h2 + p, article h3 + p { margin-top: 0; }
50. Color%func*on input: body { background: color(red a(90%)) } output: body { background: rgba(255, 0, 0, 0.9) }
51. cssnextΛ࢖͏ͱ'ະདྷͷCSSͷγϯλοΫεΛ ઌऔΓͰ͖Δ
52. tabatkins(/(specs by#Tab#Atkins#Jr. h"ps:/ /github.com/tabatkins/specs
53. tabatkins(/(specs • CSS$Toggle$States • CSS$Nes.ng • CSS$Aliases$(custom$stuff) • CSS$will9change$Property • CSS$Font$Rendering$Controls • etc...
54. CSS#@apply#Rule#(by#postcss2apply) :root { --toolbar-theme: { background-color: hsl(120, 70%, 95%); border-radius: 4px; border: 1px solid var(--theme-color late); }; --toolbar-title-theme: { color: green; }; } .toolbar { @apply --toolbar-theme; } .toolbar > .title { @apply --toolbar-title-theme; }
55. CSS#Extend#Rule#(by#postcss4extend) .error { color: red; border: thick dotted red; } .serious-error { @extend .error; font-weight: bold; }
56. ·ͱΊ
57. PostCSSͱ͸ • PostCSSࣗମ͸ͨͩͷύʔαʔ • ύʔαʔͱͯ͠͸ͱͯ΋ྑ͍ • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰ • ·͋·͋଎͍ • Stylusͷ4ഒ,/Ruby/Sassͷ26ഒ • Compassͷ50ഒҎ্
58. PostCSS੡πʔϧ • Autoprefixer • stylelint • cssnano • PreCSS • CSS5Modules • CSSfmt
59. PostCSS.parts h"p:/ /postcss.parts
60. cssnext • ະདྷͷCSSΛઌऔΓʂ࠷ߴʂ • Custom)proper-es • Custom)media)queries • Custom)selectors • color(),)hwb(),)gray() • etc...
61. ※͔͜͜Β͸ݸਓͷײ૝Ͱ͢
62. PostCSSʹ͍ͭͯ • ύʔαʔͱͯ͠͸ͱͯ΋༏ल • ͜Ε͔Β΋CSSܥͷπʔϧΛ࡞Δͱ͖͸PostCSSΛ࢖͏ • ඞཁͳػೳʢϓϥάΠϯʣ͚ͩΛબ୒ͯ͠࢖͑Δ • ʮSassΛ࢖͍ͬͯΔ͚Ͳ@extend΋@mixin΋࢖Θͳ͍ʯ • ʮม਺ఆٛͱ@importͷΠϯϥΠϯల։͚ͩͰ͍͍Θʔʯ
63. ͨͩ…
64. PostCSSʹ͍ͭͯ • γϯλοΫεγϡΨʔܥͷϓϥάΠϯ͕ଟ͍ • ࠷ۙ͸ωλܥ΋૿͖͍͑ͯͯΔ • ϓϥάΠϯಉ࢜ʹ΋ґଘؔ܎͕͋Δ • ʮpostcss-mixins͸postcss-nestedΑΓઌʹಡΈࠐΈ ·͠ΐ͏ʯ
65. ࡶʹPostCSSϓϥάΠϯΛ࢖ͬͨΠϝʔδ
66. cssnextʹ͍ͭͯ • ະདྷͷCSSΛઌऔΓʂ$Ͱ͸ͳ͍ • CSSͷ࢓༷ॻ͸͜Μͳʹബ͘ͳ͍ • cssnextͰମײͰ͖Δͷ͸γϯλοΫεͷॻ͖৺஍͙Β͍ • Extensible$Webͷจ຺ͰޠΒΕΔ͜ͱ΋͋Δ͕ɺPostCSSͰ Ͱ͖Δ͜ͱ͸গͳ͍
67. cssnextʹ͍ͭͯ • cssnext͸ϙϦϑΟϧ(Ͱ͸ͳ͍ • ػೳ͕࣮૷͞Ε͍ͯͳ͍ϒϥ΢βͰ΋࢖͑ΔΑ͏ʹ͢Δ΋ͷ ͡Όͳ͍ • ࠓͷϒϥ΢β͕ղऍͰ͖ΔCSSʹม׵͢Δ౎߹ɺͰ͖Δ͜ͱ ͸গͳ͍ • HoudiniͷCSS(Parser(APIʹظ଴
68. cssnextʹ͍ͭͯ • cssnext͸ϓϦϓϩηοαʔ • ଞͷϓϦϓϩηοαʔͱಉ༷ʹɺग़ྗޙͷCSSΛҙࣝͯ͠ॻ ͘ඞཁ͕͋Δ • JSͷBabelײ֮Ͱ࢖༻͢Δͱةݥ
69. Thanks':D @morishi(er_