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.

<!--
Please describe the motivation for this PR,

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.

<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

---------

Co-authored-by: Expo Bot <[email protected]>

show more ...

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

# Why

<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

# How

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

# Why

<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

# How

<!--
How did you build this feature or fix this bug and why?
-->

# Test Plan

<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] 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 <[email protected]>

show more ...

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 ex

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

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] 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 <[email protected]>

show more ...

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.

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.

<!--
How did you build this feature or fix this bug and why?
-->

# Test Plan

- tbd

<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] 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 <[email protected]>

show more ...

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
i

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

<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

# 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.


<!--
How did you build this feature or fix this bug and why?
-->

# Test Plan

- Unit tests for conversion.
- [x] Test in/out for transformer.
- [ ] Test static export.
- TBD for E2E


<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] 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).

show more ...