Supporting Old Browsers in CSS-in-JS via AST Transformations
summary
The talk describes building a custom Babel plugin to add backward compatibility for CSS variables used with styled-components so older browsers (especially IE11) get fallback properties automatically. It explains working with JavaScript AST transformations to detect styled-components CSS and inject or generate the necessary fallback CSS instead of doing it manually.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 0:27Speaker context
- 1:08Old browser support problem
- 2:13AST as solution tool
- 3:38What is AST and how to use
- 10:10Finding CSS variables in AST
- 10:32Babel plugin solution
- 12:40How Babel plugins work
- 13:45Visitors in Babel plugins
- 17:37Plugin task setup
- 18:41Building CSS variable map
- 21:33Finding variables in styled-components
- 26:29Transforming variables in AST
- 29:37transformElement function
- 36:44Plugin testing
- 37:48Summary and recommendations
- 38:56Q&A
