History log of /expo/packages/@expo/cli/src/start/server/webTemplate.ts (Results 1 – 2 of 2)
Revision Date Author Comments
# 9b2597ba 06-Apr-2023 Evan Bacon <[email protected]>

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


# 6d6b81f9 23-Jun-2022 Evan Bacon <[email protected]>

feat(cli): add web support to metro (#17927)

* feat: add web support for metro

* undo patch

* Update index.js

* Update MetroBundlerDevServer.ts

* Add second bundler dev server

* Add d

feat(cli): add web support to metro (#17927)

* feat: add web support for metro

* undo patch

* Update index.js

* Update MetroBundlerDevServer.ts

* Add second bundler dev server

* Add dev loading view to web

* Put feature behind EXPO_USE_METRO_WEB flag

* Move custom config into CLI

* Add support for assets across platforms

* reduce

* Added upstream web support

* Update webTemplate.ts

* Update CHANGELOG.md

* Update instantiateMetro.ts

* Update instantiateMetro.ts

* Update index.js

* Added bundle splitting support

* Update startAsync.ts

* Fixed default settings

* Add ability to copy from public folder

* wip: redirect unmatched routes to `/` on web

* fix fallback api

* Update exportApp.ts

* Update instantiateMetro.ts

* Update exportApp.ts

* clean up handler

* fixup

* clean up

* add web to export test

* Update start-test.ts

* added static serving for web

* Update packages/@expo/cli/CHANGELOG.md

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

* Update yarn.lock

lint fix

fix tests

* Update export-test.ts

* added template tests

* Create HistoryFallbackMiddleware-test.ts

* test ManifestMiddleware

* Create ServeStaticMiddleware-test.ts

* refactor multiplatform

* Update ManifestMiddleware-test.ts

* Update withMetroMultiPlatform.ts

* Update for latest metro

* Update packages/@expo/cli/src/export/resolveOptions.ts

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

show more ...