Support importing npm modules to preview styles (#48)

Author: delucis

.changeset/cyan-turtles-sip.md

@@ -0,0 +1,25 @@
+---
+'astro-netlify-cms': minor
+---
+
+Add support for importing npm packages via `previewStyles` config
+
+⚠️ **BREAKING CHANGE** ⚠️
+
+This release changes how you import a local CSS file in `previewStyles`.
+These must now be prefixed with a leading `/`:
+
+```diff
+{
+  previewStyles: [
+-   'src/styles/base.css',
++   '/src/styles/base.css',
+  ],
+}
+```
+
+This allows us to support importing CSS you may have installed from an npm module, for example importing font CSS from Fontsource:
+
+```js
+previewStyles: ['@fontsource/roboto'];
+```

README.md

@@ -116,7 +116,9 @@ You can provide URLs to external CSS stylesheets (Google Fonts for example), pat
 ```js
 previewStyles: [
   // Path to a local CSS file, relative to your project’s root directory
-  'src/styles/main.css',
+  '/src/styles/main.css',
+  // An npm module identifier
+  '@fontsource/roboto',
   // A URL to an externally hosted CSS file
   'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap',
   // Raw CSS!

demo/astro.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
     NetlifyCMS({
       previewStyles: [
         'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap',
-        'src/styles/blog.css',
+        '/src/styles/blog.css',
       ],
       config: {
         // Use Netlify’s “Git Gateway” authentication and target our default branch

integration/vite-plugin-admin-dashboard.ts

@@ -24,7 +24,7 @@ function generateVirtualConfigModule({
       styles.push(JSON.stringify([style, opts]));
     } else {
       const name = `style__${index}`;
-      imports.push(`import ${name} from '/${style}?raw';`);
+      imports.push(`import ${name} from '${style}?raw';`);
       styles.push(`[${name}, { raw: true }]`);
     }
   });