Transitioning to Sass at Scale (CSSconf 2016 - Oslo, Norway)

June 1, 2016. Oslo, Norway. 30min.

CSS preprocessors like Sass add a vaiety of functions that streamline CSS development: variables, nesting, functions, mixins, etc. The documentation is great, the tools are mature, and starting a new project using Sass has a clear and straight-forward workflow. But transitioning a large legacy codebase from CSS to Sass is a different story. CSS syntax errors that may be harmless in production can completely prevent Sass from compiling. But fixing those errors creates a far juicier problem: will we introduce visual bugs by fixing syntax bugs?

At Etsy we faced this exact question multiplied across over 400,000 lines of CSS and 2100+ CSS files. During this talk I'll discuss the considerations we had when approaching this project, cover the process of transforming CSS files using Abstract Syntax Trees (ASTs), some of the methodologies and tools we use to mitigate some of the biggest potential pitfalls of Sass (Sass live lint), how we ramped up our production services to gain confidence in our process and how this entire effort led to a single 1.2M line push that didn't break production and had minimal impact to developer and designer workflows.

Transcript

1. CSSconf Nordic – Oslo, Norway @dxna Dan Na Transitioning to Sass at Scale @dxna
2. @dxna http://talks.danielna.com/cssconfno-2016
4. Dan Na | @dxna 4 Front-end Infrastructure Daniel Dan Takashi Sufian Katie
5. Dan Na | @dxna Why was this scary? 5
6. Dan Na | @dxna 6 25M active buyers AS OF MARCH 31, 2016
7. Dan Na | @dxna 7 1.6M active sellers AS OF MARCH 31, 2016
8. Dan Na | @dxna 8 $2.39B annual GMS IN 2015
9. Dan Na | @dxna CSS exists on every page every visitor sees. 9
10. Dan Na | @dxna An incredibly brief intro to Sass Why this was challenging The CSS->Sass conversion Long-term maintainability 10 Agenda
11. 11 Sass An incredibly brief introduction
12. 11 Sass An incredibly brief introduction
13. Dan Na | @dxna Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS- compatible syntax. http://sass-lang.org 12
14. Dan Na | @dxna #main { color: #222222; } a[href] { color: orange; } a[href]:hover { color: green; } 13
15. Dan Na | @dxna #main { color: $main-text; } a[href] { color: $link; } a[href]:hover { color: $link-hover; } 14 $main-text: #222222; $link: orange; $link-hover: green; _variables.scss
16. Dan Na | @dxna #main { color: $main-text; } a[href] { color: $link; &:hover { color: $link-hover; } } 15 $main-text: #222222; $link: orange; $link-hover: green; _variables.scss
17. Dan Na | @dxna @mixin large-text { font-size: 40px; font-weight: bold; } .important { @include large-text; color: red; } 16 . .important { font-size: 40px; font-weight: bold; color: red; } CSS Output
18. Dan Na | @dxna Other Sass Functionality • Function declarations • Data structures: lists, maps • Control flow (if, else) and iteration (for, each, while) • http://www.sass-lang.com 17
19. 18 Project Challenges
20. 18 Project Challenges
21. Dan Na | @dxna First reasonable statement: This is trivially easy. 19
22. Dan Na | @dxna 20 Steps (in theory)
23. Dan Na | @dxna 20 Steps (in theory) 1. Rename homepage.css -> homepage.scss
24. Dan Na | @dxna 20 Steps (in theory) 1. Rename homepage.css -> homepage.scss 2. Render homepage.scss -> homepage.css for production
25. Dan Na | @dxna 20 Steps (in theory) 1. Rename homepage.css -> homepage.scss 2. Render homepage.scss -> homepage.css for production 3. Sign autographs, go home early
26. 21 nope
27. 21 nope
28. Dan Na | @dxna body { background_color: green; } 22
29. Dan Na | @dxna body { background_color: green; } 23
30. Dan Na | @dxna CSS fails quietly. 24
31. Dan Na | @dxna rgb(0, 255, 0) 25
32. Dan Na | @dxna body { background-color: rgb(-10, 25555, -10); } 26
33. Dan Na | @dxna body { background-color: rgb(-10, 25555, -10); background-color: rgb(0, 255, 0); } 27
34. Dan Na | @dxna Sass is compiled. 28
35. Dan Na | @dxna Second reasonable statement: Just fix all the CSS syntax errors. 29
38. Dan Na | @dxna Etsy CSS, October 2014 • 2,000+ individual CSS files • 400,000+ lines of CSS 32
39. Dan Na | @dxna 33
40. Dan Na | @dxna 34 span {color: black; font-size: 12px;} .italic {font-style: italic;} .loud {font-size: 100.00px; font-weight: bold; }
41. Dan Na | @dxna scss-lint https://github.com/brigade/scss-lint 35
42. Dan Na | @dxna 36 Pre SCSS-lint span {color: black; font-weight: bold;} .italic {font-style: italic;} span { color: black; font-weight: bold; } .italic { font-style: italic; } Post SCSS-lint
43. Dan Na | @dxna Core challenges • We have a ton of CSS, of varying age, with syntax errors that must be fixed. • How do we confirm that our production site won’t break in small, difficult to detect ways? 37
44. Dan Na | @dxna Secondary challenges • An opportunity to enforce consistent CSS formatting: syntax, colors, spacing, etc. • How do we help coworkers learn/use Sass productively? • How do we help them do “the right thing?” 38
45. 39 Converting from CSS to Sass
46. 39 Converting from CSS to Sass
47. Dan Na | @dxna State of the world • 2000+ CSS files, 400,000+ lines of CSS • We want to fix formatting inconsistencies • We want to fix broken CSS 40
48. 41 The Wrong Way: Regular Expressions
49. 41 The Wrong Way: Regular Expressions
50. Dan Na | @dxna Goal: Find any background color in CSS that’s set to green using regular expressions. 42
51. Dan Na | @dxna body { background-color: green; } 43 /\s(green);/g
52. Dan Na | @dxna body { background-color: green; } 44 /\s(green);/g section { color: green; }
53. Dan Na | @dxna body { background-color: green; } 45 /background-color:\s(green);/g section { color: green; }
54. Dan Na | @dxna body { background-color: green; } 45 /background-color:\s(green);/g section { color: green; } .green-box { background-color:green; }
55. Dan Na | @dxna body { background-color: green; } section { color: green; } .green-box { background-color:green; } 46 /background-color:\s?(green);/g
56. Dan Na | @dxna body { background-color: green; } section { color: green; } .green-box { background-color:green; } 46 /background-color:\s?(green);/g nav { background: url("./foo.jpg") top center green no-repeat; }
57. Dan Na | @dxna body { background-color: green; } section { color: green; } .green-box { background-color:green; } nav { background: url("./foo.jpg") top center green no-repeat; } 47 /background(-color){0,1}:.*(green);{0,1}/g
60. Dan Na | @dxna Abstract Syntax Trees (AST) 49
61. Dan Na | @dxna 50 body { background-color: green; color: red; font-size: 12px; } .main { color: blue; }
62. Dan Na | @dxna 51 body { background-color: green; color: red; font-size: 12px; } .main { color: blue; } Rules
63. Dan Na | @dxna 52 body { background-color: green; color: red; font-size: 12px; } .main { color: blue; } Selectors
64. Dan Na | @dxna 53 body { background-color: green; color: red; font-size: 12px; } .main { color: blue; } Declarations
65. Dan Na | @dxna 54 body { background-color: green; color: red; font-size: 12px; } .main { color: blue; } Properties and Values
66. Dan Na | @dxna 55 { "stylesheet": { "rules": [ { "type": "rule", "selectors": [ "body" ], "declarations": [ … ], ] } } body { background-color: green; color: red; font-size: 12px; }
67. Dan Na | @dxna 56 body { background-color: green; color: red; font-size: 12px; } "declarations": [ { "type": "declaration", "property": “background-color", "value": "green", ... }, { "type": "declaration", "property": "color", "value": "red", ... } ]
68. Dan Na | @dxna ASTs transform code from strings into structured data. 57
69. Dan Na | @dxna Power of ASTs • Granularly target specific properties/selectors • Bound regex usage • Meaningfully compare CSS output 58
70. Dan Na | @dxna Equivalent ASTs meant that the CSS in production after our conversion was the same as the CSS before our conversion. 59
71. Dan Na | @dxna Fixed 171,244 scss-lint errors 60
72. Dan Na | @dxna Conversion at a Glance • Hundreds of invalid CSS rules and selectors • Formatting @import paths • IE-specific selectors (filter:progid:….) and hacks 61
73. Dan Na | @dxna 62 Final conversion process base.css
74. Dan Na | @dxna Original AST 62 Final conversion process base.css
75. Dan Na | @dxna Original AST 62 Final conversion process base.css Fixed AST
76. Dan Na | @dxna Original AST 62 Final conversion process base.css Fixed AST
77. Dan Na | @dxna Original AST 62 Final conversion process base.css base.css Fixed AST
78. Dan Na | @dxna Original AST 62 Final conversion process base.css base.css base.scss Fixed AST
79. 63 New CSS Build 0% etsy.com Old CSS Legacy CSS Build Sass -> CSS 100%
80. 64 New CSS Build 50% etsy.com Old CSS Legacy CSS Build Sass -> CSS 50%
81. 65 New CSS Build 100% etsy.com Old CSS Legacy CSS Build Sass -> CSS
82. 66 etsy.com New CSS Build 100% Sass
83. Dan Na | @dxna 67
84. 68 Building for the Future
85. 68 Building for the Future
86. Dan Na | @dxna scss-lint https://github.com/brigade/scss-lint 69
87. Dan Na | @dxna Sass Education Efforts • Brown-bag lunch sessions • Documentation on internal wiki • Available on internal chat 70
91. Dan Na | @dxna 1. No @extend or @function declarations 72
92. Dan Na | @dxna 2. Global @mixin declarations only 73
93. Dan Na | @dxna 3. Namespaced variables only, in project-specific folder structure 74
94. Dan Na | @dxna 75 /css/_variables.scss: $padding: 4px /css/cart/header/_variables.scss: $cart-header-padding: 4px
95. Dan Na | @dxna 4. Nesting level < 4 76
96. What have we learned?
97. Dan Na | @dxna Think about code as data, not strings. 78
98. Dan Na | @dxna Build confidence in both programs and people. 79
99. Dan Na | @dxna Open source contributors = superheroes. 80
100. codeascraft.com etsy.com/careers Thank you. http://talks.danielna.com/cssconfno-2016