@quilted/rollup 0.1.5 → 0.1.7

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @quilted/rollup
 
+## 0.1.7
+
+### Patch Changes
+
+- [`f450b0e4`](https://github.com/lemonmade/quilt/commit/f450b0e4ff5026dfd98f8fa044fb1fa26c0861bf) Thanks [@lemonmade](https://github.com/lemonmade)! - Actually fix Babel `target` option
+
+- [`29564cdc`](https://github.com/lemonmade/quilt/commit/29564cdcd0f82cb5bb2eee6d76ad9314db28d14c) Thanks [@lemonmade](https://github.com/lemonmade)! - Add asset plugins
+
+## 0.1.6
+
+### Patch Changes
+
+- [`a2615aa0`](https://github.com/lemonmade/quilt/commit/a2615aa06a3cd146111996c8401466c5d8b9be09) Thanks [@lemonmade](https://github.com/lemonmade)! - Default to GraphQL in app server
+
+- [`2a0b85fe`](https://github.com/lemonmade/quilt/commit/2a0b85fe4a2d07ce107e52a3f246728c7c38fbf2) Thanks [@lemonmade](https://github.com/lemonmade)! - Add CSS plugin to app
+
+- [`a2615aa0`](https://github.com/lemonmade/quilt/commit/a2615aa06a3cd146111996c8401466c5d8b9be09) Thanks [@lemonmade](https://github.com/lemonmade)! - Remove 'use client' warnings
+
 ## 0.1.5
 
 ### Patch Changes

package/build/cjs/app.cjs

@@ -34,20 +34,33 @@ async function quiltAppBrowser({
   graphql = true
 } = {}) {
   const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
-  const minify = assets?.minify ?? true;
+  const minify = assets?.minify ?? mode === 'production';
+  const baseURL = assets?.baseURL ?? '/assets/';
   const [{
     visualizer
+  }, {
+    assetManifest
   }, {
     sourceCode
+  }, {
+    css
   }, {
     rawAssets,
     staticAssets
   }, {
     systemJS
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), Promise.resolve().then(function () { return require('./features/source-code.cjs'); }), Promise.resolve().then(function () { return require('./features/assets.cjs'); }), Promise.resolve().then(function () { return require('./features/system-js.cjs'); }), rollup.getNodePlugins()]);
-  const plugins = [...nodePlugins, systemJS(), sourceCode({
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('@quilted/assets/rollup'), Promise.resolve().then(function () { return require('./features/source-code.cjs'); }), Promise.resolve().then(function () { return require('./features/css.cjs'); }), Promise.resolve().then(function () { return require('./features/assets.cjs'); }), Promise.resolve().then(function () { return require('./features/system-js.cjs'); }), rollup.getNodePlugins()]);
+  const plugins = [...nodePlugins, systemJS({
+    minify
+  }), sourceCode({
     mode
-  }), rawAssets(), staticAssets()];
+  }), css({
+    minify,
+    emit: true
+  }), rawAssets(), staticAssets({
+    baseURL,
+    emit: true
+  })];
   if (env) {
     const {
       magicModuleEnv,
@@ -89,15 +102,28 @@ async function quiltAppBrowser({
     } = await import('rollup-plugin-esbuild');
     plugins.push(minify());
   }
-  plugins.push(visualizer({
+  plugins.push(
+  // @ts-expect-error The plugin still depends on Rollup 3
+  assetManifest({
+    baseUrl: baseURL,
+    path: path__namespace.resolve(`build/manifests/assets.json`)
+  }), visualizer({
     template: 'treemap',
     open: false,
     brotliSize: true,
-    filename: path__namespace.resolve(`reports/bundle-visualizer.html`)
+    filename: path__namespace.resolve(`build/reports/bundle-visualizer.html`)
   }));
   return {
     input: entry,
     plugins,
+    onwarn(warning, defaultWarn) {
+      // Removes annoying warnings for React-focused libraries that
+      // include 'use client' directives.
+      if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && /['"]use client['"]/.test(warning.message)) {
+        return;
+      }
+      defaultWarn(warning);
+    },
     output: {
       // format: isESM ? 'esm' : 'systemjs',
       format: 'esm',
@@ -112,7 +138,7 @@ async function quiltAppBrowser({
 async function quiltAppServer({
   app,
   env,
-  graphql,
+  graphql = true,
   entry = constants.MAGIC_MODULE_ENTRY,
   minify = false
 } = {}) {
@@ -121,14 +147,19 @@ async function quiltAppServer({
     visualizer
   }, {
     sourceCode
+  }, {
+    css
   }, {
     rawAssets,
     staticAssets
   }, {
     magicModuleRequestRouterEntry
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), Promise.resolve().then(function () { return require('./features/source-code.cjs'); }), Promise.resolve().then(function () { return require('./features/assets.cjs'); }), Promise.resolve().then(function () { return require('./features/request-router.cjs'); }), rollup.getNodePlugins()]);
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), Promise.resolve().then(function () { return require('./features/source-code.cjs'); }), Promise.resolve().then(function () { return require('./features/css.cjs'); }), Promise.resolve().then(function () { return require('./features/assets.cjs'); }), Promise.resolve().then(function () { return require('./features/request-router.cjs'); }), rollup.getNodePlugins()]);
   const plugins = [...nodePlugins, sourceCode({
     mode
+  }), css({
+    emit: false,
+    minify
   }), rawAssets(), staticAssets({
     emit: false
   })];
@@ -180,7 +211,7 @@ async function quiltAppServer({
     template: 'treemap',
     open: false,
     brotliSize: true,
-    filename: path__namespace.resolve(`reports/bundle-visualizer.html`)
+    filename: path__namespace.resolve(`build/reports/bundle-visualizer.html`)
   }));
   return {
     input: entry,

package/build/cjs/features/assets.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var path = require('node:path');
-var promises = require('node:fs/promises');
+var fs = require('node:fs/promises');
 var node_crypto = require('node:crypto');
 var mime = require('mrmime');
 
@@ -48,7 +48,7 @@ function rawAssets() {
       }
       const moduleId = cleanModuleIdentifier(id);
       this.addWatchFile(moduleId);
-      const file = await promises.readFile(moduleId, {
+      const file = await fs.readFile(moduleId, {
         encoding: 'utf-8'
       });
       return `export default ${JSON.stringify(file)}`;
@@ -75,7 +75,7 @@ function staticAssets({
         return cached;
       }
       const file = cleanModuleIdentifier(id);
-      const content = await promises.readFile(file);
+      const content = await fs.readFile(file);
       let url;
       if (!file.endsWith('.svg') && content.length < inlineLimit) {
         // base64 inlined as a string

package/build/cjs/features/css.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+const CSS_REGEX = /\.css$/;
+const CSS_MODULE_REGEX = /\.module\.css$/;
+function css({
+  minify = true,
+  emit = true
+}) {
+  const styles = new Map();
+  return {
+    name: '@quilted/css',
+    async transform(code, id) {
+      if (!CSS_REGEX.test(id)) return;
+      const {
+        transform
+      } = await import('lightningcss');
+      const transformed = transform({
+        filename: id,
+        code: new TextEncoder().encode(code),
+        cssModules: CSS_MODULE_REGEX.test(id),
+        minify: emit && minify
+      });
+      styles.set(id, new TextDecoder().decode(transformed.code));
+      const exports = transformed.exports ? Object.fromEntries(Object.entries(transformed.exports).map(([key, exported]) => [key, exported.name])) : undefined;
+      return {
+        code: exports ? `export default JSON.parse(${JSON.stringify(JSON.stringify(exports))})` : `export default undefined;`,
+        map: {
+          mappings: ''
+        },
+        moduleSideEffects: 'no-treeshake'
+      };
+    },
+    async renderChunk(_, chunk) {
+      if (!emit) return null;
+      let chunkCss = '';
+      for (const id of Object.keys(chunk.modules)) {
+        if (CSS_REGEX.test(id) && styles.has(id)) {
+          chunkCss += styles.get(id);
+        }
+      }
+      if (chunkCss.length === 0) return null;
+      const code = chunkCss;
+
+      // if (minify) {
+      //   const {default: CleanCSS} = await import('clean-css');
+
+      //   const cleaner = new CleanCSS({
+      //     rebase: false,
+      //   });
+
+      //   const minified = cleaner.minify(chunkCss);
+
+      //   if (minified.errors.length > 0) {
+      //     throw minified.errors[0];
+      //   }
+
+      //   code = minified.styles;
+      // }
+
+      const fileHandle = this.emitFile({
+        type: 'asset',
+        name: `${chunk.fileName.split('.')[0]}.css`,
+        source: code
+      });
+      chunk.imports.push(this.getFileName(fileHandle));
+      return null;
+    }
+  };
+}
+
+exports.css = css;

package/build/cjs/features/graphql.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var path = require('node:path');
-var promises = require('node:fs/promises');
+var fs = require('node:fs/promises');
 var graphql$1 = require('graphql');
 var transform = require('./graphql/transform.cjs');
 
@@ -46,10 +46,10 @@ function graphql({
           operations[operation.id] = operation.source;
         }
       }
-      await promises.mkdir(path.dirname(manifestPath), {
+      await fs.mkdir(path.dirname(manifestPath), {
         recursive: true
       });
-      await promises.writeFile(manifestPath, JSON.stringify(operations, null, 2));
+      await fs.writeFile(manifestPath, JSON.stringify(operations, null, 2));
     }
   };
 }
@@ -71,7 +71,7 @@ async function loadDocument(code, file, plugin, add, level = 0, seen = new Set()
       throw new Error(`Could not find ${JSON.stringify(imported)} from ${JSON.stringify(file)}`);
     }
     plugin.addWatchFile(resolvedId.id);
-    const contents = await promises.readFile(resolvedId.id, {
+    const contents = await fs.readFile(resolvedId.id, {
       encoding: 'utf8'
     });
     return loadDocument(contents, resolvedId.id, plugin, add, level + 1, seen);

package/build/cjs/features/source-code.cjs

@@ -9,6 +9,7 @@ function sourceCode({
   targets
 }) {
   return babel({
+    envName: mode,
     configFile: false,
     babelrc: false,
     presets: [require$1.resolve('@babel/preset-typescript'), [require$1.resolve('@babel/preset-react'), {
@@ -29,11 +30,14 @@ function sourceCode({
     plugins: [[require$1.resolve('@babel/plugin-proposal-decorators'), {
       version: '2023-01'
     }]],
-    targets,
     extensions: ['.ts', '.tsx', '.mts', '.mtsx', '.js', '.jsx', '.es6', '.es', '.mjs'],
     exclude: 'node_modules/**',
     babelHelpers: 'bundled',
-    skipPreflightCheck: true
+    skipPreflightCheck: true,
+    // Babel doesn’t like this option being set to `undefined`.
+    ...(targets ? {
+      targets
+    } : {})
   });
 }
 

package/build/cjs/features/system-js.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var promises = require('node:fs/promises');
+var fs = require('node:fs/promises');
 var node_module = require('node:module');
 
 function systemJS({
@@ -19,7 +19,7 @@ function systemJS({
       const fileHandle = this.emitFile({
         type: 'asset',
         name: 'loader.js',
-        source: (await promises.readFile(systemjs, {
+        source: (await fs.readFile(systemjs, {
           encoding: 'utf8'
         })).replace(
         // Remove the source map comment, if it is present, because we don’t upload the

package/build/esm/app.mjs

@@ -13,20 +13,33 @@ async function quiltAppBrowser({
   graphql = true
 } = {}) {
   const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
-  const minify = assets?.minify ?? true;
+  const minify = assets?.minify ?? mode === 'production';
+  const baseURL = assets?.baseURL ?? '/assets/';
   const [{
     visualizer
+  }, {
+    assetManifest
   }, {
     sourceCode
+  }, {
+    css
   }, {
     rawAssets,
     staticAssets
   }, {
     systemJS
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/source-code.mjs'), import('./features/assets.mjs'), import('./features/system-js.mjs'), getNodePlugins()]);
-  const plugins = [...nodePlugins, systemJS(), sourceCode({
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('@quilted/assets/rollup'), import('./features/source-code.mjs'), import('./features/css.mjs'), import('./features/assets.mjs'), import('./features/system-js.mjs'), getNodePlugins()]);
+  const plugins = [...nodePlugins, systemJS({
+    minify
+  }), sourceCode({
     mode
-  }), rawAssets(), staticAssets()];
+  }), css({
+    minify,
+    emit: true
+  }), rawAssets(), staticAssets({
+    baseURL,
+    emit: true
+  })];
   if (env) {
     const {
       magicModuleEnv,
@@ -68,15 +81,28 @@ async function quiltAppBrowser({
     } = await import('rollup-plugin-esbuild');
     plugins.push(minify());
   }
-  plugins.push(visualizer({
+  plugins.push(
+  // @ts-expect-error The plugin still depends on Rollup 3
+  assetManifest({
+    baseUrl: baseURL,
+    path: path.resolve(`build/manifests/assets.json`)
+  }), visualizer({
     template: 'treemap',
     open: false,
     brotliSize: true,
-    filename: path.resolve(`reports/bundle-visualizer.html`)
+    filename: path.resolve(`build/reports/bundle-visualizer.html`)
   }));
   return {
     input: entry,
     plugins,
+    onwarn(warning, defaultWarn) {
+      // Removes annoying warnings for React-focused libraries that
+      // include 'use client' directives.
+      if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && /['"]use client['"]/.test(warning.message)) {
+        return;
+      }
+      defaultWarn(warning);
+    },
     output: {
       // format: isESM ? 'esm' : 'systemjs',
       format: 'esm',
@@ -91,7 +117,7 @@ async function quiltAppBrowser({
 async function quiltAppServer({
   app,
   env,
-  graphql,
+  graphql = true,
   entry = MAGIC_MODULE_ENTRY,
   minify = false
 } = {}) {
@@ -100,14 +126,19 @@ async function quiltAppServer({
     visualizer
   }, {
     sourceCode
+  }, {
+    css
   }, {
     rawAssets,
     staticAssets
   }, {
     magicModuleRequestRouterEntry
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/source-code.mjs'), import('./features/assets.mjs'), import('./features/request-router.mjs'), getNodePlugins()]);
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/source-code.mjs'), import('./features/css.mjs'), import('./features/assets.mjs'), import('./features/request-router.mjs'), getNodePlugins()]);
   const plugins = [...nodePlugins, sourceCode({
     mode
+  }), css({
+    emit: false,
+    minify
   }), rawAssets(), staticAssets({
     emit: false
   })];
@@ -159,7 +190,7 @@ async function quiltAppServer({
     template: 'treemap',
     open: false,
     brotliSize: true,
-    filename: path.resolve(`reports/bundle-visualizer.html`)
+    filename: path.resolve(`build/reports/bundle-visualizer.html`)
   }));
   return {
     input: entry,

package/build/esm/features/css.mjs

@@ -0,0 +1,69 @@
+const CSS_REGEX = /\.css$/;
+const CSS_MODULE_REGEX = /\.module\.css$/;
+function css({
+  minify = true,
+  emit = true
+}) {
+  const styles = new Map();
+  return {
+    name: '@quilted/css',
+    async transform(code, id) {
+      if (!CSS_REGEX.test(id)) return;
+      const {
+        transform
+      } = await import('lightningcss');
+      const transformed = transform({
+        filename: id,
+        code: new TextEncoder().encode(code),
+        cssModules: CSS_MODULE_REGEX.test(id),
+        minify: emit && minify
+      });
+      styles.set(id, new TextDecoder().decode(transformed.code));
+      const exports = transformed.exports ? Object.fromEntries(Object.entries(transformed.exports).map(([key, exported]) => [key, exported.name])) : undefined;
+      return {
+        code: exports ? `export default JSON.parse(${JSON.stringify(JSON.stringify(exports))})` : `export default undefined;`,
+        map: {
+          mappings: ''
+        },
+        moduleSideEffects: 'no-treeshake'
+      };
+    },
+    async renderChunk(_, chunk) {
+      if (!emit) return null;
+      let chunkCss = '';
+      for (const id of Object.keys(chunk.modules)) {
+        if (CSS_REGEX.test(id) && styles.has(id)) {
+          chunkCss += styles.get(id);
+        }
+      }
+      if (chunkCss.length === 0) return null;
+      const code = chunkCss;
+
+      // if (minify) {
+      //   const {default: CleanCSS} = await import('clean-css');
+
+      //   const cleaner = new CleanCSS({
+      //     rebase: false,
+      //   });
+
+      //   const minified = cleaner.minify(chunkCss);
+
+      //   if (minified.errors.length > 0) {
+      //     throw minified.errors[0];
+      //   }
+
+      //   code = minified.styles;
+      // }
+
+      const fileHandle = this.emitFile({
+        type: 'asset',
+        name: `${chunk.fileName.split('.')[0]}.css`,
+        source: code
+      });
+      chunk.imports.push(this.getFileName(fileHandle));
+      return null;
+    }
+  };
+}
+
+export { css };

package/build/esm/features/source-code.mjs

@@ -7,6 +7,7 @@ function sourceCode({
   targets
 }) {
   return babel({
+    envName: mode,
     configFile: false,
     babelrc: false,
     presets: [require.resolve('@babel/preset-typescript'), [require.resolve('@babel/preset-react'), {
@@ -27,11 +28,14 @@ function sourceCode({
     plugins: [[require.resolve('@babel/plugin-proposal-decorators'), {
       version: '2023-01'
     }]],
-    targets,
     extensions: ['.ts', '.tsx', '.mts', '.mtsx', '.js', '.jsx', '.es6', '.es', '.mjs'],
     exclude: 'node_modules/**',
     babelHelpers: 'bundled',
-    skipPreflightCheck: true
+    skipPreflightCheck: true,
+    // Babel doesn’t like this option being set to `undefined`.
+    ...(targets ? {
+      targets
+    } : {})
   });
 }
 

package/build/esnext/app.esnext

@@ -13,20 +13,33 @@ async function quiltAppBrowser({
   graphql = true
 } = {}) {
   const mode = (typeof env === 'object' ? env?.mode : undefined) ?? 'production';
-  const minify = assets?.minify ?? true;
+  const minify = assets?.minify ?? mode === 'production';
+  const baseURL = assets?.baseURL ?? '/assets/';
   const [{
     visualizer
+  }, {
+    assetManifest
   }, {
     sourceCode
+  }, {
+    css
   }, {
     rawAssets,
     staticAssets
   }, {
     systemJS
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/source-code.esnext'), import('./features/assets.esnext'), import('./features/system-js.esnext'), getNodePlugins()]);
-  const plugins = [...nodePlugins, systemJS(), sourceCode({
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('@quilted/assets/rollup'), import('./features/source-code.esnext'), import('./features/css.esnext'), import('./features/assets.esnext'), import('./features/system-js.esnext'), getNodePlugins()]);
+  const plugins = [...nodePlugins, systemJS({
+    minify
+  }), sourceCode({
     mode
-  }), rawAssets(), staticAssets()];
+  }), css({
+    minify,
+    emit: true
+  }), rawAssets(), staticAssets({
+    baseURL,
+    emit: true
+  })];
   if (env) {
     const {
       magicModuleEnv,
@@ -68,15 +81,28 @@ async function quiltAppBrowser({
     } = await import('rollup-plugin-esbuild');
     plugins.push(minify());
   }
-  plugins.push(visualizer({
+  plugins.push(
+  // @ts-expect-error The plugin still depends on Rollup 3
+  assetManifest({
+    baseUrl: baseURL,
+    path: path.resolve(`build/manifests/assets.json`)
+  }), visualizer({
     template: 'treemap',
     open: false,
     brotliSize: true,
-    filename: path.resolve(`reports/bundle-visualizer.html`)
+    filename: path.resolve(`build/reports/bundle-visualizer.html`)
   }));
   return {
     input: entry,
     plugins,
+    onwarn(warning, defaultWarn) {
+      // Removes annoying warnings for React-focused libraries that
+      // include 'use client' directives.
+      if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && /['"]use client['"]/.test(warning.message)) {
+        return;
+      }
+      defaultWarn(warning);
+    },
     output: {
       // format: isESM ? 'esm' : 'systemjs',
       format: 'esm',
@@ -91,7 +117,7 @@ async function quiltAppBrowser({
 async function quiltAppServer({
   app,
   env,
-  graphql,
+  graphql = true,
   entry = MAGIC_MODULE_ENTRY,
   minify = false
 } = {}) {
@@ -100,14 +126,19 @@ async function quiltAppServer({
     visualizer
   }, {
     sourceCode
+  }, {
+    css
   }, {
     rawAssets,
     staticAssets
   }, {
     magicModuleRequestRouterEntry
-  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/source-code.esnext'), import('./features/assets.esnext'), import('./features/request-router.esnext'), getNodePlugins()]);
+  }, nodePlugins] = await Promise.all([import('rollup-plugin-visualizer'), import('./features/source-code.esnext'), import('./features/css.esnext'), import('./features/assets.esnext'), import('./features/request-router.esnext'), getNodePlugins()]);
   const plugins = [...nodePlugins, sourceCode({
     mode
+  }), css({
+    emit: false,
+    minify
   }), rawAssets(), staticAssets({
     emit: false
   })];
@@ -159,7 +190,7 @@ async function quiltAppServer({
     template: 'treemap',
     open: false,
     brotliSize: true,
-    filename: path.resolve(`reports/bundle-visualizer.html`)
+    filename: path.resolve(`build/reports/bundle-visualizer.html`)
   }));
   return {
     input: entry,

package/build/esnext/features/css.esnext

@@ -0,0 +1,69 @@
+const CSS_REGEX = /\.css$/;
+const CSS_MODULE_REGEX = /\.module\.css$/;
+function css({
+  minify = true,
+  emit = true
+}) {
+  const styles = new Map();
+  return {
+    name: '@quilted/css',
+    async transform(code, id) {
+      if (!CSS_REGEX.test(id)) return;
+      const {
+        transform
+      } = await import('lightningcss');
+      const transformed = transform({
+        filename: id,
+        code: new TextEncoder().encode(code),
+        cssModules: CSS_MODULE_REGEX.test(id),
+        minify: emit && minify
+      });
+      styles.set(id, new TextDecoder().decode(transformed.code));
+      const exports = transformed.exports ? Object.fromEntries(Object.entries(transformed.exports).map(([key, exported]) => [key, exported.name])) : undefined;
+      return {
+        code: exports ? `export default JSON.parse(${JSON.stringify(JSON.stringify(exports))})` : `export default undefined;`,
+        map: {
+          mappings: ''
+        },
+        moduleSideEffects: 'no-treeshake'
+      };
+    },
+    async renderChunk(_, chunk) {
+      if (!emit) return null;
+      let chunkCss = '';
+      for (const id of Object.keys(chunk.modules)) {
+        if (CSS_REGEX.test(id) && styles.has(id)) {
+          chunkCss += styles.get(id);
+        }
+      }
+      if (chunkCss.length === 0) return null;
+      const code = chunkCss;
+
+      // if (minify) {
+      //   const {default: CleanCSS} = await import('clean-css');
+
+      //   const cleaner = new CleanCSS({
+      //     rebase: false,
+      //   });
+
+      //   const minified = cleaner.minify(chunkCss);
+
+      //   if (minified.errors.length > 0) {
+      //     throw minified.errors[0];
+      //   }
+
+      //   code = minified.styles;
+      // }
+
+      const fileHandle = this.emitFile({
+        type: 'asset',
+        name: `${chunk.fileName.split('.')[0]}.css`,
+        source: code
+      });
+      chunk.imports.push(this.getFileName(fileHandle));
+      return null;
+    }
+  };
+}
+
+export { css };