Merge pull request #1408 from simonihmig/export-styles

Export the CSS as well as a JS only variant

Author: simonihmig

.changeset/many-crabs-cross.md

@@ -0,0 +1,9 @@
+---
+'@responsive-image/react': minor
+---
+
+Export the CSS as well as a JS only variant
+
+Most of the time the default export should "just work", but this change adds some flexibility for users of the package.
+
+In particular it makes it easier to include the CSS in a client-side bundle in an application that is otherwise server-side only.

apps/docs/src/frameworks/react.md

@@ -35,3 +35,16 @@ To process [local images](../usage/local-images.md) you will need to setup one o
 The `@responsibe-image/cdn` package provides multiple helper functions to support [remote images](../usage/remote-images.md) served from different image CDNs for use with the `<responsive-image/>` component.
 
 Please refer to the [image CDN](../cdn/index.md) guide for details on all supported options and examples of the respective image CDN.
+
+## Separate stylesheet and JavaScript imports
+
+The default export includes an import of the component's CSS. If this causes problems with your build setup you can import the JavaScript and CSS separately.
+
+```diff
+- import { ResponsiveImage } from "@responsive-image/react";
++ import { ResponsiveImage } from "@responsive-image/react/responsive-image.js";
++ import "@responsive-image/react/responsive-image.css";
+```
+
+> [!TIP]
+> If you use Vite to build for server-side rendering you can add `@responsive-image/react` to the [ssr.noExternals](https://vite.dev/guide/ssr.html#ssr-externals) option in your Vite config.

packages/react/package.json

@@ -19,9 +19,17 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    "import": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+    "./responsive-image.css": {
+      "default": "./dist/responsive-image.css"
+    },
+    "./responsive-image.js": {
+      "default": "./dist/responsive-image.js"
+    },
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
     }
   },
   "scripts": {

packages/react/src/index.tsx

@@ -1 +1,2 @@
+import './responsive-image.css'; // import the CSS here to have an export in package.json that is JS-only
 export { ResponsiveImage } from './responsive-image.tsx';

packages/react/src/responsive-image.tsx

@@ -6,7 +6,6 @@ import {
   type ImageUrlForType,
 } from '@responsive-image/core';
 import React, { useState } from 'react';
-import './responsive-image.css';
 
 export type ResponsiveImageLayout = 'responsive' | 'fixed';