Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: Update version for release (pre) #6193

Merged
merged 1 commit into from
Apr 26, 2023
Merged

chore: Update version for release (pre) #6193

merged 1 commit into from
Apr 26, 2023

Conversation

github-actions[bot]
Copy link
Contributor

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to release-next, this PR will be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

release-next is currently in pre mode so this branch has prereleases rather than normal releases. If you want to exit prereleases, run changeset pre exit on release-next.

⚠️⚠️⚠️⚠️⚠️⚠️

Releases

@remix-run/[email protected]

Minor Changes

  • Enable support for CSS Modules, Vanilla Extract and CSS side-effect imports (#6046)

    These CSS bundling features were previously only available via future.unstable_cssModules, future.unstable_vanillaExtract and future.unstable_cssSideEffectImports options in remix.config.js, but they have now been stabilized.

    CSS Bundle Setup

    In order to use these features, you first need to set up CSS bundling in your project. First install the @remix-run/css-bundle package.

    npm i @remix-run/css-bundle

    Then return the exported cssBundleHref as a stylesheet link descriptor from the links function at the root of your app.

    import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
import { cssBundleHref } from "@remix-run/css-bundle";

export const links: LinksFunction = () => {
  return [
    ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
    // ...
  ];
};

    CSS Modules

    To use CSS Modules, you can opt in via the .module.css file name convention. For example:

    .root {
  border: solid 1px;
  background: white;
  color: #454545;
}
    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";

    Vanilla Extract

    To use Vanilla Extract, first install its css package as a dev dependency.

    npm install -D @vanilla-extract/css

    You can then opt in via the .css.ts/.css.js file name convention. For example:

    import { style } from "@vanilla-extract/css";

export const root = style({
  border: "solid 1px",
  background: "white",
  color: "#454545",
});
    import * as styles from "./styles.css"; // Note that `.ts` is omitted here

export const Button = React.forwardRef(({ children, ...props }, ref) => {
  return <button {...props} ref={ref} className={styles.root} />;
});
Button.displayName = "Button";

    CSS Side-Effect Imports

    Any CSS files that are imported as side-effects (e.g. import "./styles.css") will be automatically included in the CSS bundle.

    Since JavaScript runtimes don't support importing CSS in this way, you'll also need to add any packages using CSS side-effect imports to the serverDependenciesToBundle 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:

    // remix.config.js
module.exports = {
  serverDependenciesToBundle: [
    /^@adobe\/react-spectrum/,
    /^@react-spectrum/,
    /^@spectrum-icons/,
  ],
  // ...
};

  • Dev server improvements (#6133)

    • Push-based app server syncing that doesn't rely on polling
    • App server as a managed subprocess
    • Gracefully handle new files and routes without crashing
    • Statically serve static assets to avoid fetch errors during app server reboots

    Guide

    Enable unstable_dev in remix.config.js:

    {
  future: {
    "unstable_dev": true
  }
}

    Remix App Server

    Update package.json scripts

    {
  "scripts": {
    "dev": "remix dev"
  }
}

    That's it!

    npm run dev

    Other app servers

    Update package.json scripts, specifying the command to run you app server with the -c/--command flag:

    {
  "scripts": {
    "dev": "remix dev -c 'node ./server.js'"
  }
}

    Then, call devReady in your server when its up and running.

    For example, an Express server would call devReady at the end of listen:

    // <other imports>
import { devReady } from "@remix-run/node";

// Path to Remix's server build directory ('build/' by default)
let BUILD_DIR = path.join(process.cwd(), "build");

// <code setting up your express server>

app.listen(3000, () => {
  let build = require(BUILD_DIR);
  console.log("Ready: http://localhost:" + port);

  // in development, call `devReady` _after_ your server is up and running
  if (process.env.NODE_ENV === "development") {
    devReady(build);
  }
});

    That's it!

    npm run dev

    Configuration

    Most users won't need to configure the dev server, but you might need to if:

    • You are setting up custom origins for SSL support or for Docker networking
    • You want to handle server updates yourself (e.g. via require cache purging)
    {
  future: {
    unstable_dev: {
      // Command to run your app server
      command: "wrangler", // default: `remix-serve ./build`
      // HTTP(S) scheme used when sending `devReady` messages to the dev server
      httpScheme: "https", // default: `"http"`
      // HTTP(S) host used when sending `devReady` messages to the dev server
      httpHost: "mycustomhost", // default: `"localhost"`
      // HTTP(S) port internally used by the dev server to statically serve built assets and to receive app server `devReady` messages
      httpPort: 8001, // default: Remix chooses an open port in the range 3001-3099
      // Websocket port internally used by the dev server for sending updates to the browser (Live reload, HMR, HDR)
      websocketPort: 8002, // default: Remix chooses an open port in the range 3001-3099
      // Whether the app server should be restarted when app is rebuilt
      // See `Advanced > restart` for more
      restart: false, // default: `true`
    }
  }
}

    You can also configure via flags. For example:

    remix dev -c 'nodemon ./server.mjs' --http-port=3001 --websocket-port=3002 --no-restart

    See remix dev --help for more details.

    restart

    If you want to manage app server updates yourself, you can use the --no-restart flag so that the Remix dev server doesn't restart the app server subprocess when a rebuild succeeds.

    For example, if you rely on require cache purging to keep your app server running while server changes are pulled in, then you'll want to use --no-restart.

    🚨 It is then your responsibility to call devReady whenever server changes are incorporated in your app server. 🚨

    So for require cache purging, you'd want to:

    1. Purge the require cache
    2. require your server build
    3. Call devReady within a if (process.env.NODE_ENV === 'development')

    (Looking at you, Kent 😆)

    The ultimate solution for --no-restart would be for you to implement server-side HMR for your app server.
    Note: server-side HMR is not to be confused with the client-side HMR provided by Remix.
    Then your app server could continuously update itself with new build with 0 downtime and without losing in-memory data that wasn't affected by the server changes.

    This is left as an exercise to the reader.

  • Stabilize built-in PostCSS support via the new postcss option in remix.config.js. As a result, the future.unstable_postcss option has also been deprecated. (#5960)

    The postcss option is false by default, but when set to true will enable processing of all CSS files using PostCSS if postcss.config.js is present.

    If you followed the original PostCSS setup guide for Remix, you may have a folder structure that looks like this, separating your source files from its processed output:

    .
├── app
│   └── styles (processed files)
│       ├── app.css
│       └── routes
│           └── index.css
└── styles (source files)
    ├── app.css
    └── routes
        └── index.css

    After you've enabled the new postcss option, you can delete the processed files from app/styles folder and move your source files from styles to app/styles:

    .
├── app
│   └── styles (source files)
│       ├── app.css
│       └── routes
│           └── index.css

    You should then remove app/styles from your .gitignore file since it now contains source files rather than processed output.

    You can then update your package.json scripts to remove any usage of postcss since Remix handles this automatically. For example, if you had followed the original setup guide:

    {
  "scripts": {
-    "dev:css": "postcss styles --base styles --dir app/styles -w",
-    "build:css": "postcss styles --base styles --dir app/styles --env production",
-    "dev": "concurrently \"npm run dev:css\" \"remix dev\""
+    "dev": "remix dev"
  }
}

  • Stabilize built-in Tailwind support via the new tailwind option in remix.config.js. As a result, the future.unstable_tailwind option has also been deprecated. (#5960)

    The tailwind option is false by default, but when set to true will enable built-in support for Tailwind functions and directives in your CSS files if tailwindcss is installed.

    If you followed the original Tailwind setup guide for Remix and want to make use of this feature, you should first delete the generated app/tailwind.css.

    Then, if you have a styles/tailwind.css file, you should move it to app/tailwind.css.

    rm app/tailwind.css
mv styles/tailwind.css app/tailwind.css

    Otherwise, if you don't already have an app/tailwind.css file, you should create one with the following contents:

    @tailwind base;
@tailwind components;
@tailwind utilities;

    You should then remove /app/tailwind.css from your .gitignore file since it now contains source code rather than processed output.

    You can then update your package.json scripts to remove any usage of tailwindcss since Remix handles this automatically. For example, if you had followed the original setup guide:

    {
  // ...
  "scripts": {
-    "build": "run-s \"build:*\"",
+    "build": "remix build",
-    "build:css": "npm run generate:css -- --minify",
-    "build:remix": "remix build",
-    "dev": "run-p \"dev:*\"",
+    "dev": "remix dev",
-    "dev:css": "npm run generate:css -- --watch",
-    "dev:remix": "remix dev",
-    "generate:css": "npx tailwindcss -o ./app/tailwind.css",
    "start": "remix-serve build"
  }
  // ...
}

Patch Changes

  • Fix absolute paths in CSS url() rules when using CSS Modules, Vanilla Extract and CSS side-effect imports (#5788)
  • add warning for v2 "cjs"->"esm" serverModuleFormat default change (#6154)
  • Use correct require context in bareImports plugin. (#6181)
  • use minimatch for regex instead of glob-to-regexp (#6017)
  • Use the "automatic" JSX runtime when processing MDX files. (#6098)
  • Fix a bug in route matching that wass preventing a single splat ($.jsx) route from matching a root / path (#6130)
  • Resolve imports from route modules across the graph back to the virtual module created by the v2 routes plugin. This fixes issues where we would duplicate portions of route modules that were imported. (#6098)
  • Updated dependencies:

@remix-run/[email protected]

Minor Changes

  • add deprecation warning to @remix-run/eslint-config/jest ESLint config (#5697)

@remix-run/[email protected]

Minor Changes

  • Enable support for CSS Modules, Vanilla Extract and CSS side-effect imports (#6046)

    These CSS bundling features were previously only available via future.unstable_cssModules, future.unstable_vanillaExtract and future.unstable_cssSideEffectImports options in remix.config.js, but they have now been stabilized.

    CSS Bundle Setup

    In order to use these features, you first need to set up CSS bundling in your project. First install the @remix-run/css-bundle package.

    npm i @remix-run/css-bundle

    Then return the exported cssBundleHref as a stylesheet link descriptor from the links function at the root of your app.

    import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
import { cssBundleHref } from "@remix-run/css-bundle";

export const links: LinksFunction = () => {
  return [
    ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
    // ...
  ];
};

    CSS Modules

    To use CSS Modules, you can opt in via the .module.css file name convention. For example:

    .root {
  border: solid 1px;
  background: white;
  color: #454545;
}
    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";

    Vanilla Extract

    To use Vanilla Extract, first install its css package as a dev dependency.

    npm install -D @vanilla-extract/css

    You can then opt in via the .css.ts/.css.js file name convention. For example:

    import { style } from "@vanilla-extract/css";

export const root = style({
  border: "solid 1px",
  background: "white",
  color: "#454545",
});
    import * as styles from "./styles.css"; // Note that `.ts` is omitted here

export const Button = React.forwardRef(({ children, ...props }, ref) => {
  return <button {...props} ref={ref} className={styles.root} />;
});
Button.displayName = "Button";

    CSS Side-Effect Imports

    Any CSS files that are imported as side-effects (e.g. import "./styles.css") will be automatically included in the CSS bundle.

    Since JavaScript runtimes don't support importing CSS in this way, you'll also need to add any packages using CSS side-effect imports to the serverDependenciesToBundle 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:

    // remix.config.js
module.exports = {
  serverDependenciesToBundle: [
    /^@adobe\/react-spectrum/,
    /^@react-spectrum/,
    /^@spectrum-icons/,
  ],
  // ...
};

  • Stabilize built-in PostCSS support via the new postcss option in remix.config.js. As a result, the future.unstable_postcss option has also been deprecated. (#5960)

    The postcss option is false by default, but when set to true will enable processing of all CSS files using PostCSS if postcss.config.js is present.

    If you followed the original PostCSS setup guide for Remix, you may have a folder structure that looks like this, separating your source files from its processed output:

    .
├── app
│   └── styles (processed files)
│       ├── app.css
│       └── routes
│           └── index.css
└── styles (source files)
    ├── app.css
    └── routes
        └── index.css

    After you've enabled the new postcss option, you can delete the processed files from app/styles folder and move your source files from styles to app/styles:

    .
├── app
│   └── styles (source files)
│       ├── app.css
│       └── routes
│           └── index.css

    You should then remove app/styles from your .gitignore file since it now contains source files rather than processed output.

    You can then update your package.json scripts to remove any usage of postcss since Remix handles this automatically. For example, if you had followed the original setup guide:

    {
  "scripts": {
-    "dev:css": "postcss styles --base styles --dir app/styles -w",
-    "build:css": "postcss styles --base styles --dir app/styles --env production",
-    "dev": "concurrently \"npm run dev:css\" \"remix dev\""
+    "dev": "remix dev"
  }
}

  • Stabilize built-in Tailwind support via the new tailwind option in remix.config.js. As a result, the future.unstable_tailwind option has also been deprecated. (#5960)

    The tailwind option is false by default, but when set to true will enable built-in support for Tailwind functions and directives in your CSS files if tailwindcss is installed.

    If you followed the original Tailwind setup guide for Remix and want to make use of this feature, you should first delete the generated app/tailwind.css.

    Then, if you have a styles/tailwind.css file, you should move it to app/tailwind.css.

    rm app/tailwind.css
mv styles/tailwind.css app/tailwind.css

    Otherwise, if you don't already have an app/tailwind.css file, you should create one with the following contents:

    @tailwind base;
@tailwind components;
@tailwind utilities;

    You should then remove /app/tailwind.css from your .gitignore file since it now contains source code rather than processed output.

    You can then update your package.json scripts to remove any usage of tailwindcss since Remix handles this automatically. For example, if you had followed the original setup guide:

    {
  // ...
  "scripts": {
-    "build": "run-s \"build:*\"",
+    "build": "remix build",
-    "build:css": "npm run generate:css -- --minify",
-    "build:remix": "remix build",
-    "dev": "run-p \"dev:*\"",
+    "dev": "remix dev",
-    "dev:css": "npm run generate:css -- --watch",
-    "dev:remix": "remix dev",
-    "generate:css": "npx tailwindcss -o ./app/tailwind.css",
    "start": "remix-serve build"
  }
  // ...
}

Patch Changes

  • Revalidate loaders only when a change to one is detected. (#6135)
  • short circuit links and meta for routes that are not rendered due to errors (#6107)
  • don't warn about runtime deprecation warnings in production (#4421)
  • Update Remix for React Router no longer relying on useSyncExternalStore (#6121)
  • Fix false-positive resource route identification if a route only exports a boundary (#6125)
  • better type discrimination when unwrapping loader return types (#5516)

@remix-run/[email protected]

Minor Changes

  • Enable support for CSS Modules, Vanilla Extract and CSS side-effect imports (#6046)

    These CSS bundling features were previously only available via future.unstable_cssModules, future.unstable_vanillaExtract and future.unstable_cssSideEffectImports options in remix.config.js, but they have now been stabilized.

    CSS Bundle Setup

    In order to use these features, you first need to set up CSS bundling in your project. First install the @remix-run/css-bundle package.

    npm i @remix-run/css-bundle

    Then return the exported cssBundleHref as a stylesheet link descriptor from the links function at the root of your app.

    import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
import { cssBundleHref } from "@remix-run/css-bundle";

export const links: LinksFunction = () => {
  return [
    ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
    // ...
  ];
};

    CSS Modules

    To use CSS Modules, you can opt in via the .module.css file name convention. For example:

    .root {
  border: solid 1px;
  background: white;
  color: #454545;
}
    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";

    Vanilla Extract

    To use Vanilla Extract, first install its css package as a dev dependency.

    npm install -D @vanilla-extract/css

    You can then opt in via the .css.ts/.css.js file name convention. For example:

    import { style } from "@vanilla-extract/css";

export const root = style({
  border: "solid 1px",
  background: "white",
  color: "#454545",
});
    import * as styles from "./styles.css"; // Note that `.ts` is omitted here

export const Button = React.forwardRef(({ children, ...props }, ref) => {
  return <button {...props} ref={ref} className={styles.root} />;
});
Button.displayName = "Button";

    CSS Side-Effect Imports

    Any CSS files that are imported as side-effects (e.g. import "./styles.css") will be automatically included in the CSS bundle.

    Since JavaScript runtimes don't support importing CSS in this way, you'll also need to add any packages using CSS side-effect imports to the serverDependenciesToBundle 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:

    // remix.config.js
module.exports = {
  serverDependenciesToBundle: [
    /^@adobe\/react-spectrum/,
    /^@react-spectrum/,
    /^@spectrum-icons/,
  ],
  // ...
};

  • Dev server improvements (#6133)

    • Push-based app server syncing that doesn't rely on polling
    • App server as a managed subprocess
    • Gracefully handle new files and routes without crashing
    • Statically serve static assets to avoid fetch errors during app server reboots

    Guide

    Enable unstable_dev in remix.config.js:

    {
  future: {
    "unstable_dev": true
  }
}

    Remix App Server

    Update package.json scripts

    {
  "scripts": {
    "dev": "remix dev"
  }
}

    That's it!

    npm run dev

    Other app servers

    Update package.json scripts, specifying the command to run you app server with the -c/--command flag:

    {
  "scripts": {
    "dev": "remix dev -c 'node ./server.js'"
  }
}

    Then, call devReady in your server when its up and running.

    For example, an Express server would call devReady at the end of listen:

    // <other imports>
import { devReady } from "@remix-run/node";

// Path to Remix's server build directory ('build/' by default)
let BUILD_DIR = path.join(process.cwd(), "build");

// <code setting up your express server>

app.listen(3000, () => {
  let build = require(BUILD_DIR);
  console.log("Ready: http://localhost:" + port);

  // in development, call `devReady` _after_ your server is up and running
  if (process.env.NODE_ENV === "development") {
    devReady(build);
  }
});

    That's it!

    npm run dev

    Configuration

    Most users won't need to configure the dev server, but you might need to if:

    • You are setting up custom origins for SSL support or for Docker networking
    • You want to handle server updates yourself (e.g. via require cache purging)
    {
  future: {
    unstable_dev: {
      // Command to run your app server
      command: "wrangler", // default: `remix-serve ./build`
      // HTTP(S) scheme used when sending `devReady` messages to the dev server
      httpScheme: "https", // default: `"http"`
      // HTTP(S) host used when sending `devReady` messages to the dev server
      httpHost: "mycustomhost", // default: `"localhost"`
      // HTTP(S) port internally used by the dev server to statically serve built assets and to receive app server `devReady` messages
      httpPort: 8001, // default: Remix chooses an open port in the range 3001-3099
      // Websocket port internally used by the dev server for sending updates to the browser (Live reload, HMR, HDR)
      websocketPort: 8002, // default: Remix chooses an open port in the range 3001-3099
      // Whether the app server should be restarted when app is rebuilt
      // See `Advanced > restart` for more
      restart: false, // default: `true`
    }
  }
}

    You can also configure via flags. For example:

    remix dev -c 'nodemon ./server.mjs' --http-port=3001 --websocket-port=3002 --no-restart

    See remix dev --help for more details.

    restart

    If you want to manage app server updates yourself, you can use the --no-restart flag so that the Remix dev server doesn't restart the app server subprocess when a rebuild succeeds.

    For example, if you rely on require cache purging to keep your app server running while server changes are pulled in, then you'll want to use --no-restart.

    🚨 It is then your responsibility to call devReady whenever server changes are incorporated in your app server. 🚨

    So for require cache purging, you'd want to:

    1. Purge the require cache
    2. require your server build
    3. Call devReady within a if (process.env.NODE_ENV === 'development')

    (Looking at you, Kent 😆)

    The ultimate solution for --no-restart would be for you to implement server-side HMR for your app server.
    Note: server-side HMR is not to be confused with the client-side HMR provided by Remix.
    Then your app server could continuously update itself with new build with 0 downtime and without losing in-memory data that wasn't affected by the server changes.

    This is left as an exercise to the reader.

  • Stabilize built-in PostCSS support via the new postcss option in remix.config.js. As a result, the future.unstable_postcss option has also been deprecated. (#5960)

    The postcss option is false by default, but when set to true will enable processing of all CSS files using PostCSS if postcss.config.js is present.

    If you followed the original PostCSS setup guide for Remix, you may have a folder structure that looks like this, separating your source files from its processed output:

    .
├── app
│   └── styles (processed files)
│       ├── app.css
│       └── routes
│           └── index.css
└── styles (source files)
    ├── app.css
    └── routes
        └── index.css

    After you've enabled the new postcss option, you can delete the processed files from app/styles folder and move your source files from styles to app/styles:

    .
├── app
│   └── styles (source files)
│       ├── app.css
│       └── routes
│           └── index.css

    You should then remove app/styles from your .gitignore file since it now contains source files rather than processed output.

    You can then update your package.json scripts to remove any usage of postcss since Remix handles this automatically. For example, if you had followed the original setup guide:

    {
  "scripts": {
-    "dev:css": "postcss styles --base styles --dir app/styles -w",
-    "build:css": "postcss styles --base styles --dir app/styles --env production",
-    "dev": "concurrently \"npm run dev:css\" \"remix dev\""
+    "dev": "remix dev"
  }
}

  • Stabilize built-in Tailwind support via the new tailwind option in remix.config.js. As a result, the future.unstable_tailwind option has also been deprecated. (#5960)

    The tailwind option is false by default, but when set to true will enable built-in support for Tailwind functions and directives in your CSS files if tailwindcss is installed.

    If you followed the original Tailwind setup guide for Remix and want to make use of this feature, you should first delete the generated app/tailwind.css.

    Then, if you have a styles/tailwind.css file, you should move it to app/tailwind.css.

    rm app/tailwind.css
mv styles/tailwind.css app/tailwind.css

    Otherwise, if you don't already have an app/tailwind.css file, you should create one with the following contents:

    @tailwind base;
@tailwind components;
@tailwind utilities;

    You should then remove /app/tailwind.css from your .gitignore file since it now contains source code rather than processed output.

    You can then update your package.json scripts to remove any usage of tailwindcss since Remix handles this automatically. For example, if you had followed the original setup guide:

    {
  // ...
  "scripts": {
-    "build": "run-s \"build:*\"",
+    "build": "remix build",
-    "build:css": "npm run generate:css -- --minify",
-    "build:remix": "remix build",
-    "dev": "run-p \"dev:*\"",
+    "dev": "remix dev",
-    "dev:css": "npm run generate:css -- --watch",
-    "dev:remix": "remix dev",
-    "generate:css": "npx tailwindcss -o ./app/tailwind.css",
    "start": "remix-serve build"
  }
  // ...
}

Patch Changes

  • better type discrimination when unwrapping loader return types (#5516)
  • pass AppLoadContext to handleRequest (#5836)

@remix-run/[email protected]

Minor Changes

  • Enable support for CSS Modules, Vanilla Extract and CSS side-effect imports (#6046)

    These CSS bundling features were previously only available via future.unstable_cssModules, future.unstable_vanillaExtract and future.unstable_cssSideEffectImports options in remix.config.js, but they have now been stabilized.

    CSS Bundle Setup

    In order to use these features, you first need to set up CSS bundling in your project. First install the @remix-run/css-bundle package.

    npm i @remix-run/css-bundle

    Then return the exported cssBundleHref as a stylesheet link descriptor from the links function at the root of your app.

    import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
import { cssBundleHref } from "@remix-run/css-bundle";

export const links: LinksFunction = () => {
  return [
    ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
    // ...
  ];
};

    CSS Modules

    To use CSS Modules, you can opt in via the .module.css file name convention. For example:

    .root {
  border: solid 1px;
  background: white;
  color: #454545;
}
    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";

    Vanilla Extract

    To use Vanilla Extract, first install its css package as a dev dependency.

    npm install -D @vanilla-extract/css

    You can then opt in via the .css.ts/.css.js file name convention. For example:

    import { style } from "@vanilla-extract/css";

export const root = style({
  border: "solid 1px",
  background: "white",
  color: "#454545",
});
    import * as styles from "./styles.css"; // Note that `.ts` is omitted here

export const Button = React.forwardRef(({ children, ...props }, ref) => {
  return <button {...props} ref={ref} className={styles.root} />;
});
Button.displayName = "Button";

    CSS Side-Effect Imports

    Any CSS files that are imported as side-effects (e.g. import "./styles.css") will be automatically included in the CSS bundle.

    Since JavaScript runtimes don't support importing CSS in this way, you'll also need to add any packages using CSS side-effect imports to the serverDependenciesToBundle 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:

    // remix.config.js
module.exports = {
  serverDependenciesToBundle: [
    /^@adobe\/react-spectrum/,
    /^@react-spectrum/,
    /^@spectrum-icons/,
  ],
  // ...
};

Patch Changes

[email protected]

Patch Changes

  • update express template to output ESM and use the new dev command (#6174)
  • enable unstable_dev by default in the remix template (#6180)
  • Updated dependencies:

@remix-run/[email protected]

Patch Changes

@remix-run/[email protected]

Patch Changes

@remix-run/[email protected]

Patch Changes

@remix-run/[email protected]

Patch Changes

@remix-run/[email protected]

Patch Changes

@remix-run/[email protected]

Patch Changes

@remix-run/[email protected]

Patch Changes

@remix-run/[email protected]

Patch Changes

@remix-run/[email protected]

Patch Changes

  • add @remix-run/node/install side-effect to allow node --require @remix-run/node/install (#6132)
  • add missing files to published package (#6179)
  • Updated dependencies:

@remix-run/[email protected]

Patch Changes

@remix-run/[email protected]

Patch Changes

[email protected]

remix

See the CHANGELOG.md in individual Remix packages for all changes.

@pcattori pcattori merged commit 6f9ef74 into release-next Apr 26, 2023
@pcattori pcattori deleted the changeset-release/release-next branch April 26, 2023 18:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@pcattori