PostCSS Mythbusting

Four PostCSS Myths Busted

Transcript

1. POSTCSS BEYOND PREPROCESSORS
2. BACKGROUND
4. $ p r i m a r y : # F F 5 3 0 D ; $ b a c k g r o u n d : # 2 2 2 ; . c o d e b o x { f o n t - c o l o r : $ p r i m a r y ; b a c k g r o u n d : $ b a c k g r o u n d ; & : h o v e r { b a c k g r o u n d : l i g h t e n ( $ b a c k g r o u n d , 1 0 % ) ; } } . c o d e b o x { f o n t - c o l o r : # F F 5 3 0 D ; b a c k g r o u n d : # 2 2 2 ; } . c o d e b o x : h o v e r { b a c k g r o u n d : # 3 7 3 7 3 7 ; }
5. https://github.com/postcss/postcss
6. TRUSTED BY INDUSTRY LEADERS 2.317.106 DOWNLOADS IN THE LAST MONTH!
7. Bootstrap 4 will be in SCSS. And if you care, v5 will likely be in PostCSS because holy crap that sounds cool. - Mark Otto
8. WHAT IS IT?
9. PostCSS is a tool for transforming CSS
10. . c o d e b o x { f o n t - c o l o r : # F F 5 3 0 D ; b a c k g r o u n d : # 2 2 2 ; } . c o d e b o x : h o v e r { b a c k g r o u n d : # 3 7 3 7 3 7 ; } . c o d e b o x { f o n t - c o l o r : # F F 5 3 0 D ; b a c k g r o u n d : # 2 2 2 ; } . c o d e b o x : h o v e r { b a c k g r o u n d : # 3 7 3 7 3 7 ; }
11. PostCSS is a tool for transforming CSS with JavaScript plugins
12. CSS Parser PostCss Plugin PostCss Plugin Stringi er new CSS
13. 1) POSTCSS IS A PRE OR A POSTPROCESSOR
14. @ e a c h $ i c o n i n f o o , b a r , b a z { . i c o n - $ ( i c o n ) { b a c k g r o u n d : u r l ( ' i c o n s / $ ( i c o n ) . p n g ' ) ; } } . i c o n - f o o { b a c k g r o u n d : u r l ( ' i c o n s / f o o . p n g ' ) ; } . i c o n - b a r { b a c k g r o u n d : u r l ( ' i c o n s / b a r . p n g ' ) ; } . i c o n - b a z { b a c k g r o u n d : u r l ( ' i c o n s / b a z . p n g ' ) ; } PREPROCESSOR: POSTCSS-EACH
15. : f u l l s c r e e n a { d i s p l a y : f l e x } : - w e b k i t - f u l l - s c r e e n a { d i s p l a y : - w e b k i t - b o x ; d i s p l a y : f l e x } : - m o z - f u l l - s c r e e n a { d i s p l a y : f l e x } : - m s - f u l l s c r e e n a { d i s p l a y : - m s - f l e x b o x ; d i s p l a y : f l e x } : f u l l s c r e e n a { d i s p l a y : - w e b k i t - b o x ; d i s p l a y : - m s - f l e x b o x ; d i s p l a y : f l e x } POSTPROCESSOR: AUTOPREFIXER
16. PREPROCESSOR postcss-nested postcss-simple-vars postcss-for postcss-conditionals postcss-each And... POSTPROCESSOR autopre xer postcss-rtlcss css-modules postcss-doiuse colorguard And...
17. 2) POSTCSS IS AN ALTERNATIVE TO PREPROCESSORS LIKE SASS AND LESS
18. I LIKE SASS MORE THAN POSTCSS
19. SCSS Run PostCss (Stylint) SCSS compilation step Run PostCss (Autopre xer) CSS
20. OR REPLACE SASS COMPILER WITH POSTCSS AND USE THE SAME SYNTAX!
21. PRECSS PRECSS IS A TOOL THAT ALLOWS YOU TO USE SASS-LIKE MARKUP IN YOUR CSS FILES
22. 3) POSTCSS WILL JUST MAKE MY TOOLING MORE COMPLEX
23. $ n p m i n s t a l l - - s a v e - d e v g u l p - p o s t c s s $ n p m i n s t a l l - - s a v e - d e v a u t o p r e f i x e r $ n p m i n s t a l l - - s a v e - d e v c s s n a n o
24. v a r p o s t c s s = r e q u i r e ( ' g u l p - p o s t c s s ' ) ; v a r g u l p = r e q u i r e ( ' g u l p ' ) ; v a r a u t o p r e f i x e r = r e q u i r e ( ' a u t o p r e f i x e r ' ) ; v a r c s s n a n o = r e q u i r e ( ' c s s n a n o ' ) ; g u l p . t a s k ( ' c s s ' , f u n c t i o n ( ) { v a r p r o c e s s o r s = [ a u t o p r e f i x e r ( { b r o w s e r s : [ ' l a s t 1 v e r s i o n ' ] } ) , c s s n a n o ( ) , ] ; r e t u r n g u l p . s r c ( ' . / s r c / * . c s s ' ) . p i p e ( p o s t c s s ( p r o c e s s o r s ) ) . p i p e ( g u l p . d e s t ( ' . / d e s t ' ) ) ; } ) ;
25. POSTCSS-DEBUG CREATES SNAPSHOTS OF YOUR CSS FILES BEFORE/AFTER EACH POSTCSS PLUGIN IS RUN
26. 4) POSTCSS DOESN’T OFFER ME ANYTHING THAT MY CURRENT PREPROCESSOR DOESN’T PROVIDE ME
27. @ c u s t o m - s e l e c t o r : - - h e a d i n g h 1 , h 2 , h 3 , h 4 , h 5 , h 6 a r i c l e : - - h e a d i n g + p { m a r g i n - t o p : 0 ; } a r t i c l e h 1 + p , a r t i c l e h 2 + p , a r t i c l e h 3 + p , a r t i c l e h 4 + p , a r t i c l e h 5 + p , a r t i c l e h 6 + p { m a r g i n - t o p : 0 ; } POSTCSS-CUSTOM-SECTORS (W3C SPECS)
28. CSSNEXT USE TOMORROW’S CSS SYNTAX, TODAY
29. m a i n . c s s : 5 : 3 : C S S 3 B o x - s i z i n g n o t s u p p o r t e d b y : I E ( 8 , 9 , 1 0 , 1 1 ) , C h r o m e ( 3 6 , 3 7 , 3 8 ) , S a f a r i ( 8 , 7 . 1 ) , O m a i n . c s s : 6 : 3 : C S S 3 B o x - s i z i n g n o t s u p p o r t e d b y : I E ( 8 , 9 , 1 0 , 1 1 ) , C h r o m e ( 3 6 , 3 7 , 3 8 ) , S a f a r i ( 8 , 7 . 1 ) , O m a i n . c s s : 8 : 3 : C S S u s e r - s e l e c t : n o n e n o t s u p p o r t e d b y : I E ( 8 , 9 ) m a i n . c s s : 9 : 3 : C S S u s e r - s e l e c t : n o n e n o t s u p p o r t e d b y : I E ( 8 , 9 ) m a i n . c s s : 1 0 : 3 : C S S u s e r - s e l e c t : n o n e n o t s u p p o r t e d b y : I E ( 8 , 9 ) m a i n . c s s : 1 1 : 3 : C S S u s e r - s e l e c t : n o n e n o t s u p p o r t e d b y : I E ( 8 , 9 ) m a i n . c s s : 1 2 : 3 : C S S u s e r - s e l e c t : n o n e n o t s u p p o r t e d b y : I E ( 8 , 9 ) m a i n . c s s : 1 3 : 3 : P o i n t e r e v e n t s n o t s u p p o r t e d b y : I E ( 8 , 9 , 1 0 ) , F i r e f o x ( 3 2 , 3 3 ) , C h r o m e ( 3 6 , 3 7 , 3 8 ) , S a f m a i n . c s s : 1 4 : 3 : P o i n t e r e v e n t s n o t s u p p o r t e d b y : I E ( 8 , 9 , 1 0 ) , F i r e f o x ( 3 2 , 3 3 ) , C h r o m e ( 3 6 , 3 7 , 3 8 ) , S a f m a i n . c s s : 3 2 : 3 : C S S 3 T r a n s f o r m s n o t s u p p o r t e d b y : I E ( 8 ) DOIUSE?
30. / * s t y l e s . c s s * / : g l o b a l . p a g e { p a d d i n g : 2 0 p x ; } . t i t l e { c o m p o s e s : t i t l e f r o m " . / m i x i n s . c s s " ; c o l o r : g r e e n ; } . a r t i c l e { f o n t - s i z e : 1 6 p x ; } / * m i x i n s . c s s * / . t i t l e { c o l o r : b l a c k ; f o n t - s i z e : 4 0 p x ; } . t i t l e : h o v e r { c o l o r : r e d ; } . _ t i t l e _ 1 1 6 z l _ 1 { c o l o r : b l a c k ; f o n t - s i z e : 4 0 p x ; } . _ t i t l e _ 1 1 6 z l _ 1 : h o v e r { c o l o r : r e d ; } . p a g e { p a d d i n g : 2 0 p x ; } . _ t i t l e _ x k p k l _ 5 { c o l o r : g r e e n ; } . _ a r t i c l e _ x k p k l _ 1 0 { f o n t - s i z e : 1 6 p x ; } { " t i t l e " : " _ t i t l e _ x k p k l _ 5 _ t i t l e _ 1 1 6 z l _ 1 " , " a r t i c l e " : " _ a r t i c l e _ x k p k l _ 1 0 " , } POSTCSS-MODULES WORKS PERFECTLY WITH REACTJS
31. POSTCSS-RTL . e x a m p l e { d i s p l a y : i n l i n e - b l o c k ; p a d d i n g : 5 p x 1 0 p x 1 5 p x 2 0 p x ; m a r g i n : 5 p x 1 0 p x 1 5 p x 2 0 p x ; b o r d e r - s t y l e : d o t t e d d a s h e d d o u b l e s o l i d ; b o r d e r - w i d t h : 1 p x 2 p x 3 p x 4 p x ; b o r d e r - c o l o r : r e d g r e e n b l u e b l a c k ; b o x - s h a d o w : - 1 e m 0 0 . 4 e m g r a y , 3 p x 3 p x 3 0 p x b l a c k ; } . e x a m p l e { d i s p l a y : i n l i n e - b l o c k ; p a d d i n g : 5 p x 2 0 p x 1 5 p x 1 0 p x ; m a r g i n : 5 p x 2 0 p x 1 5 p x 1 0 p x ; b o r d e r - s t y l e : d o t t e d s o l i d d o u b l e d a s h e d ; b o r d e r - w i d t h : 1 p x 4 p x 3 p x 2 p x ; b o r d e r - c o l o r : r e d b l a c k b l u e g r e e n ; b o x - s h a d o w : 1 e m 0 0 . 4 e m g r a y , - 3 p x 3 p x 3 0 p x b l a c k ; }
33. . u p { b a c k g r o u n d : s v g - l o a d ( ' i m g / a r r o w - u p . s v g ' , f i l l = # 0 0 0 , s t r o k e = # f f f ) ; } POSTCSS-INLINE-SVG . u p { b a c k g r o u n d : u r l ( " d a t a : i m a g e / s v g + x m l ; c h a r s e t = u t f - 8 , % 3 C s v g f i l l = ' % 2 3 0 0 0 ' . . . " ) ; }
34. POSTCSS-GERMAN- STYLESHEETS . f o o { h ö h e : 3 0 0 p x ; a u ß e n a b s t a n d - u n t e n : 1 0 p x ; s c h r i f t g r ö ß e : 2 0 p x ! w i c h t i g ; h i n t e r g r u n d f a r b e : s c h w a r z ; f a r b e : w e i ß ; } . f o o { h e i g h t : 3 0 0 p x ; m a r g i n - b o t t o m : 1 0 p x ; f o n t - s i z e : 2 0 p x ! i m p o r t a n t ; b a c k g r o u n d - c o l o r : b l a c k ; c o l o r : w h i t e ; }
35. WITH GREAT POWER COMES GREAT RESPONSIBILITY
36. d i v { l o s t - c o l u m n : 1 / 3 ; } d i v { w i d t h : c a l c ( 9 9 . 9 9 % * 1 / 3 - ( 3 0 p x - 3 0 p x * 1 / 3 ) ) ; } d i v : n t h - c h i l d ( 1 n ) { f l o a t : l e f t ; m a r g i n - r i g h t : 3 0 p x ; c l e a r : n o n e ; } d i v : l a s t - c h i l d { m a r g i n - r i g h t : 0 ; } d i v : n t h - c h i l d ( 3 n ) { m a r g i n - r i g h t : 0 ; f l o a t : r i g h t ; } d i v : n t h - c h i l d ( 3 n + 1 ) { c l e a r : l e f t ; } LOST FRACTIONAL GRID SYSTEM BUILT WITH CALC()
37. AND MORE... STYLELINT, STYLEFMT, POSTCSS-SPRITES, CSSNANO, POSTCSS-SAFE-PARSER...
38. QUESTIONS?
39. THANKS!