rename "side effects" to "side-effect imports"

remix-run · markdalgleish · Jan 4, 2023 · Nov 24, 2022 · Nov 24, 2022 · Nov 24, 2022
commit 4e0023deaa1822f269d696b42b9783c262cb48e8
diff --git a/.changeset/hungry-owls-greet.md b/.changeset/hungry-owls-greet.md
@@ -5,4 +5,4 @@
 "@remix-run/testing": minor
 ---
 
-Add unstable support for CSS side effects via `future.unstable_cssSideEffects` feature flag
+Add unstable support for CSS side-effect imports via `future.unstable_cssSideEffectImports` feature flag
diff --git a/docs/file-conventions/remix-config.md b/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, or when consuming packages with [CSS side effects][css-side-effects].
+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,4 +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-effects]: ../guides/styling#css-side-effects
+[css-side-effect-imports]: ../guides/styling#css-side-effect-imports
diff --git a/docs/guides/styling.md b/docs/guides/styling.md
@@ -841,25 +841,25 @@ export const Button = React.forwardRef(
 Button.displayName = "Button";
 ```
 
-### CSS Side Effects
+### 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_cssSideEffects` feature flag in `remix.config.js`.
+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_cssSideEffects: true,
+    unstable_cssSideEffectImports: true,
   },
   // ...
 };
 ```
 
-Since JavaScript runtimes don't support importing CSS files 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 processed before running on the server. For example, to use React Spectrum:
+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} */
@@ -870,7 +870,7 @@ module.exports = {
     /^@spectrum-icons/,
   ],
   future: {
-    unstable_cssSideEffects: true,
+    unstable_cssSideEffectImports: true,
   },
   // ...
 };

diff --git a/integration/css-modules-test.ts b/integration/css-modules-test.ts
@@ -26,7 +26,7 @@ test.describe("CSS Modules", () => {
               // Enable all CSS future flags to
               // ensure features don't clash
               unstable_cssModules: true,
-              unstable_cssSideEffects: true,
+              unstable_cssSideEffectImports: true,
             },
           };
         `,

diff --git a/integration/css-side-effects-test.ts → integration/css-side-effect-imports-test.ts b/integration/css-side-effects-test.ts → integration/css-side-effect-imports-test.ts
@@ -11,7 +11,7 @@ import {
 
 const TEST_PADDING_VALUE = "20px";
 
-test.describe("CSS side effects", () => {
+test.describe("CSS side-effect imports", () => {
   let fixture: Fixture;
   let appFixture: AppFixture;
 
@@ -25,7 +25,7 @@ test.describe("CSS side effects", () => {
               // Enable all CSS future flags to
               // ensure features don't clash
               unstable_cssModules: true,
-              unstable_cssSideEffects: true,
+              unstable_cssSideEffectImports: true,
             },
           };
         `,

diff --git a/integration/deterministic-build-output-test.ts b/integration/deterministic-build-output-test.ts
@@ -17,7 +17,7 @@ test("builds deterministically under different paths", async () => {
   //  * browserRouteModulesPlugin (implicitly tested by root route)
   //  * cssEntryModulePlugin (implicitly tested by build)
   //  * cssModulesPlugin (via app/routes/foo.tsx' CSS Modules import)
-  //  * cssSideEffectsPlugin (via app/routes/foo.tsx' CSS side effect import)
+  //  * cssSideEffectImportsPlugin (via app/routes/foo.tsx' CSS side-effect import)
   //  * emptyModulesPlugin (via app/routes/foo.tsx' server import)
   //  * mdx (via app/routes/index.mdx)
   //  * serverAssetsManifestPlugin (implicitly tested by build)
@@ -29,7 +29,7 @@ test("builds deterministically under different paths", async () => {
         module.exports = {
           future: {
             unstable_cssModules: true,
-            unstable_cssSideEffects: true,
+            unstable_cssSideEffectImports: true,
           },
         };
       `,

diff --git a/packages/remix-dev/__tests__/cssSideEffectsPlugin-test.ts b/packages/remix-dev/__tests__/cssSideEffectsPlugin-test.ts
@@ -1,10 +1,10 @@
 import dedent from "dedent";
 
-import { addSuffixToCssSideEffectImports } from "../compiler/plugins/cssSideEffectsPlugin";
+import { addSuffixToCssSideEffectImports } from "../compiler/plugins/cssSideEffectImportsPlugin";
 
 describe("addSuffixToCssSideEffectImports", () => {
   describe("adds suffix", () => {
-    test("side effect require", () => {
+    test("side-effect require", () => {
       let code = dedent`
         require("./foo.css");
       `;
@@ -14,7 +14,7 @@ describe("addSuffixToCssSideEffectImports", () => {
       );
     });
 
-    test("side effect import", () => {
+    test("side-effect import", () => {
       let code = dedent`
         import "./foo.css";
       `;
@@ -24,7 +24,7 @@ describe("addSuffixToCssSideEffectImports", () => {
       );
     });
 
-    test("side effect import with JSX", () => {
+    test("side-effect import with JSX", () => {
       let code = dedent`
         import "./foo.css";
 
@@ -39,7 +39,7 @@ describe("addSuffixToCssSideEffectImports", () => {
       `);
     });
 
-    test("side effect import in TypeScript", () => {
+    test("side-effect import in TypeScript", () => {
       let code = dedent`
         require("./foo.css");
 
@@ -54,7 +54,7 @@ describe("addSuffixToCssSideEffectImports", () => {
       `);
     });
 
-    test("side effect import in TypeScript with JSX", () => {
+    test("side-effect import in TypeScript with JSX", () => {
       let code = dedent`
         require("./foo.css");
 
@@ -71,7 +71,7 @@ describe("addSuffixToCssSideEffectImports", () => {
       `);
     });
 
-    test("conditional side effect require", () => {
+    test("conditional side-effect require", () => {
       let code = dedent`
         if (process.env.NODE_ENV === "production") {
           require("./foo.min.css");
@@ -90,7 +90,7 @@ describe("addSuffixToCssSideEffectImports", () => {
       `);
     });
 
-    test("conditional side effect require via ternary", () => {
+    test("conditional side-effect require via ternary", () => {
       let code = dedent`
         process.env.NODE_ENV === "production" ? require("./foo.min.css") : require("./foo.css");
       `;
@@ -100,7 +100,7 @@ describe("addSuffixToCssSideEffectImports", () => {
       );
     });
 
-    test("conditional side effect require via && operator", () => {
+    test("conditional side-effect require via && operator", () => {
       let code = dedent`
         process.env.NODE_ENV === "development" && require("./debug.css");
       `;
@@ -110,7 +110,7 @@ describe("addSuffixToCssSideEffectImports", () => {
       );
     });
 
-    test("conditional side effect require via || operator", () => {
+    test("conditional side-effect require via || operator", () => {
       let code = dedent`
         process.env.NODE_ENV === "production" || require("./debug.css");
       `;
@@ -122,7 +122,7 @@ describe("addSuffixToCssSideEffectImports", () => {
   });
 
   describe("doesn't add suffix", () => {
-    test("ignores non side effect require of CSS", () => {
+    test("ignores non side-effect require of CSS", () => {
       let code = dedent`
         const href = require("./foo.css");
       `;
@@ -162,7 +162,7 @@ describe("addSuffixToCssSideEffectImports", () => {
       );
     });
 
-    test("ignores conditional non side effect require of CSS", () => {
+    test("ignores conditional non side-effect require of CSS", () => {
       let code = dedent`
         const href = process.env.NODE_ENV === "production" ?
           require("./foo.min.css") :
@@ -177,7 +177,7 @@ describe("addSuffixToCssSideEffectImports", () => {
       `);
     });
 
-    test("ignores conditional non side effect require of CSS via logical operators", () => {
+    test("ignores conditional non side-effect require of CSS via logical operators", () => {
       let code = dedent`
         const href = (process.env.NODE_ENV === "production" && require("./foo.min.css")) || require("./foo.css");
       `;
@@ -187,7 +187,7 @@ describe("addSuffixToCssSideEffectImports", () => {
       );
     });
 
-    test("ignores side effect require of non-CSS", () => {
+    test("ignores side-effect require of non-CSS", () => {
       let code = dedent`
         require("./foo");
       `;
@@ -197,7 +197,7 @@ describe("addSuffixToCssSideEffectImports", () => {
       );
     });
 
-    test("ignores side effect import of non-CSS", () => {
+    test("ignores side-effect import of non-CSS", () => {
       let code = dedent`
         import "./foo";
       `;

diff --git a/packages/remix-dev/__tests__/readConfig-test.ts b/packages/remix-dev/__tests__/readConfig-test.ts
@@ -24,7 +24,7 @@ describe("readConfig", () => {
         tsconfigPath: expect.any(String),
         future: {
           unstable_cssModules: expect.any(Boolean),
-          unstable_cssSideEffects: expect.any(Boolean),
+          unstable_cssSideEffectImports: expect.any(Boolean),
           v2_meta: expect.any(Boolean),
         },
       },
@@ -39,7 +39,7 @@ describe("readConfig", () => {
         "entryServerFile": "entry.server.tsx",
         "future": Object {
           "unstable_cssModules": Any<Boolean>,
-          "unstable_cssSideEffects": Any<Boolean>,
+          "unstable_cssSideEffectImports": Any<Boolean>,
           "v2_meta": Any<Boolean>,
         },
         "mdx": undefined,

diff --git a/packages/remix-dev/compiler/compileBrowser.ts b/packages/remix-dev/compiler/compileBrowser.ts
@@ -20,7 +20,7 @@ import { emptyModulesPlugin } from "./plugins/emptyModulesPlugin";
 import { mdxPlugin } from "./plugins/mdx";
 import { urlImportsPlugin } from "./plugins/urlImportsPlugin";
 import { cssModulesPlugin } from "./plugins/cssModulesPlugin";
-import { cssSideEffectsPlugin } from "./plugins/cssSideEffectsPlugin";
+import { cssSideEffectImportsPlugin } from "./plugins/cssSideEffectImportsPlugin";
 import {
   cssBundleEntryModulePlugin,
   cssBundleEntryModuleId,
@@ -68,7 +68,8 @@ const writeAssetsManifest = async (
 };
 
 const isCssBundlingEnabled = (config: RemixConfig) =>
-  config.future.unstable_cssModules || config.future.unstable_cssSideEffects;
+  config.future.unstable_cssModules ||
+  config.future.unstable_cssSideEffectImports;
 
 const createEsbuildConfig = (
   build: "app" | "css",
@@ -105,8 +106,8 @@ const createEsbuildConfig = (
     config.future.unstable_cssModules
       ? cssModulesPlugin({ mode, rootDirectory, outputCss: isCssBuild })
       : null,
-    config.future.unstable_cssSideEffects
-      ? cssSideEffectsPlugin({ rootDirectory })
+    config.future.unstable_cssSideEffectImports
+      ? cssSideEffectImportsPlugin({ rootDirectory })
       : null,
     cssFilePlugin({ mode, rootDirectory }),
     urlImportsPlugin(),

diff --git a/packages/remix-dev/compiler/compilerServer.ts b/packages/remix-dev/compiler/compilerServer.ts
@@ -9,7 +9,7 @@ import type { AssetsManifest } from "./assets";
 import { loaders } from "./loaders";
 import type { CompileOptions } from "./options";
 import { cssModulesPlugin } from "./plugins/cssModulesPlugin";
-import { cssSideEffectsPlugin } from "./plugins/cssSideEffectsPlugin";
+import { cssSideEffectImportsPlugin } from "./plugins/cssSideEffectImportsPlugin";
 import { cssFilePlugin } from "./plugins/cssFilePlugin";
 import { deprecatedRemixPackagePlugin } from "./plugins/deprecatedRemixPackagePlugin";
 import { emptyModulesPlugin } from "./plugins/emptyModulesPlugin";
@@ -56,8 +56,8 @@ const createEsbuildConfig = (
     config.future.unstable_cssModules
       ? cssModulesPlugin({ mode, rootDirectory, outputCss: false })
       : null,
-    config.future.unstable_cssSideEffects
-      ? cssSideEffectsPlugin({ rootDirectory })
+    config.future.unstable_cssSideEffectImports
+      ? cssSideEffectImportsPlugin({ rootDirectory })
       : null,
     cssFilePlugin({ mode, rootDirectory }),
     urlImportsPlugin(),

diff --git a/.../compiler/plugins/cssSideEffectsPlugin.ts → ...ler/plugins/cssSideEffectImportsPlugin.ts b/.../compiler/plugins/cssSideEffectsPlugin.ts → ...ler/plugins/cssSideEffectImportsPlugin.ts
@@ -11,7 +11,7 @@ const namespace = `${pluginName}-ns`;
 const cssSideEffectSuffix = "?__remix_sideEffect__";
 const cssSideEffectFilter = new RegExp(`\\.css\\?${cssSideEffectSuffix}$`);
 
-export function isCssSideEffectPath(path: string): boolean {
+export function isCssSideEffectImportPath(path: string): boolean {
   return cssSideEffectFilter.test(path);
 }
 
@@ -36,7 +36,7 @@ const loaderForExtension: Record<Extension, Loader> = {
  * to the CSS bundle. This is primarily designed to support packages that
  * import plain CSS files directly within JS files.
  */
-export const cssSideEffectsPlugin = (options: {
+export const cssSideEffectImportsPlugin = (options: {
   rootDirectory: string;
 }): Plugin => {
   return {

diff --git a/packages/remix-dev/compiler/plugins/serverBareModulesPlugin.ts b/packages/remix-dev/compiler/plugins/serverBareModulesPlugin.ts
@@ -9,7 +9,7 @@ import {
   serverBuildVirtualModule,
   assetsManifestVirtualModule,
 } from "../virtualModules";
-import { isCssSideEffectPath } from "./cssSideEffectsPlugin";
+import { isCssSideEffectImportPath } from "./cssSideEffectImportsPlugin";
 import { createMatchPath } from "../utils/tsconfig";
 import { getPreferredPackageManager } from "../../cli/getPreferredPackageManager";
 
@@ -71,8 +71,8 @@ export function serverBareModulesPlugin(
           return undefined;
         }
 
-        // Always bundle CSS side effects.
-        if (isCssSideEffectPath(path)) {
+        // Always bundle CSS side-effect imports.
+        if (isCssSideEffectImportPath(path)) {
           return undefined;
         }
 

diff --git a/packages/remix-dev/config.ts b/packages/remix-dev/config.ts
@@ -33,7 +33,7 @@ export type ServerPlatform = "node" | "neutral";
 
 interface FutureConfig {
   unstable_cssModules: boolean;
-  unstable_cssSideEffects: boolean;
+  unstable_cssSideEffectImports: boolean;
   v2_meta: boolean;
 }
 
@@ -484,7 +484,8 @@ export async function readConfig(
 
   let future = {
     unstable_cssModules: appConfig.future?.unstable_cssModules === true,
-    unstable_cssSideEffects: appConfig.future?.unstable_cssSideEffects === true,
+    unstable_cssSideEffectImports:
+      appConfig.future?.unstable_cssSideEffectImports === true,
     v2_meta: appConfig.future?.v2_meta === true,
   };
 

diff --git a/packages/remix-react/entry.ts b/packages/remix-react/entry.ts
@@ -19,7 +19,7 @@ export interface EntryContext extends RemixContextObject {
 
 export interface FutureConfig {
   unstable_cssModules: boolean;
-  unstable_cssSideEffects: boolean;
+  unstable_cssSideEffectImports: boolean;
   v2_meta: boolean;
 }
 

diff --git a/packages/remix-server-runtime/entry.ts b/packages/remix-server-runtime/entry.ts
@@ -13,7 +13,7 @@ export interface EntryContext {
 
 export interface FutureConfig {
   unstable_cssModules: true;
-  unstable_cssSideEffects: boolean;
+  unstable_cssSideEffectImports: boolean;
   v2_meta: boolean;
 }
 

diff --git a/packages/remix-testing/create-remix-stub.tsx b/packages/remix-testing/create-remix-stub.tsx
@@ -157,7 +157,7 @@ function createRemixContext(
     },
     future: {
       unstable_cssModules: false,
-      unstable_cssSideEffects: false,
+      unstable_cssSideEffectImports: false,
       v2_meta: false,
       ...future,
     },