Changes in css-modules.ts

1a3a1db5 - Update tsconfigs to node 18 (current LTS) (#24471)

Wed, 20 Sep 2023 22:21:37 +0000

Update tsconfigs to node 18 (current LTS) (#24471)# Why Expo supports Node.js LTS, this is currently Node 18. This PR updates from 14 to 18. --------- Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com> List of files: /expo/packages/@expo/metro-config/src/transform-worker/css-modules.ts

201c72c1 - fix(metro-config): Fix css modules syntax. (#23086)

Sat, 24 Jun 2023 22:07:54 +0000

fix(metro-config): Fix css modules syntax. (#23086)# Why # How # Test Plan # Checklist - [ ] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [ ] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [ ] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). --------- Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com> List of files: /expo/packages/@expo/metro-config/src/transform-worker/css-modules.ts

e62df662 - feat!(metro-config): add unstable_styles to css modules (#23002)

Wed, 21 Jun 2023 20:15:09 +0000

feat!(metro-config): add unstable_styles to css modules (#23002)# Why It's too confusing to have React Native styles be the default for CSS modules. This PR makes CSS Modules in Expo work as expected by default. We now export (and squat) `unstable_styles` which can be used to access the CSS Modules as React Native Web style objects. This is a breaking change but only released in the alpha. # Test Plan Updated tests. # Checklist - [ ] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [ ] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [ ] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). --------- Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com> List of files: /expo/packages/@expo/metro-config/src/transform-worker/css-modules.ts

7cebda5a - feat(metro-config): add sass (#22031)

Fri, 07 Apr 2023 19:35:54 +0000

feat(metro-config): add sass (#22031)# Why Standard feature for modern web support. # How - When a project has CSS setup and `sass` installed, they can use sass syntax in scss/sass files. - Sass is compiled to CSS before it's passed to the standard CSS handling. This means that css modules also support sass. - Just like standard CSS support, importing external files is not currently supported. # Test Plan - tbd # Checklist - [ ] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [ ] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [ ] This diff will work correctly for `expo prebuild` & EAS Build (eg: updated a module plugin). --------- Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com> List of files: /expo/packages/@expo/metro-config/src/transform-worker/css-modules.ts

9b2597ba - feat(metro-config, cli): CSS support for Metro web (#21941)

Thu, 06 Apr 2023 03:07:12 +0000

feat(metro-config, cli): CSS support for Metro web (#21941)# Why This PR moves the CSS support from Expo Router over to `expo/metro-config` behind a beta flag. This is because we need deeper integration with Expo CLI and Metro in order to emit static CSS files in production bundles. CSS is required for media queries -> rehydration. - Related: https://github.com/expo/router/pull/397 https://github.com/expo/router/pull/223 # How Instead of a babel transformer, we now use a custom "transformer" which gives us the ability to add extra metadata to a Metro module on export. This means we can pass the raw and processed CSS for writing to disk. The development version of CSS still uses script injection via JavaScript, meaning static rendering cannot currently be tested in development. CSS Modules are implemented (web-only currently) using lightningcss. The export is generated to work with React Native for web. Consider the following block: ```js export default { ...StyleSheet.create({ container: { $$css: true, _: 'hashed-container-id' } }) } ``` CSS Variables are not currently hashed, enabling the user to define variables in a global CSS file and access them in CSS Modules (subject to change in order to support native). CSS variables are accessible from the default export as strings: `styles['--color'] === '--color'`. ## Docs I've chosen to document in the versioned metro doc instead of the unversioned guide, this seems like a reasonable spot given the highly experimental nature of this feature. # Test Plan - Unit tests for conversion. - [x] Test in/out for transformer. - [ ] Test static export. - TBD for E2E # Checklist - [ ] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [ ] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [ ] This diff will work correctly for `expo prebuild` & EAS Build (eg: updated a module plugin). List of files: /expo/packages/@expo/metro-config/src/transform-worker/css-modules.ts