@antv/infographic 0.2.17 → 0.2.19

package/lib/editor/utils/root.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOverlayContainer = getOverlayContainer;
+exports.eventPathContains = eventPathContains;
+function getConnectedRoot(node) {
+    if (!(node === null || node === void 0 ? void 0 : node.isConnected))
+        return document;
+    const root = node.getRootNode();
+    return root instanceof ShadowRoot ? root : document;
+}
+function getOverlayContainer(node) {
+    const root = getConnectedRoot(node);
+    return root instanceof ShadowRoot ? root : document.body;
+}
+function eventPathContains(event, node) {
+    const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+    if (path.length > 0) {
+        return path.some((current) => current === node || (current instanceof Node && node.contains(current)));
+    }
+    const target = event.target;
+    return target instanceof Node && (target === node || node.contains(target));
+}

package/lib/exporter/svg.js

@@ -26,7 +26,10 @@ function getExportViewBox(svg) {
         return (0, utils_1.getViewBox)(svg);
     const width = parseAbsoluteLength(svg.getAttribute('width'));
     const height = parseAbsoluteLength(svg.getAttribute('height'));
-    if (width > 0 && height > 0) {
+    if (!Number.isNaN(width) &&
+        width > 0 &&
+        !Number.isNaN(height) &&
+        height > 0) {
         return { x: 0, y: 0, width, height };
     }
     const rect = svg.getBoundingClientRect();
@@ -45,38 +48,69 @@ function parseAbsoluteLength(value) {
         return Number.NaN;
     return Number.parseFloat(trimmed);
 }
-function measureSpanContentHeight(span) {
+function parseCoordinate(value) {
+    const parsed = parseAbsoluteLength(value);
+    return Number.isNaN(parsed) ? 0 : parsed;
+}
+function measureSpanContentDimensions(span, measureWidth) {
     const prevHeight = span.style.height;
+    const prevWidth = span.style.width;
     const prevOverflow = span.style.overflow;
     try {
         span.style.height = 'max-content';
         span.style.overflow = 'hidden';
         void span.offsetHeight; // force reflow
-        return span.scrollHeight;
+        const scrollHeight = span.scrollHeight;
+        const rectHeight = span.getBoundingClientRect().height;
+        let width = span.scrollWidth;
+        if (measureWidth) {
+            span.style.width = 'max-content';
+            void span.offsetWidth; // force reflow
+            width = span.scrollWidth;
+        }
+        return {
+            height: Math.max(scrollHeight, rectHeight),
+            width,
+        };
     }
     finally {
         span.style.height = prevHeight;
-        span.style.overflow = prevOverflow;
-    }
-}
-function measureSpanContentWidth(span) {
-    const prevWidth = span.style.width;
-    const prevOverflow = span.style.overflow;
-    try {
-        span.style.width = 'max-content';
-        span.style.overflow = 'hidden';
-        void span.offsetWidth; // force reflow
-        return span.scrollWidth;
-    }
-    finally {
         span.style.width = prevWidth;
         span.style.overflow = prevOverflow;
     }
 }
-// Returns [left, top, right, bottom] in SVG coordinates for a foreignObject,
+function shouldKeepForeignObjectWidth(style) {
+    const whiteSpace = style.whiteSpace;
+    const flexWrap = style.flexWrap;
+    const wordBreak = style.wordBreak;
+    const overflowWrap = style.overflowWrap;
+    return (flexWrap === 'wrap' ||
+        flexWrap === 'wrap-reverse' ||
+        whiteSpace === 'pre-wrap' ||
+        whiteSpace === 'pre-line' ||
+        whiteSpace === 'normal' ||
+        overflowWrap === 'break-word' ||
+        wordBreak === 'break-word' ||
+        wordBreak === 'break-all');
+}
+function createCoordConverter(svg, element) {
+    if (typeof element.getScreenCTM !== 'function')
+        return null;
+    const screenCTM = element.getScreenCTM();
+    if (!screenCTM)
+        return null;
+    const inverseCTM = screenCTM.inverse();
+    return (clientX, clientY) => {
+        const pt = svg.createSVGPoint();
+        pt.x = clientX;
+        pt.y = clientY;
+        return pt.matrixTransform(inverseCTM);
+    };
+}
+// Returns [left, top, right, bottom] in target coordinates for a foreignObject,
 // accounting for flex alignment: bottom/center-aligned content can overflow,
 // and horizontally aligned content can overflow as well.
-function getFOContentBoundsInSVG(fo, content, toSVGCoord) {
+function getFOContentBoundsInSVG(fo, toSVGCoord, { contentHeight, contentWidth, keepForeignObjectWidth, }) {
     const foRect = fo.getBoundingClientRect();
     const foTopLeft = toSVGCoord(foRect.left, foRect.top);
     const foBottomRight = toSVGCoord(foRect.right, foRect.bottom);
@@ -88,16 +122,15 @@ function getFOContentBoundsInSVG(fo, content, toSVGCoord) {
     const foHeightSVG = foBottomSVG - foTopSVG;
     const svgUnitsPerClientPxY = foRect.height > 0 ? foHeightSVG / foRect.height : 1;
     const svgUnitsPerClientPxX = foRect.width > 0 ? foWidthSVG / foRect.width : 1;
-    // Measure actual content dimensions
-    const realScrollHeight = measureSpanContentHeight(content);
-    const contentHeightSVG = realScrollHeight > 0
-        ? realScrollHeight * svgUnitsPerClientPxY
+    const contentHeightSVG = contentHeight > 0
+        ? contentHeight * svgUnitsPerClientPxY
         : foHeightSVG;
-    const realScrollWidth = measureSpanContentWidth(content);
-    const contentWidthSVG = realScrollWidth > 0 ? realScrollWidth * svgUnitsPerClientPxX : foWidthSVG;
-    const computedStyle = window.getComputedStyle(content);
+    const computedStyle = window.getComputedStyle(fo.firstElementChild);
     const alignItems = computedStyle.alignItems;
     const justifyContent = computedStyle.justifyContent;
+    const contentWidthSVG = keepForeignObjectWidth
+        ? foWidthSVG
+        : Math.max(foWidthSVG, contentWidth * svgUnitsPerClientPxX);
     // Calculate vertical bounds
     let top, bottom;
     if (alignItems === 'flex-end' || alignItems === 'end') {
@@ -132,38 +165,75 @@ function getFOContentBoundsInSVG(fo, content, toSVGCoord) {
     }
     return [left, top, right, bottom];
 }
-/**
- * Computes a viewBox that fully covers all foreignObject text content,
- * accounting for overflow caused by flex alignment (bottom/center align
- * can push content outside the foreignObject bounds).
- */
-function computeFullViewBox(svg) {
+function collectForeignObjectExportAdjustments(svg) {
+    const toSVGCoord = createCoordConverter(svg, svg);
+    if (!toSVGCoord)
+        return [];
+    return Array.from(svg.querySelectorAll('foreignObject')).map((fo) => {
+        const content = fo.firstElementChild;
+        if (!content)
+            return null;
+        const computedStyle = window.getComputedStyle(content);
+        const keepForeignObjectWidth = shouldKeepForeignObjectWidth(computedStyle);
+        const measuredContent = measureSpanContentDimensions(content, !keepForeignObjectWidth);
+        const parent = fo.parentElement instanceof SVGGraphicsElement ? fo.parentElement : svg;
+        const toParentCoord = createCoordConverter(svg, parent);
+        const toLocalCoord = createCoordConverter(svg, fo);
+        if (!toParentCoord)
+            return null;
+        const parentBounds = getFOContentBoundsInSVG(fo, toParentCoord, {
+            contentHeight: measuredContent.height,
+            contentWidth: measuredContent.width,
+            keepForeignObjectWidth,
+        });
+        const originalX = parseCoordinate(fo.getAttribute('x'));
+        const originalY = parseCoordinate(fo.getAttribute('y'));
+        const localBounds = toLocalCoord
+            ? getFOContentBoundsInSVG(fo, toLocalCoord, {
+                contentHeight: measuredContent.height,
+                contentWidth: measuredContent.width,
+                keepForeignObjectWidth,
+            })
+            : null;
+        const hasTransform = fo.hasAttribute('transform');
+        if (hasTransform && !localBounds)
+            return null;
+        const exportBounds = localBounds
+            ? {
+                x: originalX + localBounds[0],
+                y: originalY + localBounds[1],
+                width: localBounds[2] - localBounds[0],
+                height: localBounds[3] - localBounds[1],
+            }
+            : {
+                x: parentBounds[0],
+                y: parentBounds[1],
+                width: parentBounds[2] - parentBounds[0],
+                height: parentBounds[3] - parentBounds[1],
+            };
+        return {
+            rootBounds: getFOContentBoundsInSVG(fo, toSVGCoord, {
+                contentHeight: measuredContent.height,
+                contentWidth: measuredContent.width,
+                keepForeignObjectWidth,
+            }),
+            exportBounds,
+        };
+    });
+}
+function computeFullViewBox(svg, adjustments) {
     const viewBox = getExportViewBox(svg);
     if (!viewBox)
         return null;
-    if (typeof svg.getScreenCTM !== 'function')
-        return null;
-    const screenCTM = svg.getScreenCTM();
-    if (!screenCTM)
-        return null;
-    const inverseCTM = screenCTM.inverse();
-    const toSVGCoord = (clientX, clientY) => {
-        const pt = svg.createSVGPoint();
-        pt.x = clientX;
-        pt.y = clientY;
-        return pt.matrixTransform(inverseCTM);
-    };
     let minX = viewBox.x;
     let minY = viewBox.y;
     let maxX = viewBox.x + viewBox.width;
     let maxY = viewBox.y + viewBox.height;
-    svg
-        .querySelectorAll('foreignObject')
-        .forEach((fo) => {
-        const content = fo.firstElementChild;
-        if (!content)
+    adjustments.forEach((adjustment) => {
+        if (!adjustment)
             return;
-        const [left, top, right, bottom] = getFOContentBoundsInSVG(fo, content, toSVGCoord);
+        const { rootBounds } = adjustment;
+        const [left, top, right, bottom] = rootBounds;
         minX = Math.min(minX, left);
         minY = Math.min(minY, top);
         maxX = Math.max(maxX, right);
@@ -180,12 +250,25 @@ function computeFullViewBox(svg) {
         return null;
     return `${newX} ${newY} ${newWidth} ${newHeight}`;
 }
+function applyForeignObjectExportAdjustments(svg, adjustments) {
+    const clonedForeignObjects = Array.from(svg.querySelectorAll('foreignObject'));
+    adjustments.forEach((adjustment, index) => {
+        if (!adjustment)
+            return;
+        const clonedForeignObject = clonedForeignObjects[index];
+        if (!clonedForeignObject)
+            return;
+        (0, utils_1.setAttributes)(clonedForeignObject, adjustment.exportBounds);
+    });
+}
 function exportToSVG(svg_1) {
     return __awaiter(this, arguments, void 0, function* (svg, options = {}) {
         const { removeBackground = false, embedResources = true, removeIds = false, } = options;
         const clonedSVG = svg.cloneNode(true);
         if (typeof document !== 'undefined') {
-            const fullViewBox = computeFullViewBox(svg);
+            const adjustments = collectForeignObjectExportAdjustments(svg);
+            applyForeignObjectExportAdjustments(clonedSVG, adjustments);
+            const fullViewBox = computeFullViewBox(svg, adjustments);
             if (fullViewBox) {
                 clonedSVG.setAttribute('viewBox', fullViewBox);
             }
@@ -218,8 +301,9 @@ function embedIcons(svg) {
             const existsSymbol = svg.querySelector(href);
             if (!existsSymbol) {
                 const symbolElement = document.querySelector(href);
-                if (symbolElement)
+                if (symbolElement) {
                     defs.appendChild(symbolElement.cloneNode(true));
+                }
             }
         });
     });
@@ -427,6 +511,8 @@ function collectDefElements(svg, ids) {
     };
     while (queue.length) {
         const id = queue.shift();
+        if (!id)
+            continue;
         if (visited.has(id))
             continue;
         visited.add(id);
@@ -441,11 +527,65 @@ function collectDefElements(svg, ids) {
     }
     return collected;
 }
+// Fallback implementation based on the CSS.escape algorithm
+function cssEscape(value) {
+    const string = String(value);
+    const length = string.length;
+    let result = '';
+    if (length === 0) {
+        return '';
+    }
+    for (let i = 0; i < length; i++) {
+        const codeUnit = string.charCodeAt(i);
+        // Null character
+        if (codeUnit === 0x0000) {
+            result += '\uFFFD';
+            continue;
+        }
+        // Control characters or DEL
+        if ((codeUnit >= 0x0001 && codeUnit <= 0x001f) || codeUnit === 0x007f) {
+            result += '\\' + codeUnit.toString(16) + ' ';
+            continue;
+        }
+        // Escape if first character is a digit
+        if (i === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) {
+            result += '\\' + codeUnit.toString(16) + ' ';
+            continue;
+        }
+        // Escape if second character is a digit and first is a hyphen
+        if (i === 1 &&
+            codeUnit >= 0x0030 &&
+            codeUnit <= 0x0039 &&
+            string.charCodeAt(0) === 0x002d) {
+            result += '\\' + codeUnit.toString(16) + ' ';
+            continue;
+        }
+        // If the character is the first and is a hyphen followed by end of string, escape it
+        if (i === 0 && length === 1 && codeUnit === 0x002d) {
+            result += '\\' + string.charAt(i);
+            continue;
+        }
+        // Characters that are safe to use unescaped
+        if (codeUnit >= 0x0080 ||
+            (codeUnit >= 0x0030 && codeUnit <= 0x0039) || // 0-9
+            (codeUnit >= 0x0041 && codeUnit <= 0x005a) || // A-Z
+            (codeUnit >= 0x0061 && codeUnit <= 0x007a) || // a-z
+            codeUnit === 0x002d || // -
+            codeUnit === 0x005f // _
+        ) {
+            result += string.charAt(i);
+            continue;
+        }
+        // All other characters
+        result += '\\' + string.charAt(i);
+    }
+    return result;
+}
 function escapeCssId(id) {
     if (globalThis.CSS && typeof globalThis.CSS.escape === 'function') {
         return globalThis.CSS.escape(id);
     }
-    return id.replace(/([!"#$%&'()*+,./:;<=>?@[\]^`{|}~])/g, '\\$1');
+    return cssEscape(id);
 }
 function removeDefs(svg) {
     const defsList = Array.from(svg.querySelectorAll('defs'));

package/lib/resource/loaders/search.js

@@ -57,9 +57,6 @@ function loadSearchResource(query, format) {
                 const svgText = commaIndex >= 0 ? result.slice(commaIndex + 1) : result;
                 return (0, svg_1.loadSVGResource)(svgText);
             }
-            if (mimeType === 'image/svg+xml' && format === 'svg' && isBase64) {
-                return (0, image_1.loadImageBase64Resource)(result);
-            }
             return (0, image_1.loadImageBase64Resource)(result);
         }
         return (0, remote_1.loadRemoteResource)(result, format);

package/lib/templates/utils.js

@@ -33,11 +33,20 @@ function getLevenshteinDistance(source, target) {
 function getCommonPrefixLength(source, target) {
     const limit = Math.min(source.length, target.length);
     let index = 0;
-    while (index < limit && source[index] === target[index]) {
+    while (index < limit &&
+        source.charCodeAt(index) === target.charCodeAt(index)) {
         index += 1;
     }
     return index;
 }
+function isBetterMatch(bestMatch, bestDistance, bestPrefixLength, candidateKey, candidateDistance, candidatePrefixLength) {
+    return (candidateDistance < bestDistance ||
+        (candidateDistance === bestDistance &&
+            candidatePrefixLength > bestPrefixLength) ||
+        (candidateDistance === bestDistance &&
+            candidatePrefixLength === bestPrefixLength &&
+            (!bestMatch || candidateKey < bestMatch)));
+}
 function findClosestTemplateKey(type, keys) {
     const normalizedType = normalizeTemplateKey(type);
     if (!normalizedType)
@@ -52,11 +61,7 @@ function findClosestTemplateKey(type, keys) {
         }
         const distance = getLevenshteinDistance(normalizedType, normalizedKey);
         const prefixLength = getCommonPrefixLength(normalizedType, normalizedKey);
-        if (distance < bestDistance ||
-            (distance === bestDistance && prefixLength > bestPrefixLength) ||
-            (distance === bestDistance &&
-                prefixLength === bestPrefixLength &&
-                (!bestMatch || key < bestMatch))) {
+        if (isBetterMatch(bestMatch, bestDistance, bestPrefixLength, key, distance, prefixLength)) {
             bestMatch = key;
             bestDistance = distance;
             bestPrefixLength = prefixLength;

package/lib/utils/padding.js

@@ -31,7 +31,7 @@ function setSVGPadding(svg, padding) {
         setSVGPaddingInNode(svg, padding);
     }
     else {
-        if (document.contains(svg)) {
+        if (svg.isConnected) {
             setSVGPaddingInBrowser(svg, padding);
         }
         else {

package/lib/utils/style.d.ts

@@ -1 +1,3 @@
-export declare function injectStyleOnce(id: string, styles: string): void;
+type StyleTarget = Document | ShadowRoot | Node | null | undefined;
+export declare function injectStyleOnce(id: string, styles: string, target?: StyleTarget): void;
+export {};

package/lib/utils/style.js

@@ -1,11 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.injectStyleOnce = injectStyleOnce;
-function injectStyleOnce(id, styles) {
-    if (document.getElementById(id))
+function resolveStyleRoot(target) {
+    if (!target)
+        return document;
+    if (target instanceof Document || target instanceof ShadowRoot)
+        return target;
+    if (!target.isConnected)
+        return document;
+    const root = target.getRootNode();
+    return root instanceof ShadowRoot ? root : document;
+}
+function hasStyle(root, id) {
+    if (root instanceof Document)
+        return Boolean(root.getElementById(id));
+    return Boolean(root.querySelector(`#${id}`));
+}
+function injectStyleOnce(id, styles, target) {
+    var _a;
+    const root = resolveStyleRoot(target);
+    if (hasStyle(root, id))
         return;
-    const style = document.createElement('style');
+    const doc = root instanceof Document ? root : ((_a = root.ownerDocument) !== null && _a !== void 0 ? _a : document);
+    const style = doc.createElement('style');
     style.id = id;
     style.textContent = styles;
-    document.head.appendChild(style);
+    if (root instanceof Document) {
+        root.head.appendChild(style);
+    }
+    else {
+        root.appendChild(style);
+    }
 }

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.17";
+export declare const VERSION = "0.2.19";

package/lib/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '0.2.17';
+exports.VERSION = '0.2.19';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",

package/src/constants/service.ts

@@ -1 +1 @@
-export const ICON_SERVICE_URL = 'https://lab.weavefox.cn/api/v1/infographic/icon';
+export const ICON_SERVICE_URL = 'https://www.weavefox.cn/api/v1/infographic/icon';

package/src/designs/structures/chart-line.tsx

@@ -18,6 +18,9 @@ export interface ChartLineProps extends BaseStructureProps {
   valueFormatter?: (value: number, datum: ItemDatum) => string;
 }
 
+const ITEM_POSITION_H = 'center' as const;
+const ITEM_POSITION_V = 'normal' as const;
+
 export const ChartLine: ComponentType<ChartLineProps> = (props) => {
   const {
     Title,
@@ -55,8 +58,8 @@ export const ChartLine: ComponentType<ChartLineProps> = (props) => {
     indexes: [0],
     datum: items[0],
     data,
-    positionH: 'center',
-    positionV: 'normal',
+    positionH: ITEM_POSITION_H,
+    positionV: ITEM_POSITION_V,
   };
   const sampleBounds = getElementBounds(<Item {...itemProps} />);
   const labelWidth = sampleBounds.width;
@@ -396,7 +399,6 @@ export const ChartLine: ComponentType<ChartLineProps> = (props) => {
           </linearGradient>
           <linearGradient id={gradientAreaId} x1="0%" y1="0%" x2="100%" y2="0%">
             {areaStops}
-            <stop offset="100%" stopColor={colorPrimary} stopOpacity="0.04" />
           </linearGradient>
         </Defs>
         <Group>{gridElements}</Group>

package/src/editor/interactions/dblclick-edit-text.ts

@@ -92,7 +92,7 @@ function editText(text: TextElement, options?: EditTextOptions) {
   const entity = getTextEntity(text);
   if (!entity) return;
 
-  ensureEditorStyles();
+  ensureEditorStyles(entity);
   new InlineTextEditor(entity, options).start();
 }
 
@@ -240,7 +240,7 @@ class InlineTextEditor {
   }
 }
 
-function ensureEditorStyles() {
+function ensureEditorStyles(target?: Node) {
   injectStyleOnce(
     EDITOR_STYLE_ID,
     `
@@ -256,5 +256,6 @@ function ensureEditorStyles() {
   background-color: #b3d4fc;
 }
 `,
+    target,
   );
 }

package/src/editor/managers/interaction.ts

@@ -16,6 +16,7 @@ import type {
   SelectionChangePayload,
   SelectMode,
 } from '../types';
+import { eventPathContains } from '../utils';
 import { Extension } from '../utils';
 
 export class InteractionManager implements IInteractionManager {
@@ -129,18 +130,19 @@ export class InteractionManager implements IInteractionManager {
 
   private handleClick = (event: MouseEvent) => {
     const doc = this.editor.getDocument();
-    const target = event.target;
+    const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+    const insideInfographic =
+      eventPathContains(event, doc) ||
+      path.some(
+        (node) => node instanceof HTMLElement && isInfographicComponent(node),
+      );
 
-    if (!target) {
+    if (!event.target) {
       this.deactivate();
       return;
     }
     // 点击画布 SVG 或者标记为组件的元素
-    if (
-      doc.contains(target as Node) ||
-      isInfographicComponent(target as HTMLElement)
-    )
-      this.activate();
+    if (insideInfographic) this.activate();
     else this.deactivate();
   };
 

package/src/editor/plugins/components/button.ts

@@ -7,6 +7,7 @@ export interface IconButtonProps {
   icon: Icon;
   onClick?: () => void;
   activate?: boolean;
+  root?: Node;
 }
 
 export interface IconButtonHandle {
@@ -18,8 +19,9 @@ export const IconButton = ({
   icon,
   onClick,
   activate = false,
+  root,
 }: IconButtonProps): Button => {
-  ensureIconButtonStyle();
+  ensureIconButtonStyle(root);
 
   const button = document.createElement('button');
   button.type = 'button';
@@ -44,7 +46,7 @@ export const IconButton = ({
 const ICON_BUTTON_CLASS = 'infographic-edit-bar-icon-btn';
 const ICON_BUTTON_STYLE_ID = 'infographic-edit-bar-icon-btn-style';
 
-function ensureIconButtonStyle() {
+function ensureIconButtonStyle(target?: Node) {
   injectStyleOnce(
     ICON_BUTTON_STYLE_ID,
     `
@@ -73,5 +75,6 @@ function ensureIconButtonStyle() {
   background-color: #d9d9d9;
 }
 `,
+    target,
   );
 }

package/src/editor/plugins/components/color-picker.ts

@@ -6,6 +6,7 @@ export type ColorPickerProps = {
   value?: string;
   swatches?: string[];
   onChange?: (value: string) => void;
+  root?: Node;
 };
 
 export type ColorPickerHandle = {
@@ -66,7 +67,7 @@ export function ColorPicker(
     throw new Error('ColorPicker can only be used in the browser.');
   }
 
-  ensureColorPickerStyles();
+  ensureColorPickerStyles(props.root);
 
   const container = document.createElement('div');
   container.classList.add(COLOR_PICKER_CLASS);
@@ -279,7 +280,7 @@ function createSwitchLabel(text: string): HTMLSpanElement {
   return span;
 }
 
-function ensureColorPickerStyles() {
+function ensureColorPickerStyles(target?: Node) {
   injectStyleOnce(
     COLOR_PICKER_STYLE_ID,
     `
@@ -393,5 +394,6 @@ function ensureColorPickerStyles() {
   color: #ffffff;
 }
 `,
+    target,
   );
 }