Implementing CSS Modules for React Native

Krister Kari's presentation about implementing CSS modules for React Native at ReactJS Community Spring 2018 meetup.

Transcript

1. Implementing CSS for React Native
2. I’m Krister Twitter @kristerkari Github @kristerkari
3. Why does React Native need CSS support?
4. const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#F5FCFF", }, welcome: { fontSize: 20, textAlign: "center", margin: 10, }, instructions: { textAlign: "center", color: "#333333", marginBottom: 5, }, });
5. StyleSheet is a subset of CSS
6. const Container = styled.View` flex: 1; justify-content: center; align-items: center; background-color: #0f0; `; const Title = styled.Text` font-size: 30px; text-align: center; color: palevioletred; box-shadow: 1px 2px 3px red; elevation: 6; `; styled-components
7. CSS-in-JS libraries bring us powerful new tools
8. CSS type checking
9. What about all the existing CSS? What about Sass, Less and PostCSS?
10. https://github.com/search?q=css&type=Code Github has almost 45 million CSS files
11. Cool new things are created with CSS every day
12. Wouldn’t it be nice if there would be an easier way to use all that CSS in React Native?
13. Supporting CSS in React Native means that developers have more options to choose from
14. CSS modules for Web
15. .container { padding: 30px 10px; margin-top: 65px; align-items: center; border: 2px dashed #f00; } <div className={styles.container}>Some text</div> import styles from "./styles.css";
16. <style> ._20WEds96_Ee1ra54-24ePy { padding: 30px 10px; margin-top: 65px; align-items: center; border: 2px dashed #f00; } </style> <div class="_20WEds96_Ee1ra54-24ePy">Some text</div>
17. React Native CSS modules
18. What is included? React Native specific CSS parser Transformer to parse and live reload CSS Babel plugins to add className property to React Native to add platform specific extensions for CSS files
19. CSS parser is the same one that styled-components is using
20. .container { padding: 30px 10px; margin-top: 65px; align-items: center; border: 2px dashed #f00; } { container: { paddingBottom: 30, paddingLeft: 10, paddingRight: 10, paddingTop: 30, marginTop: 65, alignItems: "center", borderColor: "#f00", borderStyle: "dashed", borderWidth: 2 } } ↓ ↓ ↓ ↓ ↓ ↓ CSS JS
21. What is a transformer?
22. module.exports = { getTransformModulePath() { return require.resolve("./my-css-transformer.js"); }, getSourceExts() { return ["css"]; } } rn-cli.config.js Tell bundler to support additional file extensions Custom transformer
23. Transformer is just a function that gets called when a file is getting bundled
24. module.exports.transform = function({ src, filename, options }) { if (filename.endsWith(".css")) { return upstreamTransformer.transform({ src: "module.exports = " + JSON.stringify(css2rn(src)), filename, options }); } return upstreamTransformer.transform({ src, filename, options }); }; my-css-transformer.js Call to CSS parser
25. CSS gets parsed when the app is bundled There is no runtime overhead
26. Choose from the available transformers CSS, Sass, Less, Stylus or PostCSS
27. module.exports = { getTransformModulePath() { return require.resolve("react-native-sass-transformer"); }, getSourceExts() { return ["scss", "sass"]; } } rn-cli.config.js
28. Babel plugins
29. Node { type: 'JSXExpressionContainer', start: 67, end: 85, loc: SourceLocation { start: Position { line: 1, column: 67 }, end: Position { line: 1, column: 85 } }, expression: Node { type: 'ObjectExpression', start: 68, end: 84, loc: SourceLocation { start: [Position], end: [Position] }, properties: [ [Node] ] } } Abstract Syntax Tree (AST)
31. AST Explorer
32. babel-plugin-react-native- classname-to-style
33. <Text className={styles.myClass} /> <Text style={styles.myClass} /> ↓ ↓ ↓ ↓ ↓ ↓
34. With className you can use the same React components for Web and Native
35. React Native’s platform specific extensions
36. import styles from "./styles.css"; styles.android.css - Android styles.ios.css - iOS styles.native.css - Android and iOS styles.css - Android, iOS and Web ↓
37. babel-plugin-react-native- platform-specific- extensions
38. import styles from "./styles.css"; import { Platform } from "react-native"; var styles = Platform.OS === "ios" ? require("./styles.ios.css") : require("./styles.css"); ↓ ↓ ↓ ↓ ↓ ↓
39. CSS Media Queries
40. The implementation is based on React Native Extended StyleSheet library
41. .container { background-color: red; } @media (orientation: landscape) { .container { background-color: blue; } } { container: { backgroundColor: "red" }, "@media (orientation: landscape)": { container: { backgroundColor: "blue" } } } CSS JS
42. Media Queries require that parts of the styles are modified at runtime
43. Doing parsing at runtime can hurt performance, so avoid it
44. .container { background-color: red; } @media (orientation: landscape) { .container { background-color: blue; } } { __mediaQueries: { "@media (orientation: landscape)": [{ expressions: [ { feature: "orientation", modifier: undefined, value: "landscape" } ], inverse: false, type: "all" }] }, container: { backgroundColor: "red" }, "@media (orientation: landscape)": { container: { backgroundColor: "blue" } } } CSS JS
45. What is actually done at runtime?
46. Media Queries are matched against React Native’s dimensions
47. import { Dimensions } from "react-native"; function getMatchObject() { const win = Dimensions.get("window"); return { width: win.width, height: win.height, orientation: win.width > win.height ? "landscape" : "portrait", "aspect-ratio": win.width / win.height, type: "screen" }; }
48. Check if a Media Query matches current dimensions
49. const isMatch = mediaQuery.match(query, matchObject); if (isMatch) { res = merge(res, styles[key]); }
50. When a Media Query matches, everything inside it gets merged with base styles
51. .container { background-color: red; font-size: 20px; } @media (orientation: landscape) { .container { background-color: blue; } } { container: { backgroundColor: "blue", fontSize: 20 } } ↓ ↓ ↓ ↓ ↓ ↓ CSS JS
52. new Babel plugin is needed for Media Queries
53. babel-plugin-react-native- classname-to-dynamic-style
54. <Text className={styles.myClass} /> <Text style={process(styles).myClass} /> ↓ ↓ ↓ ↓ ↓ ↓
55. To be implemented… CLI installer A better way to measure Media Queries runtime performance CSS Viewport units And more…
56. Thanks! Questions? github.com/kristerkari/ react-native-css-modules