@compiled/webpack-loader 0.6.17 → 0.7.3

package/src/__tests__/extract-plugin.test.tsx

@@ -1,65 +1,99 @@
-import { bundle } from './utils/webpack';
+import { join } from 'path';
+
+import { bundle as bundleEntry } from './test-utils';
+import type { BundleOptions } from './test-utils';
 
 describe('CompiledExtractPlugin', () => {
   const assetName = 'static/compiled-css.css';
+  const fixturesPath = join(__dirname, '..', '__fixtures__');
+
+  const bundle = (entry: string, options: Omit<BundleOptions, 'mode'> = {}) =>
+    bundleEntry(entry, {
+      ...options,
+      extract: true,
+      mode: 'production',
+    });
+
+  it('throws when the plugin is not configured', async () => {
+    const errors = await bundle(join(fixturesPath, 'local-styles.tsx'), {
+      disableExtractPlugin: true,
+    }).catch((err) => err);
 
-  it('should extract styles from a single file into a style sheet', async () => {
-    const actual = await bundle(require.resolve('./fixtures/single.js'));
+    expect(errors).toEqual([
+      expect.objectContaining({
+        message: expect.stringContaining("You forgot to add the 'CompiledExtractPlugin' plugin"),
+      }),
+    ]);
+  }, 10000);
+
+  it('extracts local styles', async () => {
+    const actual = await bundle(join(fixturesPath, 'local-styles.tsx'));
 
     expect(actual[assetName]).toMatchInlineSnapshot(`
-      "._1wyb1fwx{font-size:12px}
+      "._1wybdlk8{font-size:14px}
+      ._syaz13q2{color:blue}
       "
     `);
-  });
+  }, 10000);
 
-  it('should extract styles from multiple files into a style sheet', async () => {
-    const actual = await bundle(require.resolve('./fixtures/multiple.js'));
+  it('extracts styles imported through a relative path', async () => {
+    const actual = await bundle(join(fixturesPath, 'relative-styles.tsx'));
 
+    // This should not contain any styles from the unused relative import ./common/css-prop, which includes
+    // {color:coral} or {border:2px solid coral}
     expect(actual[assetName]).toMatchInlineSnapshot(`
       "
       ._syaz5scu{color:red}
       ._syazmu8g{color:blueviolet}
-      ._19itgh5a{border:2px solid orange}
-      ._syazruxl{color:orange}
       ._f8pjruxl:focus{color:orange}
       ._f8pj1cnh:focus{color:purple}._30l31gy6:hover{color:yellow}
       ._30l313q2:hover{color:blue}
       "
     `);
-  });
+  }, 10000);
 
-  it('should extract styles from an async chunk', async () => {
-    const actual = await bundle(require.resolve('./fixtures/async.js'));
+  it('extracts styles imported through a webpack alias', async () => {
+    const assets = await bundle(join(fixturesPath, 'webpack-alias.tsx'));
 
-    // Only generate one CSS bundle
-    expect(Object.keys(actual)).toMatchInlineSnapshot(`
-      Array [
-        "bundle.js",
-        "298.bundle.js",
-        "static/compiled-css.css",
-        "298.bundle.js.LICENSE.txt",
-      ]
+    expect(assets[assetName]).toMatchInlineSnapshot(`
+      "._syaz13q2{color:blue}
+      "
     `);
-    // Extract the styles into said bundle
-    expect(actual[assetName]).toMatchInlineSnapshot(`
-      "._19itgh5a{border:2px solid orange}
-      ._syazruxl{color:orange}
+  }, 10000);
+
+  it('extracts styles imported through an overridden resolve configuration', async () => {
+    const assets = await bundle(join(fixturesPath, 'loader-alias.tsx'), {
+      resolve: {
+        // This alias will be put into the compiled plugin options, but not the webpack resolve configuration
+        alias: {
+          'loader-alias': join(fixturesPath, 'lib', 'loader-alias.ts'),
+        },
+      },
+    });
+
+    expect(assets[assetName]).toMatchInlineSnapshot(`
+      "._syaz1if8{color:indigo}
       "
     `);
-  });
+  }, 10000);
 
-  it('should throw when plugin is not configured', async () => {
-    const error: Error = await bundle(require.resolve('./fixtures/single.js'), {
-      disablePlugins: true,
-    }).catch((err) => err);
+  it('extracts styles from an async chunk', async () => {
+    const actual = await bundle(join(fixturesPath, 'async-styles.ts'));
 
-    expect(error[0].message).toInclude(
-      `You forgot to add the 'CompiledExtractPlugin' plugin (i.e \`{ plugins: [new CompiledExtractPlugin()] }\`), please read https://compiledcssinjs.com/docs/css-extraction-webpack`
-    );
-  });
+    // Only generate one CSS bundle
+    const cssFiles = Object.keys(actual).filter((key) => key.endsWith('.css'));
+    expect(cssFiles).toHaveLength(1);
 
-  it('should extract from a pre-built babel files', async () => {
-    const actual = await bundle(require.resolve('./fixtures/babel.js'));
+    // Extract the styles into said bundle
+    expect(actual[assetName]).toMatchInlineSnapshot(`
+      "._19it1e35{border:2px solid coral}
+      ._syaz1vyr{color:coral}
+      "
+    `);
+  }, 10000);
+
+  it('extracts styles from a pre-built babel files', async () => {
+    const actual = await bundle(join(fixturesPath, 'babel.tsx'));
 
     expect(actual[assetName]).toMatchInlineSnapshot(`
       "._19pk1ul9{margin-top:30px}
@@ -72,10 +106,20 @@ describe('CompiledExtractPlugin', () => {
       ._syaz13q2{color:blue}
       "
     `);
-  });
+  }, 10000);
+
+  it('extracts important styles', async () => {
+    const actual = await bundle(join(fixturesPath, 'important-styles.tsx'));
+
+    expect(actual[assetName]).toMatchInlineSnapshot(`
+        "._syaz13q2{color:blue}
+        ._1wybc038{font-size:12!important}
+        "
+      `);
+  }, 10000);
 
   it('should find bindings', async () => {
-    const actual = await bundle(require.resolve('./fixtures/binding-not-found.tsx'));
+    const actual = await bundle(join(fixturesPath, 'binding-not-found.tsx'));
 
     expect(actual[assetName]).toMatchInlineSnapshot(`
       "._syaz1r31{color:currentColor}
@@ -103,15 +147,5 @@ describe('CompiledExtractPlugin', () => {
       ._4t3i1jdh{height:9rem}
       "
     `);
-  });
-
-  it('should extract important', async () => {
-    const actual = await bundle(require.resolve('./fixtures/important-styles.js'));
-
-    expect(actual[assetName]).toMatchInlineSnapshot(`
-      "._syaz13q2{color:blue}
-      ._1wybc038{font-size:12!important}
-      "
-    `);
-  });
+  }, 10000);
 });

package/src/__tests__/test-utils.tsx

@@ -0,0 +1,103 @@
+import { join } from 'path';
+
+import { Volume, createFsFromVolume } from 'memfs';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import webpack from 'webpack';
+
+import { CompiledExtractPlugin } from '../index';
+import type { ResolveOptions } from '../index';
+
+export interface BundleOptions {
+  extract?: boolean;
+  disableExtractPlugin?: boolean;
+  mode: 'development' | 'production';
+  resolve?: ResolveOptions;
+}
+
+export function bundle(
+  entry: string,
+  { extract = false, disableExtractPlugin = false, mode, resolve = {} }: BundleOptions
+): Promise<Record<string, string>> {
+  const outputPath = join(__dirname, 'dist');
+  const compiler = webpack({
+    entry,
+    mode,
+    module: {
+      rules: [
+        {
+          test: /\.[jt]sx?$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                babelrc: false,
+                configFile: false,
+                presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
+              },
+            },
+            {
+              loader: '@compiled/webpack-loader',
+              options: {
+                extract,
+                importReact: false,
+                resolve,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.css$/i,
+          sideEffects: true,
+          use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        },
+      ],
+    },
+    optimization: {
+      usedExports: false,
+    },
+    output: {
+      filename: '[name].js',
+      path: outputPath,
+    },
+    plugins: [
+      new MiniCssExtractPlugin({ filename: 'static/[name].css' }),
+      ...(disableExtractPlugin ? [] : [new CompiledExtractPlugin()]),
+    ],
+    resolve: {
+      alias: {
+        'webpack-alias': join(__dirname, '..', '__fixtures__', 'lib', 'webpack-alias.ts'),
+      },
+      extensions: ['.tsx', '.ts', '.jsx', '.js'],
+    },
+  });
+
+  const fs = createFsFromVolume(new Volume());
+  // @ts-ignore
+  compiler.outputFileSystem = fs;
+  // @ts-ignore
+  compiler.intermediateFileSystem = fs;
+
+  return new Promise<Record<string, string>>((resolve, reject) => {
+    compiler.run((err, stats) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+
+      if (stats?.hasErrors()) {
+        reject(stats.toJson().errors);
+        return;
+      }
+
+      const assets: Record<string, string> = {};
+
+      Object.keys(stats?.compilation.assets || {}).map((name) => {
+        const file = fs.readFileSync(join(outputPath, name), { encoding: 'utf-8' });
+        assets[name] = file as string;
+      });
+
+      resolve(assets);
+    });
+  });
+}

package/src/compiled-loader.tsx

@@ -1,49 +1,63 @@
-import path from 'path';
-import { transformFromAstAsync, parseAsync } from '@babel/core';
+import fs from 'fs';
+import { dirname, normalize } from 'path';
+
+import { parseAsync, transformFromAstAsync } from '@babel/core';
+import { createError, toBoolean } from '@compiled/utils';
+import { CachedInputFileSystem, ResolverFactory } from 'enhanced-resolve';
 import { getOptions } from 'loader-utils';
-import { toBoolean, createError } from '@compiled/utils';
-import type { CompiledLoaderOptions, LoaderThis } from './types';
+import type { LoaderContext } from 'webpack';
+
 import { pluginName } from './extract-plugin';
-import { toURIComponent } from './utils/webpack';
+import type { CompiledLoaderOptions } from './types';
+import { toURIComponent } from './utils';
 
 let hasErrored = false;
 
 /**
  * Returns user configuration.
  *
- * @param loader
+ * @param context
  * @returns
  */
-function getLoaderOptions(context: LoaderThis<CompiledLoaderOptions>) {
+function getLoaderOptions(context: LoaderContext<CompiledLoaderOptions>) {
   const {
     bake = true,
     extract = false,
     importReact = undefined,
     nonce = undefined,
-  }: CompiledLoaderOptions =
-    typeof context.getOptions === 'undefined'
-      ? // Webpack v4 flow
-        getOptions(context)
-      : // Webpack v5 flow
-        context.getOptions({
-          type: 'object',
-          properties: {
-            importReact: {
-              type: 'boolean',
-            },
-            nonce: {
-              type: 'string',
-            },
-            extract: {
-              type: 'boolean',
-            },
-            bake: {
-              type: 'boolean',
-            },
+    resolve = {},
+  }: CompiledLoaderOptions = typeof context.getOptions === 'undefined'
+    ? // Webpack v4 flow
+      getOptions(context)
+    : // Webpack v5 flow
+      context.getOptions({
+        type: 'object',
+        properties: {
+          bake: {
+            type: 'boolean',
+          },
+          extract: {
+            type: 'boolean',
+          },
+          importReact: {
+            type: 'boolean',
           },
-        });
+          nonce: {
+            type: 'string',
+          },
+          resolve: {
+            type: 'object',
+          },
+        },
+      });
 
-  return { bake, extract, importReact, nonce };
+  return {
+    bake,
+    extract,
+    importReact,
+    nonce,
+    resolve,
+  };
 }
 
 /**
@@ -53,7 +67,7 @@ function getLoaderOptions(context: LoaderThis<CompiledLoaderOptions>) {
  * @param code
  */
 export default async function compiledLoader(
-  this: LoaderThis<CompiledLoaderOptions>,
+  this: LoaderContext<CompiledLoaderOptions>,
   code: string
 ): Promise<void> {
   const callback = this.async();
@@ -66,7 +80,7 @@ export default async function compiledLoader(
   try {
     const includedFiles: string[] = [];
     const foundCSSRules: string[] = [];
-    const options = getLoaderOptions(this);
+    const { resolve, ...options } = getLoaderOptions(this);
 
     // Transform to an AST using the local babel config.
     const ast = await parseAsync(code, {
@@ -75,6 +89,18 @@ export default async function compiledLoader(
       rootMode: 'upward-optional',
     });
 
+    // Setup the default resolver, where webpack will merge any passed in options with the default
+    // resolve configuration. Ideally, we use this.getResolve({ ...resolve, useSyncFileSystemCalls: true, })
+    // However, it does not work correctly when in development mode :/
+    const resolver = ResolverFactory.createResolver({
+      // @ts-expect-error
+      fileSystem: new CachedInputFileSystem(fs, 4000),
+      ...(this._compilation?.options.resolve ?? {}),
+      ...resolve,
+      // This makes the resolver invoke the callback synchronously
+      useSyncFileSystemCalls: true,
+    });
+
     // Transform using the Compiled Babel Plugin - we deliberately turn off using the local config.
     const result = await transformFromAstAsync(ast!, code, {
       babelrc: false,
@@ -88,13 +114,22 @@ export default async function compiledLoader(
         ],
         options.bake && [
           '@compiled/babel-plugin',
-          { ...options, onIncludedFiles: (files: string[]) => includedFiles.push(...files) },
+          {
+            ...options,
+            onIncludedFiles: (files: string[]) => includedFiles.push(...files),
+            resolver: {
+              // The resolver needs to be synchronous, as babel plugins must be synchronous
+              resolveSync: (context: string, request: string) => {
+                return resolver.resolveSync({}, dirname(context), request);
+              },
+            },
+          },
         ],
       ].filter(toBoolean),
     });
 
     includedFiles.forEach((file) => {
-      this.addDependency(path.normalize(file));
+      this.addDependency(normalize(file));
     });
 
     let output: string = result?.code || '';
@@ -122,9 +157,10 @@ export default async function compiledLoader(
   }
 }
 
-export function pitch(this: LoaderThis<CompiledLoaderOptions>): void {
+export function pitch(this: LoaderContext<CompiledLoaderOptions>): void {
   const options = getLoaderOptions(this);
 
+  // @ts-expect-error No definitions for this[pluginName]
   if (!hasErrored && options.extract && !this[pluginName]) {
     this.emitError(
       createError('webpack-loader')(

package/src/css-loader.tsx

@@ -1,10 +1,11 @@
 import { URLSearchParams } from 'url';
-import type { LoaderThis } from './types';
+
+import type { LoaderContext } from 'webpack';
 
 /**
  * CSSLoader will take the style query params added by `./compiled-loader.tsx` and turn it into CSS.
  */
-export default function CSSLoader(this: LoaderThis): string {
+export default function CSSLoader(this: LoaderContext<void>): string {
   const query = new URLSearchParams(this.resourceQuery);
   const styleRule = query.get('style');
   return styleRule || '';
@@ -13,11 +14,14 @@ export default function CSSLoader(this: LoaderThis): string {
 /**
  * Moves CSSloader to the end of the loader queue so it runs first.
  */
-export function pitch(this: LoaderThis): void {
-  if (this.loaders[0].path !== __filename) {
+export function pitch(this: LoaderContext<void>): void {
+  if (this.loaders[0].pitch !== pitch) {
+    // If the first loader isn't this one - skip.
     return;
   }
 
+  // The first loader is Compiled's css-loader - we need to shift
+  // it to be at the end of the loader chain so it runs first (instead of last).
   const firstLoader = this.loaders.shift();
-  this.loaders.push(firstLoader);
+  this.loaders.push(firstLoader!);
 }

package/src/extract-plugin.tsx

@@ -1,13 +1,14 @@
 import { sort } from '@compiled/css';
-import { toBoolean, createError } from '@compiled/utils';
-import type { Compiler, Compilation } from 'webpack';
+import { createError, toBoolean } from '@compiled/utils';
+import type { Compilation, Compiler } from 'webpack';
+
 import type { CompiledExtractPluginOptions } from './types';
 import {
   getAssetSourceContents,
   getNormalModuleHook,
   getOptimizeAssetsHook,
   getSources,
-} from './utils/webpack';
+} from './utils';
 
 export const pluginName = 'CompiledExtractPlugin';
 export const styleSheetName = 'compiled-css';

package/src/index.tsx

@@ -1,2 +1,3 @@
 export { default, pitch } from './compiled-loader';
 export { CompiledExtractPlugin } from './extract-plugin';
+export type { CompiledExtractPluginOptions, CompiledLoaderOptions, ResolveOptions } from './types';

package/src/types.tsx

@@ -1,5 +1,6 @@
-import type { RuleSetCondition } from 'webpack';
-import type { pluginName } from './extract-plugin';
+import type { ResolveOptions, RuleSetCondition } from 'webpack';
+
+export type { ResolveOptions };
 
 export interface CompiledLoaderOptions {
   /**
@@ -25,67 +26,11 @@ export interface CompiledLoaderOptions {
    * read [Security](https://compiledcssinjs.com/docs/security) for more information.
    */
   nonce?: string;
-}
-
-export interface LoaderThis<TOptions = unknown> {
-  /**
-   * Query param passed to the loader.
-   *
-   * ```
-   * import '!loader-module?query=params';
-   * ```
-   */
-  resourceQuery: string;
-
-  /**
-   * Absolute path of this file.
-   */
-  resourcePath: string;
-
-  /**
-   * Returns the passed in options from a user.
-   * Optionally validated with a `schema` object.
-   */
-  getOptions?: (schema?: {
-    type: string;
-    properties: Required<
-      { [P in keyof TOptions]: { type: string } | { anyOf: Array<{ type: string }> } }
-    >;
-  }) => TOptions;
-
-  /**
-   * Notifies webpack that this loader run included another file.
-   * When the other file changes this file will be recompiled.
-   */
-  addDependency(path: string): void;
-
-  /**
-   * Marks the loader async.
-   * Call the return value when the loader has completed.
-   */
-  async(): (err: any, result?: string, map?: any) => void;
-
-  /**
-   * Internal access to the current webpack compiler.
-   */
-  _compiler: any;
-
-  /**
-   * Internal access to the loaders for this run.
-   */
-  loaders: any[];
-
-  /**
-   * Emits an error during the loader run.
-   *
-   * @param error
-   */
-  emitError(error: Error): void;
 
   /**
-   * When set confirms that the extract plugin has been configured.
+   * Override the default `resolve` passed into webpack, which is used to statically evaluate import declarations
    */
-  [pluginName]?: true;
+  resolve?: ResolveOptions;
 }
 
 export interface CompiledExtractPluginOptions {

package/src/{utils/webpack.tsx → utils.tsx}

@@ -1,4 +1,4 @@
-import type { Compiler, Compilation as CompilationType, sources } from 'webpack';
+import type { Compilation as CompilationType, Compiler, sources } from 'webpack';
 
 /**
  * Gets the normal module hook for webpack 4 & webpack 5.

package/dist/__tests__/fixtures/async.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"async.js","sourceRoot":"","sources":["../../../src/__tests__/fixtures/async.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,kDAAO,oBAAoB,IAAE"}

package/dist/__tests__/fixtures/babel.d.ts

@@ -1 +0,0 @@
-export default function Babel(): JSX.Element;

package/dist/__tests__/fixtures/babel.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const babel_cjs_1 = __importDefault(require("babel-cjs"));
-const babel_esm_1 = __importDefault(require("babel-esm"));
-function Babel() {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(babel_cjs_1.default, null),
-        React.createElement(babel_esm_1.default, null)));
-}
-exports.default = Babel;
-//# sourceMappingURL=babel.js.map

package/dist/__tests__/fixtures/babel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"babel.js","sourceRoot":"","sources":["../../../src/__tests__/fixtures/babel.js"],"names":[],"mappings":";;;;;AAAA,0DAAiC;AACjC,0DAAiC;AAEjC,SAAwB,KAAK;IAC3B,OAAO,CACL;QACE,oBAAC,mBAAQ,OAAG;QACZ,oBAAC,mBAAQ,OAAG,CACX,CACJ,CAAC;AACJ,CAAC;AAPD,wBAOC"}

package/dist/__tests__/fixtures/binding-not-found.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"binding-not-found.js","sourceRoot":"","sources":["../../../src/__tests__/fixtures/binding-not-found.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,2CAAyC;AAEzC,MAAM,MAAM,GAAG,MAAM,CAAC;AAEtB,MAAM,YAAY,GAAG,cAAM,CAAC,MAAM,CAGhC;YACU,MAAM;;;;;;;;;;;;MAYZ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,aAAa,CAAC;WAChF,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK;CAChC,CAAC;AAEW,QAAA,aAAa,GAAG,cAAM,CAAC,GAAG,CAAA;YAC3B,MAAM;CACjB,CAAC;AAOK,MAAM,MAAM,GAAG,CAAC,EAAwD,EAAe,EAAE;QAAzE,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,OAAyB,EAApB,KAAK,cAAzC,uBAA2C,CAAF;IAC9D,MAAM,KAAK,GAAG,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,2BAA2B,CAAC;IAE5F,OAAO,CACL,8BAAC,YAAY,kBAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAM,KAAK;QACrD,qCAAG,IAAI,EAAC,GAAG,EAAC,GAAG,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,eAE9D;QACH,QAAQ,CACI,CAChB,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,MAAM,UAWjB"}

package/dist/__tests__/fixtures/important-styles.d.ts

@@ -1,2 +0,0 @@
-export default Component;
-declare function Component(): JSX.Element;

package/dist/__tests__/fixtures/important-styles.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("@compiled/react");
-const Component = () => React.createElement("div", { css: { fontSize: '12!important', color: 'blue' } });
-exports.default = Component;
-//# sourceMappingURL=important-styles.js.map

package/dist/__tests__/fixtures/important-styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"important-styles.js","sourceRoot":"","sources":["../../../src/__tests__/fixtures/important-styles.js"],"names":[],"mappings":";;AAAA,2BAAyB;AAEzB,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,6BAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,CAAC;AAElF,kBAAe,SAAS,CAAC"}

package/dist/__tests__/fixtures/imports/colors.d.ts

@@ -1,6 +0,0 @@
-export const purple: "purple";
-export const blueviolet: "blueviolet";
-export const blue: "blue";
-export const red: "red";
-export const orange: "orange";
-export const yellow: "yellow";

package/dist/__tests__/fixtures/imports/colors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../../src/__tests__/fixtures/imports/colors.js"],"names":[],"mappings":";;;AAAa,QAAA,MAAM,GAAG,QAAQ,CAAC;AAClB,QAAA,UAAU,GAAG,YAAY,CAAC;AAC1B,QAAA,IAAI,GAAG,MAAM,CAAC;AACd,QAAA,GAAG,GAAG,KAAK,CAAC;AACZ,QAAA,MAAM,GAAG,QAAQ,CAAC;AAClB,QAAA,MAAM,GAAG,QAAQ,CAAC"}

package/dist/__tests__/fixtures/imports/css-prop.d.ts

@@ -1 +0,0 @@
-export function Orange(): JSX.Element;

package/dist/__tests__/fixtures/imports/css-prop.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Orange = void 0;
-require("@compiled/react");
-const colors_1 = require("./colors");
-const Orange = () => React.createElement("div", { css: { color: colors_1.orange, border: `2px solid ${colors_1.orange}` } });
-exports.Orange = Orange;
-//# sourceMappingURL=css-prop.js.map

package/dist/__tests__/fixtures/imports/css-prop.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"css-prop.js","sourceRoot":"","sources":["../../../../src/__tests__/fixtures/imports/css-prop.js"],"names":[],"mappings":";;;AAAA,2BAAyB;AACzB,qCAAkC;AAE3B,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,6BAAK,GAAG,EAAE,EAAE,KAAK,EAAE,eAAM,EAAE,MAAM,EAAE,aAAa,eAAM,EAAE,EAAE,GAAI,CAAC;AAA9E,QAAA,MAAM,UAAwE"}

package/dist/__tests__/fixtures/multiple.d.ts

@@ -1,2 +0,0 @@
-export const Blue: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react/dist/esm/styled").StyledProps>;
-export const Red: import("react").ComponentType<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & import("@compiled/react/dist/esm/styled").StyledProps>;