Merge branch 'dev' into feature/configure-timeout-for-livereload

.changeset/curvy-mangos-heal.md

@@ -0,0 +1,6 @@
+---
+"remix": patch
+"@remix-run/dev": patch
+---
+
+update flat-routes invalid character error message to include link to React Router proposal

.changeset/eight-forks-collect.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Add flat routes convention

.changeset/hungry-owls-greet.md

@@ -0,0 +1,8 @@
+---
+"@remix-run/dev": minor
+"@remix-run/react": minor
+"@remix-run/server-runtime": minor
+"@remix-run/testing": minor
+---
+
+Add unstable support for CSS side-effect imports via `future.unstable_cssSideEffectImports` feature flag

.changeset/little-avocados-fetch.md

@@ -0,0 +1,9 @@
+---
+"@remix-run/css-bundle": minor
+"@remix-run/dev": minor
+"@remix-run/react": minor
+"@remix-run/server-runtime": minor
+"@remix-run/testing": minor
+---
+
+Add unstable support for CSS Modules via `future.unstable_cssModules` feature flag

.changeset/little-lobsters-decide.md

@@ -0,0 +1,6 @@
+---
+"remix": patch
+"@remix-run/dev": patch
+---
+
+don't allow `*` to be anywhere in flat route segment

.changeset/modern-pumas-hide.md

@@ -0,0 +1,6 @@
+---
+"remix": patch
+"@remix-run/architect": patch
+---
+
+use `@architect/functions`' built-in types

.changeset/smart-doors-sing.md

@@ -0,0 +1,6 @@
+---
+"remix": patch
+"@remix-run/dev": patch
+---
+
+suport `handle` in md(x) frontmatter

.github/workflows/nightly.yml

@@ -53,19 +53,18 @@ jobs:
           # get latest nightly tag
           LATEST_NIGHTLY_TAG=$(git tag -l v0.0.0-nightly-\* --sort=-committerdate | head -n 1)
 
-          # get changes since last nightly
-          CHANGES=$(git diff --name-only $LATEST_NIGHTLY_TAG..dev -- ./packages/ -- ':!packages/**/package.json')
-
-          # check if there are changes to ./packages
-          if [[ -n $CHANGES ]]; then
+          # check if last commit to dev starts would be the nightly tag we're about to create (minus the date)
+          # if it is, we'll skip the nightly creation
+          # if not, we'll create a new nightly tag
+          if [[ ${LATEST_NIGHTLY_TAG} == v0.0.0-nightly-${SHORT_SHA}-* ]]; then
+            echo "🛑 Latest nightly tag is the same as the latest commit sha, skipping nightly release"
+          else
             # yyyyMMdd format (e.g. 20221207)
             DATE=$(date '+%Y%m%d')
             # v0.0.0-nightly-<short sha>-<date>
             NEXT_VERSION=0.0.0-nightly-${SHORT_SHA}-${DATE}
             # set output so it can be used in other jobs
             echo "NEXT_VERSION=${NEXT_VERSION}" >> $GITHUB_OUTPUT
-          else
-            echo "🛑 no changes since last nightly, skipping..."
           fi
 
       - name: ⤴️ Update version

.prettierignore

@@ -1 +1 @@
-.changeset/*.md
+.changeset/*.md

docs/file-conventions/remix-config.md

@@ -132,7 +132,7 @@ The `serverBuildTarget` can be one of the following:
 
 ## serverDependenciesToBundle
 
-A list of regex patterns that determines if a module is transpiled and included in the server bundle. This can be useful when consuming ESM only packages in a CJS build.
+A list of regex patterns that determines if a module is transpiled and included in the server bundle. This can be useful when consuming ESM only packages in a CJS build, or when consuming packages with [CSS side-effect imports][css-side-effect-imports].
 
 For example, the `unified` ecosystem is all ESM-only. Let's also say we're using a `@sindresorhus/slugify` which is ESM-only as well. Here's how you would be able to consume those packages in a CJS app without having to use dynamic imports:
 
@@ -186,3 +186,4 @@ There are a few conventions that Remix uses you should be aware of.
 [an-awesome-visualization]: https://remix-routing-demo.netlify.app
 [remix-dev]: ../other-api/dev#remix-dev
 [app-directory]: #appDirectory
+[css-side-effect-imports]: ../guides/styling#css-side-effect-imports

docs/guides/mdx.md

@@ -67,7 +67,7 @@ You can reference your frontmatter data through "attributes". The title of this
 
 ### Advanced Example
 
-You can even export all the other things in this module that you can in regular route modules in your mdx files like `loader` and `action`:
+You can even export all the other things in this module that you can in regular route modules in your mdx files like `loader`, `action`, and `handle`:
 
 ```mdx
 ---
@@ -77,6 +77,9 @@ meta:
 
 headers:
   Cache-Control: no-cache
+
+handle:
+  someData: abc
 ---
 
 import styles from "./first-post.css";
@@ -85,10 +88,6 @@ export const links = () => [
   { rel: "stylesheet", href: styles },
 ];
 
-export const handle = {
-  someData: "abc",
-};
-
 import { json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 

docs/guides/migrating-react-router-app.md

@@ -492,7 +492,7 @@ The answer to all of these questions is up to your bundler, _not you_. We think
 
 **Note:** Remix does not currently support CSS processing directly. If you use preprocessors like Sass, Less, or PostCSS, you can run those as a separate process in development.
 
-We also do not yet support CSS Modules, as that requires compiler integration and current approaches are not aligned with our design philosophy. We are actively working on a solution and plan to have an API for CSS Modules very soon.
+We do process [CSS Modules][css-modules], but support is currently [opt-in behind a feature flag][css-modules].
 
 </docs-info>
 
@@ -642,4 +642,5 @@ Now then, go off and _remix your app_. We think you'll like what you build along
 [routing-in-remix]: ./routing
 [styling-in-remix]: ./styling
 [frequently-asked-questions]: ../pages/faq
-[common-gotchas]: ../pages/gotchas
+[common-gotchas]: ../pages/currently
+[css-modules]: ./styling#css-modules

docs/guides/styling.md

@@ -766,6 +766,118 @@ Other CSS-in-JS libraries will have a similar setup. If you've got a CSS framewo
 
 NOTE: You may run into hydration warnings when using Styled Components. Hopefully [this issue][styled-components-issue] will be fixed soon.
 
+## CSS Bundling
+
+<docs-warning>CSS bundling features are unstable and currently only available behind feature flags. We're confident in the use cases they solve but the API and implementation may change in the future.</docs-warning>
+
+Many common approaches to CSS within the React community are only possible when bundling CSS, meaning that the CSS files you write during development are collected into a separate bundle as part of the build process.
+
+When using CSS bundling features, the Remix compiler will generate a single CSS file containing all bundled styles in your application. Note that any [regular stylesheet imports][regular-stylesheet-imports-2] will remain as separate files.
+
+Unlike many other tools in the React ecosystem, we do not insert the CSS bundle into the page automatically. Instead, we ensure that you always have control over the link tags on your page. This lets you decide where the CSS file is loaded relative to other stylesheets in your app.
+
+To get access to the CSS bundle, first install the `@remix-run/css-bundle` package.
+
+```sh
+npm install @remix-run/css-bundle
+```
+
+Then, import `cssBundleHref` and add it to a link descriptor—most likely in `root.tsx` so that it applies to your entire application.
+
+```tsx filename=root.tsx lines=[2,6]
+import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
+import { cssBundleHref } from "@remix-run/css-bundle";
+
+export const links: LinksFunction = () => {
+  return [
+    { rel: "stylesheet", href: cssBundleHref },
+    // ...
+  ];
+};
+```
+
+With this link tag inserted into the page, you're now ready to start using the various CSS bundling features built into Remix.
+
+### CSS Modules
+
+<docs-warning>This feature is unstable and currently only available behind a feature flag. We're confident in the use cases it solves but the API and implementation may change in the future.</docs-warning>
+
+First, ensure you've set up [CSS bundling][css-bundling] in your application.
+
+Then, to enable [CSS Modules], set the `future.unstable_cssModules` feature flag in `remix.config.js`.
+
+```js filename=remix.config.js
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  future: {
+    unstable_cssModules: true,
+  },
+  // ...
+};
+```
+
+With this feature flag enabled, you can now opt into CSS Modules via the `.module.css` file name convention. For example:
+
+```css filename=app/components/button/styles.module.css
+.root {
+  border: solid 1px;
+  background: white;
+  color: #454545;
+}
+```
+
+```tsx filename=app/components/button/index.js lines=[1,9]
+import styles from "./styles.module.css";
+
+export const Button = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return (
+      <button
+        {...props}
+        ref={ref}
+        className={styles.root}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+```
+
+### CSS Side-Effect Imports
+
+<docs-warning>This feature is unstable and currently only available behind a feature flag. We're confident in the use cases it solves but the API and implementation may change in the future.</docs-warning>
+
+Some NPM packages use side-effect imports of plain CSS files (e.g. `import "./styles.css"`) to declare the CSS dependencies of JavaScript files. If you want to consume one of these packages, first ensure you've set up [CSS bundling][css-bundling] in your application.
+
+Then, set the `future.unstable_cssSideEffectImports` feature flag in `remix.config.js`.
+
+```js filename=remix.config.js
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  future: {
+    unstable_cssSideEffectImports: true,
+  },
+  // ...
+};
+```
+
+Finally, since JavaScript runtimes don't support importing CSS in this way, you'll also need to add any relevant packages to the [`serverDependenciesToBundle`][server-dependencies-to-bundle] option in your `remix.config.js` file. This ensures that any CSS imports are compiled out of your code before running it on the server. For example, to use React Spectrum:
+
+```js filename=remix.config.js
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  serverDependenciesToBundle: [
+    /^@adobe\/react-spectrum/,
+    /^@react-spectrum/,
+    /^@spectrum-icons/,
+  ],
+  future: {
+    unstable_cssSideEffectImports: true,
+  },
+  // ...
+};
+```
+
 [custom-properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
 [link]: ../components/link
 [route-module-links]: ../route/links
@@ -774,3 +886,8 @@ NOTE: You may run into hydration warnings when using Styled Components. Hopefull
 [styled-components-issue]: https://github.com/styled-components/styled-components/issues/3660
 [tailwind]: https://tailwindcss.com
 [tailwind-intelli-sense-extension]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
+[css modules]: https://github.com/css-modules/css-modules
+[regular-stylesheet-imports]: #regular-stylesheets
+[server-dependencies-to-bundle]: ../file-conventions/remix-config#serverdependenciestobundle
+[regular-stylesheet-imports-2]: #regular-stylesheets
+[css-bundling]: #css-bundling

integration/action-test.ts

@@ -43,6 +43,32 @@ test.describe("actions", () => {
           }
         `,
 
+        "app/routes/request-text.jsx": js`
+          import { Form, useActionData } from "@remix-run/react";
+
+          export let action = async ({ request }) => {
+            let text = await request.text();
+            return text;
+          };
+
+          export default function Actions() {
+            let data = useActionData()
+
+            return (
+              <Form method="post" id="form">
+                <p id="text">
+                  {data ? <span id="action-text">{data}</span> : "${WAITING_VALUE}"}
+                </p>
+                <p>
+                  <input name="a" defaultValue="1" />
+                  <input name="b" defaultValue="2" />
+                  <button type="submit" id="submit">Go</button>
+                </p>
+              </Form>
+            );
+          }
+        `,
+
         [`app/routes/${THROWS_REDIRECT}.jsx`]: js`
           import { redirect } from "@remix-run/node";
           import { Form } from "@remix-run/react";
@@ -115,6 +141,20 @@ test.describe("actions", () => {
     await page.waitForSelector(`#text:has-text("${SUBMITTED_VALUE}")`);
   });
 
+  test("properly encodes form data for request.text() usage", async ({
+    page,
+  }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto(`/request-text`);
+    await page.waitForSelector(`#text:has-text("${WAITING_VALUE}")`);
+
+    await page.click("button[type=submit]");
+    await page.waitForSelector("#action-text");
+    expect(await app.getHtml("#action-text")).toBe(
+      '<span id="action-text">a=1&amp;b=2</span>'
+    );
+  });
+
   test("redirects a thrown response on document requests", async () => {
     let params = new URLSearchParams();
     let res = await fixture.postDocument(`/${THROWS_REDIRECT}`, params);