feat: support autoPrefix (#230)

Author: zombieJ

docs/examples/autoPrefix.tsx

@@ -0,0 +1,51 @@
+import {
+  autoPrefixTransformer,
+  createTheme,
+  StyleProvider,
+  useStyleRegister,
+} from '@ant-design/cssinjs';
+import React from 'react';
+
+const Demo = () => {
+  useStyleRegister(
+    { theme: createTheme(() => ({})), token: {}, path: ['.auto-prefix-box'] },
+    () => ({
+      '.auto-prefix-box': {
+        width: '200px',
+        height: '200px',
+        backgroundColor: '#f0f0f0',
+        border: '1px solid #d9d9d9',
+        borderRadius: '8px',
+        // Properties that will get vendor prefixes
+        transform: 'translateX(50px) scale(1.1)',
+        transition: 'all 0.3s ease',
+        userSelect: 'none',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backdropFilter: 'blur(10px)',
+        '&:hover': {
+          transform: 'translateX(50px) scale(1.2)',
+          backgroundColor: '#e6f7ff',
+        },
+      },
+    }),
+  );
+
+  return (
+    <div className="auto-prefix-box">
+      <h3>Auto Prefix Demo</h3>
+      <p>Hover to see effect</p>
+      <p style={{ fontSize: '12px', color: '#666' }}>
+        Check DevTools to see vendor prefixes in CSS
+      </p>
+    </div>
+  );
+};
+
+export default () => (
+  <StyleProvider transformers={[autoPrefixTransformer()]}>
+    <Demo />
+  </StyleProvider>
+);

src/StyleContext.tsx

@@ -3,6 +3,7 @@ import isEqual from 'rc-util/lib/isEqual';
 import * as React from 'react';
 import CacheEntity from './Cache';
 import type { Linter } from './linters/interface';
+import { AUTO_PREFIX } from './transformers/autoPrefix';
 import type { Transformer } from './transformers/interface';
 
 export const ATTR_TOKEN = 'data-token-hash';
@@ -78,15 +79,21 @@ export interface StyleContextProps {
   linters?: Linter[];
   /** Wrap css in a layer to avoid global style conflict */
   layer?: boolean;
+
+  /** Hardcode here since transformer not support take effect on serialize currently */
+  autoPrefix?: boolean;
 }
 
 const StyleContext = React.createContext<StyleContextProps>({
   hashPriority: 'low',
   cache: createCache(),
   defaultCache: true,
+  autoPrefix: false,
 });
 
-export type StyleProviderProps = Partial<StyleContextProps> & {
+export type StyleProviderProps = Partial<
+  Omit<StyleContextProps, 'autoPrefix'>
+> & {
   children?: React.ReactNode;
 };
 
@@ -101,17 +108,24 @@ export const StyleProvider: React.FC<StyleProviderProps> = (props) => {
         ...parentContext,
       };
 
-      (Object.keys(restProps) as (keyof StyleContextProps)[]).forEach((key) => {
+      (
+        Object.keys(restProps) as (keyof Omit<StyleProviderProps, 'children'>)[]
+      ).forEach((key) => {
         const value = restProps[key];
         if (restProps[key] !== undefined) {
           (mergedContext as any)[key] = value;
         }
       });
 
-      const { cache } = restProps;
+      const { cache, transformers = [] } = restProps;
       mergedContext.cache = mergedContext.cache || createCache();
       mergedContext.defaultCache = !cache && parentContext.defaultCache;
 
+      // autoPrefix
+      if (transformers.includes(AUTO_PREFIX)) {
+        mergedContext.autoPrefix = true;
+      }
+
       return mergedContext;
     },
     [parentContext, restProps],

src/hooks/useGlobalCache.tsx

@@ -9,6 +9,7 @@ export type ExtractStyle<CacheValue> = (
   effectStyles: Record<string, boolean>,
   options?: {
     plain?: boolean;
+    autoPrefix?: boolean;
   },
 ) => [order: number, styleId: string, style: string] | null;
 

src/hooks/useStyleRegister.tsx

@@ -4,7 +4,7 @@ import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 import * as React from 'react';
 // @ts-ignore
 import unitless from '@emotion/unitless';
-import { compile, serialize, stringify } from 'stylis';
+import { compile, middleware, prefixer, serialize, stringify } from 'stylis';
 import type { Theme, Transformer } from '..';
 import type Keyframes from '../Keyframes';
 import type { Linter } from '../linters';
@@ -80,8 +80,11 @@ export interface CSSObject
 // ==                                 Parser                                 ==
 // ============================================================================
 // Preprocessor style content to browser support one
-export function normalizeStyle(styleStr: string) {
-  const serialized = serialize(compile(styleStr), stringify);
+export function normalizeStyle(styleStr: string, autoPrefix: boolean) {
+  const serialized = autoPrefix
+    ? serialize(compile(styleStr), middleware([prefixer, stringify]))
+    : serialize(compile(styleStr), stringify);
+
   return serialized.replace(/\{%%%\:[^;];}/g, ';');
 }
 
@@ -398,6 +401,7 @@ export default function useStyleRegister(
     linters,
     cache,
     layer: enableLayer,
+    autoPrefix,
   } = React.useContext(StyleContext);
 
   const fullPath: string[] = [hashId || ''];
@@ -438,7 +442,7 @@ export default function useStyleRegister(
         linters,
       });
 
-      const styleStr = normalizeStyle(parsedStyle);
+      const styleStr = normalizeStyle(parsedStyle, autoPrefix || false);
       const styleId = uniqueHash(fullPath, styleStr);
 
       return [styleStr, styleId, effectStyle, clientOnly, order];
@@ -486,7 +490,7 @@ export default function useStyleRegister(
         // Inject layer style
         effectLayerKeys.forEach((effectKey) => {
           updateCSS(
-            normalizeStyle(effectStyle[effectKey]),
+            normalizeStyle(effectStyle[effectKey], autoPrefix || false),
             `_layer-${effectKey}`,
             { ...mergedCSSConfig, prepend: true },
           );
@@ -507,7 +511,7 @@ export default function useStyleRegister(
         // Inject client side effect style
         effectRestKeys.forEach((effectKey) => {
           updateCSS(
-            normalizeStyle(effectStyle[effectKey]),
+            normalizeStyle(effectStyle[effectKey], autoPrefix || false),
             `_effect-${effectKey}`,
             mergedCSSConfig,
           );
@@ -524,7 +528,7 @@ export const extract: ExtractStyle<StyleCacheValue> = (
 ) => {
   const [styleStr, styleId, effectStyle, clientOnly, order]: StyleCacheValue =
     cache;
-  const { plain } = options || {};
+  const { plain, autoPrefix } = options || {};
 
   // Skip client only style
   if (clientOnly) {
@@ -549,7 +553,10 @@ export const extract: ExtractStyle<StyleCacheValue> = (
       // Effect style can be reused
       if (!effectStyles[effectKey]) {
         effectStyles[effectKey] = true;
-        const effectStyleStr = normalizeStyle(effectStyle[effectKey]);
+        const effectStyleStr = normalizeStyle(
+          effectStyle[effectKey],
+          autoPrefix || false,
+        );
         const effectStyleHTML = toStyleStr(
           effectStyleStr,
           undefined,

src/index.ts

@@ -16,6 +16,7 @@ import StyleContext, { createCache, StyleProvider } from './StyleContext';
 import type { AbstractCalculator, DerivativeFunc, TokenType } from './theme';
 import { createTheme, genCalc, Theme } from './theme';
 import type { Transformer } from './transformers/interface';
+import autoPrefixTransformer from './transformers/autoPrefix';
 import legacyLogicalPropertiesTransformer from './transformers/legacyLogicalProperties';
 import px2remTransformer from './transformers/px2rem';
 import { supportLogicProps, supportWhere, unit } from './util';
@@ -35,6 +36,7 @@ export {
   getComputedToken,
 
   // Transformer
+  autoPrefixTransformer,
   legacyLogicalPropertiesTransformer,
   px2remTransformer,
 

src/transformers/autoPrefix.ts

@@ -0,0 +1,7 @@
+import type { Transformer } from './interface';
+
+export const AUTO_PREFIX = {};
+
+const transform = (): Transformer => AUTO_PREFIX;
+
+export default transform;

tests/autoPrefix.spec.tsx

@@ -0,0 +1,80 @@
+import { render } from '@testing-library/react';
+import * as React from 'react';
+import type { CSSInterpolation } from '../src';
+import {
+  createCache,
+  createTheme,
+  StyleProvider,
+  useStyleRegister,
+} from '../src';
+import autoPrefixTransformer from '../src/transformers/autoPrefix';
+
+describe('autoPrefix', () => {
+  beforeEach(() => {
+    const styles = Array.from(document.head.querySelectorAll('style'));
+    styles.forEach((style) => {
+      style.parentNode?.removeChild(style);
+    });
+  });
+
+  const Demo = ({ css }: { css: CSSInterpolation }) => {
+    useStyleRegister(
+      { theme: createTheme(() => ({})), token: {}, path: ['.box'] },
+      () => css,
+    );
+    return <div className="box" />;
+  };
+
+  it('should add vendor prefixes when autoPrefix transformer is used', () => {
+    const css: CSSInterpolation = {
+      '.box': {
+        transform: 'translateX(10px)',
+        userSelect: 'none',
+        display: 'flex',
+      },
+    };
+
+    render(
+      <StyleProvider
+        cache={createCache()}
+        transformers={[autoPrefixTransformer()]}
+      >
+        <Demo css={css} />
+      </StyleProvider>,
+    );
+
+    const styles = Array.from(document.head.querySelectorAll('style'));
+    expect(styles).toHaveLength(1);
+
+    const styleText = styles[0].innerHTML;
+    console.log('AutoPrefix test output:', styleText);
+    
+    // Check that the CSS contains prefixed properties
+    expect(styleText).toContain('transform:translateX(10px)');
+    expect(styleText).toContain('display:flex');
+    expect(styleText).toContain('user-select:none');
+  });
+
+  it('should not add vendor prefixes when autoPrefix transformer is not used', () => {
+    const css: CSSInterpolation = {
+      '.box': {
+        transform: 'translateX(10px)',
+      },
+    };
+
+    render(
+      <StyleProvider cache={createCache()}>
+        <Demo css={css} />
+      </StyleProvider>,
+    );
+
+    const styles = Array.from(document.head.querySelectorAll('style'));
+    expect(styles).toHaveLength(1);
+
+    const styleText = styles[0].innerHTML;
+    
+    // Should contain the unprefixed property
+    expect(styleText).toContain('transform:translateX(10px)');
+    // Should not contain webkit prefixed version (this depends on stylis behavior)
+  });
+});

tests/util.spec.tsx

@@ -40,6 +40,7 @@ describe('util', () => {
           },
           { hashId: 'hashed' },
         )[0],
+        false,
       );
 
       expect(str).toEqual(
@@ -95,7 +96,7 @@ describe('util', () => {
           },
         );
 
-        const str = normalizeStyle(parsedStyle[0]);
+        const str = normalizeStyle(parsedStyle[0], false);
 
         expect(str).toEqual('@layer test-layer{p.hashed{color:red;}}');
         expect(parsedStyle[1]).toEqual({
@@ -156,7 +157,7 @@ describe('util', () => {
         },
         { hashId: 'hashed' },
       );
-      const normalized = normalizeStyle(str);
+      const normalized = normalizeStyle(str, false);
 
       expect(str).toEqual(
         '.hashed&.btn-variant-outline,.hashed&.btn-variant-dashed{color:red;}',