Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PostCSS and cssnext

PostCSS and cssnext

at html5j, 61th.

Masaaki Morishita

November 26, 2015
Tweet

More Decks by Masaaki Morishita

Other Decks in Programming

Transcript

  1. PostCSS'ͱ'cssnext
    @morishi(er_

    View Slide

  2. About&me
    • Masaaki'Morishita
    • Twi.er:'@morishi.er_
    • GitHub:'morishi.er
    • Blog:'h.p:/
    /morishi.er/hatenablog.com
    • αΠόʔΤʔδΣϯτʢ৽ଔ1೥໨ʣ
    • PostCSSΤόϯδΣϦετʢࣗশʣ

    View Slide

  3. View Slide

  4. Blog

    View Slide

  5. View Slide

  6. PostCSSͰ࡞ͬͨ΋ͷ
    • CSSfmt:((S)CSSίʔυ੔ܗπʔϧ
    • AtCSS:(Annota/ons(based(CSS(processor
    • postcss7style7guide:(ελΠϧΨΠυδΣωϨʔλʔ
    • ଞϓϥάΠϯ7ͭ

    View Slide

  7. Agenda
    1. PostCSSͱ͸
    2. PostCSSͷྺ࢙
    3. PostCSSͷύϑΥʔϚϯε
    4. PostCSS੡πʔϧ
    5. cssnext
    6. ·ͱΊ

    View Slide

  8. PostCSSͱ͸

    View Slide

  9. Over%7000%!%on%GitHub

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. ੎͍͕͋Δ!

    View Slide

  14. PostCSS'ͱ͸
    • by$Andrey$Sitnik
    • Node.js੡ͷCSSύʔαʔ
    • ASTΛૢ࡞͢ΔศརAPIΛఏڙ
    • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰

    View Slide

  15. PostCSSͷॲཧͷྲྀΕ

    View Slide

  16. PostCSSͷྺ࢙

    View Slide

  17. PostCSSͷΑ͏ͳπʔϧ͸ੲ͔Β͋ͬͨ…

    View Slide

  18. rework
    Plugin'framework'for'CSS'preprocessing

    View Slide

  19. Modular(CSS(preprocessing(
    with(rework
    h"p:/
    /tjholowaychuk.tumblr.com/post/
    44267035203/modular=css=preprocessing=with=
    rework

    View Slide

  20. Custom'CSS'preprocessing
    h"p:/
    /nicolasgallagher.com/custom4css4
    preprocessing/

    View Slide

  21. rework&(in&2012)
    • Andrey͸reworkΛ࢖ͬͯAutoprefixerΛ࡞ͬͨ
    • ͔͠͠౰࣌rework͸ϒϥ΢βϋοΫΛύʔεͰ͖ͳ͔ͬͨ
    • ʢ͋ͱTJʹAutoprefixerΛdisΒΕͨΓ…ʣ
    • ʮΑ͠ɺࣗ෼ͰreworkͷΑ͏ͳ΋ͷ࡞Ζ͏ʂʯ

    View Slide

  22. PostCSS'஀ੜ

    View Slide

  23. PostCSSʢʙ'v1ʣ
    • "PostCSS)is)a)framework)for)CSS)postprocessors"
    • AutoprefixerͷͨΊʹ࡞ΒΕͨ
    • ͜ͷࠒ͸CoffeeScriptͰॻ͔Εͯͨ
    • ࡞ऀ͸Ruby޷͖ͰSass޷͖

    View Slide

  24. PostCSS'(v2'ʙ'v4)
    • ϓϥάΠϯ͕େྔʹ࡞ΒΕ͍ͯ͘
    • ݴޠ֦ுͷͨΊͷϓϥάΠϯ΋࡞ΒΕ͍ͯ͘
    • cssnext,)AtCSS,)PreCSS
    • ʮϙετϓϩηεͱ͸͍͍ͬͨ…ʯ

    View Slide

  25. View Slide

  26. PostCSS'v5

    View Slide

  27. PostCSS'v5
    • ࠓ·ͰͰҰ൪େ͖͍มߋ
    • Custom'Syntaxes
    • CSSҎ֎ͷߏจΛύʔεͰ͖ΔΑ͏ʹͳͬͨ
    • (rework͸׬શʹΦϫίϯʹ)

    View Slide

  28. Custom'Syntaxes
    • postcss'scss
    • SCSS༻ͷύʔαʔ
    • postcss'js
    • JSΦϒδΣΫτͱͯ͠ఆٛͨ͠CSSͷύʔαʔ
    • ͍ΘΏΔCSS,in,JS༻

    View Slide

  29. PostCSSͷύϑΥʔϚϯε

    View Slide

  30. ϓϦϓϩηοαʔͱͯ͠
    postcss&nested*+*postcss&simple&vars*+*postcss&calc*+*postcss&mixins

    View Slide

  31. CSSύʔαʔͱͯ͠

    View Slide

  32. ϕϯμʔϓϦϑΟοΫε෇༩πʔϧͱͯ͠
    CompassΑΓ50ഒҎ্଎͍
    ϕϯμʔϓϦϑΟοΫε෇༩ͷͨΊ͚ͩʹCompassΛ࢖͍ͬͯΔ
    ͳΒૣࣺͯ͘Δ΂͖

    View Slide

  33. PostCSS'is'Fast
    h"ps:/
    /github.com/postcss/benchmark

    View Slide

  34. PostCSS੡πʔϧ

    View Slide

  35. ۀ຿Ͱ͸PostCSS੡πʔϧ΍ϓϥάΠϯΛ૊
    Έ߹Θͤͯ࢖͍ͬͯ͘

    View Slide

  36. Autoprefixer
    ʮCan$I$Useʯͱ͍͏αΠτͷσʔλΛࢀ
    র͍ͯ͠Δ
    input:
    .flex {
    display: flex;
    }
    output:
    .flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    }

    View Slide

  37. stylelint
    ϞμϯͳCSSͷLintπʔϧ
    Custom'proper+es΍calc()౳ʹ΋ରԠ
    ESLintͷΑ͏ʹॊೈͳઃఆ͕Ͱ͖Δ

    View Slide

  38. cssnano
    CSSͷminifyπʔϧ
    ͍͔ͭ͘ͷPostCSSͷϓϥάΠϯ͔ΒͰ͖
    ͍ͯΔ

    View Slide

  39. PreCSS
    PostCSS੡ϓϦϓϩηοαʔ
    Sass$like$syntax
    • ηϨΫλʔͷωετදه
    • mixin
    • extend
    • for,#each
    • if

    View Slide

  40. CSS#Modules
    CSSͷελΠϧͷӨڹൣғΛίϯϙʔω
    ϯτ಺Ͱด͡Α͏ͱ͢ΔࢼΈ
    • webpackͷcss*loaderΛ࢖ͬͯηϨΫλ
    ΛBase64ͰΤϯίʔυ
    • composes౳ͷػೳΛPostCSSΛ࢖ͬͯ
    ࣮૷
    CSS#Modules#ॴײ
    h"p:/
    /morishi"er.hatenablog.com/entry/
    2015/09/28/103334

    View Slide

  41. CSSfmt
    CSSϑΥʔϚολʔ
    • ະདྷͷCSSͷه๏ɺSCSSه๏ʹରԠ
    • ϑΥʔϚοςΟϯάͷΦϓγϣϯ͕Ұ
    ੾ͳ͍
    h"ps:/
    /github.com/morishi"er/cssfmt
    ϩΰืूதʂʂ

    View Slide

  42. cssnext
    Use$tomorrow's$CSS$syntax,$
    today.
    h"p:/
    /cssnext.io/

    View Slide

  43. cssnext

    View Slide

  44. cssnext
    • by$Maxime$Thirouin
    • ݱࡏࡦఆஈ֊Ͱϒϥ΢β͕ະ࣮૷ͷCSSͷه๏Λɺࠓͷϒϥ΢
    β͕ղऍͰ͖ΔΑ͏ʹτϥϯεύΠϧ͢Δπʔϧ
    • PostCSS੡

    View Slide

  45. cssnext
    ͍͔ͭ͘ͷPostCSSϓϥάΠϯ͔ΒͰ͖͍ͯΔ
    • Custom(proper,es
    • Custom(media(queries
    • Custom(selectors
    • color(),(hwb(),(gray()
    • Autoprefixer
    • etc...

    View Slide

  46. Custom'proper+es
    input:
    :root {
    --color: red;
    }
    div {
    color: var(--color);
    }
    output:
    div {
    color: red;
    }

    View Slide

  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ͱ͔ʹ໊લΛ෇͚ͯ؅ཧ
    ͢Δ͜ͱ͕Ͱ͖·͢ɻ

    View Slide

  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;
    }
    }

    View Slide

  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;
    }

    View Slide

  50. Color%func*on
    input:
    body {
    background: color(red a(90%))
    }
    output:
    body {
    background: rgba(255, 0, 0, 0.9)
    }

    View Slide

  51. cssnextΛ࢖͏ͱ'ະདྷͷCSSͷγϯλοΫεΛ
    ઌऔΓͰ͖Δ

    View Slide

  52. tabatkins(/(specs
    by#Tab#Atkins#Jr.
    h"ps:/
    /github.com/tabatkins/specs

    View Slide

  53. tabatkins(/(specs
    • CSS$Toggle$States
    • CSS$Nes.ng
    • CSS$Aliases$(custom$stuff)
    • CSS$will9change$Property
    • CSS$Font$Rendering$Controls
    • etc...

    View Slide

  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;
    }

    View Slide

  55. CSS#Extend#Rule#(by#postcss4extend)
    .error {
    color: red;
    border: thick dotted red;
    }
    .serious-error {
    @extend .error;
    font-weight: bold;
    }

    View Slide

  56. ·ͱΊ

    View Slide

  57. PostCSSͱ͸
    • PostCSSࣗମ͸ͨͩͷύʔαʔ
    • ύʔαʔͱͯ͠͸ͱͯ΋ྑ͍
    • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰
    • ·͋·͋଎͍
    • Stylusͷ4ഒ,/Ruby/Sassͷ26ഒ
    • Compassͷ50ഒҎ্

    View Slide

  58. PostCSS੡πʔϧ
    • Autoprefixer
    • stylelint
    • cssnano
    • PreCSS
    • CSS5Modules
    • CSSfmt

    View Slide

  59. PostCSS.parts
    h"p:/
    /postcss.parts

    View Slide

  60. cssnext
    • ະདྷͷCSSΛઌऔΓʂ࠷ߴʂ
    • Custom)proper-es
    • Custom)media)queries
    • Custom)selectors
    • color(),)hwb(),)gray()
    • etc...

    View Slide

  61. ※͔͜͜Β͸ݸਓͷײ૝Ͱ͢

    View Slide

  62. PostCSSʹ͍ͭͯ
    • ύʔαʔͱͯ͠͸ͱͯ΋༏ल
    • ͜Ε͔Β΋CSSܥͷπʔϧΛ࡞Δͱ͖͸PostCSSΛ࢖͏
    • ඞཁͳػೳʢϓϥάΠϯʣ͚ͩΛબ୒ͯ͠࢖͑Δ
    • ʮSassΛ࢖͍ͬͯΔ͚Ͳ@extend΋@mixin΋࢖Θͳ͍ʯ
    • ʮม਺ఆٛͱ@importͷΠϯϥΠϯల։͚ͩͰ͍͍Θʔʯ

    View Slide

  63. ͨͩ…

    View Slide

  64. PostCSSʹ͍ͭͯ
    • γϯλοΫεγϡΨʔܥͷϓϥάΠϯ͕ଟ͍
    • ࠷ۙ͸ωλܥ΋૿͖͍͑ͯͯΔ
    • ϓϥάΠϯಉ࢜ʹ΋ґଘؔ܎͕͋Δ
    • ʮpostcss-mixins͸postcss-nestedΑΓઌʹಡΈࠐΈ
    ·͠ΐ͏ʯ

    View Slide

  65. ࡶʹPostCSSϓϥάΠϯΛ࢖ͬͨΠϝʔδ

    View Slide

  66. cssnextʹ͍ͭͯ
    • ະདྷͷCSSΛઌऔΓʂ$Ͱ͸ͳ͍
    • CSSͷ࢓༷ॻ͸͜Μͳʹബ͘ͳ͍
    • cssnextͰମײͰ͖Δͷ͸γϯλοΫεͷॻ͖৺஍͙Β͍
    • Extensible$Webͷจ຺ͰޠΒΕΔ͜ͱ΋͋Δ͕ɺPostCSSͰ
    Ͱ͖Δ͜ͱ͸গͳ͍

    View Slide

  67. cssnextʹ͍ͭͯ
    • cssnext͸ϙϦϑΟϧ(Ͱ͸ͳ͍
    • ػೳ͕࣮૷͞Ε͍ͯͳ͍ϒϥ΢βͰ΋࢖͑ΔΑ͏ʹ͢Δ΋ͷ
    ͡Όͳ͍
    • ࠓͷϒϥ΢β͕ղऍͰ͖ΔCSSʹม׵͢Δ౎߹ɺͰ͖Δ͜ͱ
    ͸গͳ͍
    • HoudiniͷCSS(Parser(APIʹظ଴

    View Slide

  68. cssnextʹ͍ͭͯ
    • cssnext͸ϓϦϓϩηοαʔ
    • ଞͷϓϦϓϩηοαʔͱಉ༷ʹɺग़ྗޙͷCSSΛҙࣝͯ͠ॻ
    ͘ඞཁ͕͋Δ
    • JSͷBabelײ֮Ͱ࢖༻͢Δͱةݥ

    View Slide

  69. Thanks':D
    @morishi(er_

    View Slide