@compiled/vite-plugin 1.0.0

package/src/__tests__/plugin.test.ts

@@ -0,0 +1,346 @@
+import compiledVitePlugin from '../index';
+
+describe('compiledVitePlugin', () => {
+  it('should create a plugin with the correct name', () => {
+    const plugin = compiledVitePlugin();
+
+    expect(plugin.name).toBe('@compiled/vite-plugin');
+    expect(plugin.enforce).toBe('pre');
+  });
+
+  it('should transform code with Compiled imports', async () => {
+    const plugin = compiledVitePlugin();
+    const code = `
+      import { css } from '@compiled/react';
+
+      export const Component = () => (
+        <div css={css({ color: 'red', fontSize: '12px' })}>
+          Hello
+        </div>
+      );
+    `;
+
+    const result = await plugin.transform!(code, 'test.tsx');
+
+    expect(result).toBeTruthy();
+    if (result && typeof result === 'object' && 'code' in result) {
+      // Check for the atomic class structure
+      expect(result.code).toContain('_syaz5scu');
+      expect(result.code).toContain('color:red');
+      expect(result.code).toContain('font-size:9pt'); // 12px gets normalized to 9pt
+    }
+  });
+
+  it('should skip files without Compiled imports', async () => {
+    const plugin = compiledVitePlugin();
+    const code = `
+      import React from 'react';
+
+      export const Component = () => <div>Hello</div>;
+    `;
+
+    const result = await plugin.transform!(code, 'test.tsx');
+
+    expect(result).toBeNull();
+  });
+
+  it('should skip non-JS/TS files', async () => {
+    const plugin = compiledVitePlugin();
+    const code = '.some-class { color: red; }';
+
+    const result = await plugin.transform!(code, 'test.css');
+
+    expect(result).toBeNull();
+  });
+
+  it('should skip node_modules/@compiled/react', async () => {
+    const plugin = compiledVitePlugin();
+    const code = `
+      import { css } from '@compiled/react';
+      export const styled = {};
+    `;
+
+    const result = await plugin.transform!(code, '/node_modules/@compiled/react/dist/index.js');
+
+    expect(result).toBeNull();
+  });
+
+  it('should handle styled components', async () => {
+    const plugin = compiledVitePlugin();
+    const code = `
+      import { styled } from '@compiled/react';
+
+      export const StyledDiv = styled.div({
+        color: 'blue',
+        padding: '8px',
+      });
+    `;
+
+    const result = await plugin.transform!(code, 'test.tsx');
+
+    expect(result).toBeTruthy();
+    if (result && typeof result === 'object' && 'code' in result) {
+      expect(result.code).toContain('color:blue');
+      // Padding gets split into longhand properties
+      expect(result.code).toContain('padding-top:8px');
+      expect(result.code).toContain('forwardRef'); // Styled components use forwardRef
+    }
+  });
+
+  it('should respect custom importSources', async () => {
+    const plugin = compiledVitePlugin({
+      importSources: ['@custom/styled'],
+    });
+    const code = `
+      import { css } from '@custom/styled';
+
+      export const Component = () => (
+        <div css={css({ margin: '16px' })}>
+          Hello
+        </div>
+      );
+    `;
+
+    const result = await plugin.transform!(code, 'test.tsx');
+
+    expect(result).toBeTruthy();
+    if (result && typeof result === 'object' && 'code' in result) {
+      // Margin gets split into longhand properties, and 16px may be normalized to 1pc
+      expect(result.code).toContain('margin-top:');
+      expect(result.code).toContain('CC'); // Check for Compiled runtime components
+    }
+  });
+
+  it('should handle errors gracefully', async () => {
+    const plugin = compiledVitePlugin();
+    const mockError = jest.fn();
+
+    // Create a mock context with an error method
+    const context = {
+      error: mockError,
+    };
+
+    const invalidCode = `
+      import { css } from '@compiled/react';
+      
+      // Invalid syntax
+      const broken = css({
+        color
+    `;
+
+    await plugin.transform!.call(context, invalidCode, 'test.tsx');
+
+    expect(mockError).toHaveBeenCalled();
+  });
+
+  it('should apply default options', () => {
+    const plugin = compiledVitePlugin();
+
+    expect(plugin.name).toBe('@compiled/vite-plugin');
+    expect(plugin.enforce).toBe('pre');
+  });
+
+  it('should accept custom options', async () => {
+    const plugin = compiledVitePlugin({
+      bake: true,
+      extract: false,
+      ssr: false,
+      addComponentName: true,
+    });
+
+    const code = `
+      import { styled } from '@compiled/react';
+
+      export const Button = styled.button({ color: 'green' });
+    `;
+
+    const result = await plugin.transform!(code, 'test.tsx');
+
+    expect(result).toBeTruthy();
+  });
+
+  it('should handle keyframes', async () => {
+    const plugin = compiledVitePlugin();
+    const code = `
+      import { keyframes, css } from '@compiled/react';
+
+      const fadeIn = keyframes({
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+      });
+
+      export const Component = () => (
+        <div css={css({ animation: \`\${fadeIn} 0.3s ease-out\` })}>
+          Animated
+        </div>
+      );
+    `;
+
+    const result = await plugin.transform!(code, 'test.tsx');
+
+    expect(result).toBeTruthy();
+    if (result && typeof result === 'object' && 'code' in result) {
+      // Should contain keyframes reference
+      expect(result.code).toContain('keyframes');
+      expect(result.code).toContain('opacity');
+    }
+  });
+
+  it('should handle cssMap', async () => {
+    const plugin = compiledVitePlugin();
+    const code = `
+      import { cssMap } from '@compiled/react';
+
+      const styles = cssMap({
+        primary: { backgroundColor: '#0052CC', color: 'white' },
+        secondary: { backgroundColor: '#E0E0E0', color: 'black' },
+      });
+
+      export const Component = ({ variant }) => (
+        <div css={styles[variant]}>
+          Button
+        </div>
+      );
+    `;
+
+    const result = await plugin.transform!(code, 'test.tsx');
+
+    expect(result).toBeTruthy();
+    if (result && typeof result === 'object' && 'code' in result) {
+      // Should contain the color values (normalized to lowercase)
+      expect(result.code).toContain('#0052cc');
+      expect(result.code).toContain('#fff');
+    }
+  });
+
+  it('should handle ClassNames component', async () => {
+    const plugin = compiledVitePlugin();
+    const code = `
+      import { ClassNames } from '@compiled/react';
+
+      export const Component = () => (
+        <ClassNames>
+          {({ css, style }) => (
+            <div
+              style={style}
+              className={css({ fontSize: '20px', fontWeight: 'bold' })}
+            >
+              Dynamic
+            </div>
+          )}
+        </ClassNames>
+      );
+    `;
+
+    const result = await plugin.transform!(code, 'test.tsx');
+
+    expect(result).toBeTruthy();
+    if (result && typeof result === 'object' && 'code' in result) {
+      expect(result.code).toContain('font-size');
+      expect(result.code).toContain('font-weight');
+    }
+  });
+
+  it('should handle nested pseudo-selectors', async () => {
+    const plugin = compiledVitePlugin();
+    const code = `
+      import { css } from '@compiled/react';
+
+      export const Component = () => (
+        <div css={css({
+          color: 'blue',
+          ':hover': { color: 'red' },
+          ':focus': { outline: '2px solid blue' },
+        })}>
+          Interactive
+        </div>
+      );
+    `;
+
+    const result = await plugin.transform!(code, 'test.tsx');
+
+    expect(result).toBeTruthy();
+    if (result && typeof result === 'object' && 'code' in result) {
+      expect(result.code).toContain('color:blue');
+      expect(result.code).toContain(':hover');
+      expect(result.code).toContain('color:red');
+      expect(result.code).toContain(':focus');
+    }
+  });
+
+  it('should handle media queries', async () => {
+    const plugin = compiledVitePlugin();
+    const code = `
+      import { css } from '@compiled/react';
+
+      export const Component = () => (
+        <div css={css({
+          padding: '16px',
+          '@media (min-width: 768px)': {
+            padding: '32px',
+          },
+        })}>
+          Responsive
+        </div>
+      );
+    `;
+
+    const result = await plugin.transform!(code, 'test.tsx');
+
+    expect(result).toBeTruthy();
+    if (result && typeof result === 'object' && 'code' in result) {
+      expect(result.code).toContain('padding');
+      expect(result.code).toContain('@media');
+      expect(result.code).toContain('min-width');
+    }
+  });
+
+  it('should handle template literal styles', async () => {
+    const plugin = compiledVitePlugin();
+    const code = `
+      import { css } from '@compiled/react';
+
+      export const Component = () => (
+        <div css={css\`
+          color: purple;
+          font-size: 18px;
+          &:hover {
+            color: darkpurple;
+          }
+        \`}>
+          Styled
+        </div>
+      );
+    `;
+
+    const result = await plugin.transform!(code, 'test.tsx');
+
+    expect(result).toBeTruthy();
+    if (result && typeof result === 'object' && 'code' in result) {
+      expect(result.code).toContain('color:purple');
+      expect(result.code).toContain('font-size');
+    }
+  });
+
+  it('should handle styled component with template literal', async () => {
+    const plugin = compiledVitePlugin();
+    const code = `
+      import { styled } from '@compiled/react';
+
+      export const Card = styled.div\`
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      \`;
+    `;
+
+    const result = await plugin.transform!(code, 'test.tsx');
+
+    expect(result).toBeTruthy();
+    if (result && typeof result === 'object' && 'code' in result) {
+      expect(result.code).toContain('background');
+      expect(result.code).toContain('border-radius');
+      expect(result.code).toContain('box-shadow');
+    }
+  });
+});

package/src/index.ts

@@ -0,0 +1,276 @@
+import { parseAsync, transformFromAstAsync } from '@babel/core';
+import type { PluginOptions as BabelPluginOptions } from '@compiled/babel-plugin';
+import type {
+  PluginOptions as BabelStripRuntimePluginOptions,
+  BabelFileMetadata,
+} from '@compiled/babel-plugin-strip-runtime';
+import { sort } from '@compiled/css';
+import { DEFAULT_IMPORT_SOURCES, DEFAULT_PARSER_BABEL_PLUGINS, toBoolean } from '@compiled/utils';
+import type { OutputAsset, OutputBundle } from 'rollup';
+
+import type { PluginOptions } from './types';
+import { createDefaultResolver } from './utils';
+
+/**
+ * Compiled Vite plugin.
+ *
+ * Transforms CSS-in-JS to atomic CSS at build time using Babel.
+ *
+ * @param userOptions - Plugin configuration options
+ * @returns Vite plugin object
+ */
+export default function compiledVitePlugin(userOptions: PluginOptions = {}): any {
+  const options: PluginOptions = {
+    // Vite-specific
+    bake: true,
+    extract: false,
+    transformerBabelPlugins: undefined,
+    ssr: false,
+    extractStylesToDirectory: undefined,
+    sortShorthand: true,
+
+    // Babel-inherited
+    importReact: true,
+    nonce: undefined,
+    importSources: undefined,
+    optimizeCss: true,
+    resolver: undefined,
+    extensions: undefined,
+    parserBabelPlugins: undefined,
+    addComponentName: false,
+    classNameCompressionMap: undefined,
+    processXcss: undefined,
+    increaseSpecificity: undefined,
+    sortAtRules: true,
+    classHashPrefix: undefined,
+    flattenMultipleSelectors: undefined,
+
+    ...userOptions,
+  };
+
+  // Storage for collected style rules during transformation
+  const collectedStyleRules = new Set<string>();
+
+  // Store the emitted CSS filename for HTML injection
+  // This gets set in generateBundle after the file is emitted
+  let extractedCssFileName: string | undefined;
+
+  // Name used for the extracted CSS asset
+  const EXTRACTED_CSS_NAME = 'compiled-extracted.css';
+
+  return {
+    name: '@compiled/vite-plugin',
+    enforce: 'pre', // Run before other plugins
+
+    async transform(code: string, id: string): Promise<any> {
+      // Filter out node_modules (except for specific includes if needed)
+      if (id.includes('/node_modules/@compiled/react')) {
+        return null;
+      }
+
+      // Only process JS/TS/JSX/TSX files
+      if (!/\.[jt]sx?$/.test(id)) {
+        return null;
+      }
+
+      const importSources = [...DEFAULT_IMPORT_SOURCES, ...(options.importSources || [])];
+
+      // Bail early if Compiled (via an importSource) isn't in the module
+      if (!importSources.some((name) => code.includes(name))) {
+        return null;
+      }
+
+      try {
+        const includedFiles: string[] = [];
+
+        // Parse to AST using Babel
+        const ast = await parseAsync(code, {
+          filename: id,
+          babelrc: false,
+          configFile: false,
+          caller: { name: 'compiled' },
+          rootMode: 'upward-optional',
+          parserOpts: {
+            plugins: options.parserBabelPlugins ?? DEFAULT_PARSER_BABEL_PLUGINS,
+          },
+          plugins: options.transformerBabelPlugins ?? undefined,
+        });
+
+        if (!ast) {
+          return null;
+        }
+
+        // Disable stylesheet extraction in development mode
+        const isDevelopment = process.env.NODE_ENV === 'development';
+        const extract = options.extract && !isDevelopment;
+
+        // Transform using the Compiled Babel Plugin
+        const result = await transformFromAstAsync(ast, code, {
+          babelrc: false,
+          configFile: false,
+          sourceMaps: true,
+          filename: id,
+          parserOpts: {
+            plugins: options.parserBabelPlugins ?? DEFAULT_PARSER_BABEL_PLUGINS,
+          },
+          plugins: [
+            ...(options.transformerBabelPlugins ?? []),
+            options.bake && [
+              '@compiled/babel-plugin',
+              {
+                ...options,
+                // Turn off compressing class names if stylesheet extraction is off
+                classNameCompressionMap: extract && options.classNameCompressionMap,
+                onIncludedFiles: (files: string[]) => includedFiles.push(...files),
+                resolver: options.resolver ? options.resolver : createDefaultResolver(options),
+                cache: false,
+              } as BabelPluginOptions,
+            ],
+            extract && [
+              '@compiled/babel-plugin-strip-runtime',
+              {
+                compiledRequireExclude: options.ssr || extract,
+                extractStylesToDirectory: options.extractStylesToDirectory,
+              } as BabelStripRuntimePluginOptions,
+            ],
+          ].filter(toBoolean),
+          caller: {
+            name: 'compiled',
+          },
+        });
+
+        // Store metadata for CSS extraction if enabled
+        if (extract && result?.metadata) {
+          const metadata = result.metadata as BabelFileMetadata;
+          // Collect style rules from this file
+          if (metadata.styleRules && metadata.styleRules.length > 0) {
+            metadata.styleRules.forEach((rule: string) => collectedStyleRules.add(rule));
+          }
+        }
+
+        // Return transformed code and source map
+        if (result?.code) {
+          return {
+            code: result.code,
+            map: result.map ?? null,
+          };
+        }
+
+        return null;
+      } catch (e: unknown) {
+        // Throw error to be displayed by Vite
+        const error = e as Error;
+        this.error({
+          message: `[@compiled/vite-plugin] Failed to transform: ${error.message}`,
+          stack: error.stack,
+        });
+      }
+    },
+
+    generateBundle(_outputOptions: any, bundle: OutputBundle) {
+      // Post-process CSS assets to apply Compiled's sorting and deduplication
+      const isDevelopment = process.env.NODE_ENV === 'development';
+      const extract = options.extract && !isDevelopment;
+
+      // Process each CSS asset in the bundle
+      for (const [fileName, output] of Object.entries(bundle)) {
+        // Only process CSS assets
+        if (!fileName.endsWith('.css') || output.type !== 'asset') {
+          continue;
+        }
+
+        const asset = output as OutputAsset;
+        const cssContent = asset.source as string;
+
+        // Check if this CSS contains Compiled atomic classes (starts with underscore)
+        // This is a heuristic to identify CSS that came from .compiled.css files
+        if (cssContent.includes('._')) {
+          try {
+            // Apply Compiled's CSS sorting and deduplication
+            const sortConfig = {
+              sortAtRulesEnabled: options.sortAtRules,
+              sortShorthandEnabled: options.sortShorthand,
+            };
+
+            const sortedCss = sort(cssContent, sortConfig);
+
+            // Update the asset with sorted CSS
+            asset.source = sortedCss;
+          } catch (error) {
+            const err = error as Error;
+            this.warn({
+              message: `[@compiled/vite-plugin] Failed to sort CSS in ${fileName}: ${err.message}`,
+            });
+          }
+        }
+      }
+
+      // Also emit extracted styles if we collected any from local code
+      if (extract && collectedStyleRules.size > 0) {
+        try {
+          // Convert Set to array and sort for determinism
+          const allRules = Array.from(collectedStyleRules).sort();
+
+          // Join all rules and apply CSS sorting
+          const combinedCss = allRules.join('\n');
+          const sortConfig = {
+            sortAtRulesEnabled: options.sortAtRules,
+            sortShorthandEnabled: options.sortShorthand,
+          };
+
+          const sortedCss = sort(combinedCss, sortConfig);
+
+          // Emit the CSS file with content-based naming
+          // Vite will add a content hash to the filename automatically
+          this.emitFile({
+            type: 'asset',
+            name: EXTRACTED_CSS_NAME,
+            source: sortedCss,
+          });
+
+          // Mark that we've emitted the file so transformIndexHtml can inject it
+          // The actual filename will be determined in transformIndexHtml from the bundle
+          extractedCssFileName = EXTRACTED_CSS_NAME;
+        } catch (error) {
+          const err = error as Error;
+          this.warn({
+            message: `[@compiled/vite-plugin] Failed to generate CSS bundle: ${err.message}`,
+          });
+        }
+      }
+    },
+
+    transformIndexHtml(
+      _html: string,
+      ctx: { bundle?: OutputBundle; [key: string]: any }
+    ): { tag: string; attrs: Record<string, string>; injectTo: string }[] {
+      // Inject the extracted CSS file into HTML if it was emitted
+      if (!extractedCssFileName || !ctx.bundle) {
+        return [];
+      }
+
+      // Find the emitted CSS asset in the bundle by its name
+      // The actual fileName will have a content hash added by Vite
+      const cssAsset = Object.values(ctx.bundle).find(
+        (asset): asset is OutputAsset => asset.type === 'asset' && asset.name === EXTRACTED_CSS_NAME
+      );
+
+      if (!cssAsset) {
+        return [];
+      }
+
+      return [
+        {
+          tag: 'link',
+          attrs: {
+            rel: 'stylesheet',
+            href: `/${cssAsset.fileName}`,
+          },
+          injectTo: 'head',
+        },
+      ];
+    },
+  };
+}
+
+export type { PluginOptions as VitePluginOptions };

package/src/types.ts

@@ -0,0 +1,44 @@
+import type { PluginItem } from '@babel/core';
+import type { PluginOptions as BabelPluginOptions } from '@compiled/babel-plugin';
+
+/**
+ * Vite plugin options extending the babel-plugin options with Vite-specific configuration.
+ */
+export interface PluginOptions extends BabelPluginOptions {
+  /**
+   * Converts your source code into a Compiled component.
+   * Defaults to `true`.
+   */
+  bake?: boolean;
+
+  /**
+   * Extracts to CSS when `true`.
+   * Defaults to `false`.
+   */
+  extract?: boolean;
+
+  /**
+   * List of transformer babel plugins to be applied to evaluated files
+   *
+   * See the [babel docs](https://babeljs.io/docs/en/plugins/#transform-plugins)
+   */
+  transformerBabelPlugins?: PluginItem[];
+
+  /**
+   * Build in a node environment.
+   * Defaults to `false`.
+   */
+  ssr?: boolean;
+
+  /**
+   * When set, extract styles to an external CSS file.
+   */
+  extractStylesToDirectory?: { source: string; dest: string };
+
+  /**
+   * Whether to sort shorthand and longhand properties,
+   * eg. `margin` before `margin-top` for enforced determinism.
+   * Defaults to `true`.
+   */
+  sortShorthand?: boolean;
+}

package/src/utils.ts

@@ -0,0 +1,40 @@
+import * as fs from 'fs';
+import { dirname } from 'path';
+
+import type { Resolver } from '@compiled/babel-plugin';
+
+import type { PluginOptions } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const enhancedResolve = require('enhanced-resolve');
+
+// Handle both ESM and CJS imports
+const { CachedInputFileSystem, ResolverFactory } = enhancedResolve.CachedInputFileSystem
+  ? enhancedResolve
+  : enhancedResolve.default || enhancedResolve;
+
+/**
+ * Creates a default resolver using enhanced-resolve.
+ * This is the same resolver used by webpack and other bundlers,
+ * providing robust module resolution with caching.
+ *
+ * @param config - Vite plugin configuration
+ * @returns Resolver compatible with @compiled/babel-plugin
+ */
+export function createDefaultResolver(config: PluginOptions): Resolver {
+  const resolver = ResolverFactory.createResolver({
+    fileSystem: new CachedInputFileSystem(fs, 4000),
+    ...(config.extensions && {
+      extensions: config.extensions,
+    }),
+    // This makes the resolver invoke the callback synchronously
+    useSyncFileSystemCalls: true,
+  });
+
+  return {
+    // The resolver needs to be synchronous, as babel plugins must be synchronous
+    resolveSync(context: string, request: string) {
+      return resolver.resolveSync({}, dirname(context), request) as string;
+    },
+  };
+}