storybook-addon-css-properties/dist/preview.cjs.map

Edit CSS properties defined in your component to see how stories react

{"version":3,"sources":["../src/constants.ts","../src/withRoundTrip.ts","../src/preview.ts"],"names":["ADDON_ID","KEY","EVENTS","isCssProperty","key","flattenParameters","config","flattened","value","cssKey","cssValue","storyStyles","currentContext","observer","previousStoryId","previousStoryContext","withRoundTrip","storyFn","context","storyId","cleanupPreviousStoryStyles","cleanupObserver","storyResult","applyInitialValues","useChannel","styles","updatedStyles","applyStylesToStory","setupMutationObserver","setupDocsModeMutationObserver","mutations","hasRelevantChanges","mutation","node","element","cssVarsConfig","flattenedParams","initialStyles","currentStoryStyles","isDocsMode","targetSelector","elements","storyContainers","container","el","computedStyle","cssVar","style","targetElements","smartElement","findComponentInContainer","findComponentInStoryRoot","property","root","previousContext","previousStyles","elementWithCssVars","findElementUsingCssVariables","deepestElement","findDeepestMeaningfulElement","i","maxDepth","walker","hasClass","hasId","depth","parent","preview","preview_default"],"mappings":"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","file":"preview.cjs","sourcesContent":["export const ADDON_ID = \"storybook-addon-css-properties\";\r\nexport const PANEL_ID = `${ADDON_ID}/panel`;\r\nexport const KEY = `cssVars`;\r\n\r\nexport const EVENTS = {\r\n  RESULT: `${ADDON_ID}/result`,\r\n  REQUEST: `${ADDON_ID}/request`,\r\n};\r\n","import type { Renderer, DecoratorFunction } from \"storybook/internal/types\";\r\nimport { useChannel } from \"storybook/preview-api\";\r\nimport { EVENTS } from \"./constants\";\r\nimport type { Parameters, CssPropertyConfig, CssProperty } from \"./types\";\r\n\r\n// Helper function to check if a key is a CSS property (starts with --)\r\nfunction isCssProperty(key: string): key is CssProperty {\r\n  return key.startsWith('--');\r\n}\r\n\r\n// Helper function to flatten categorized parameters into a flat structure for processing\r\nfunction flattenParameters(config: Parameters): Record<string, CssPropertyConfig> {\r\n  const flattened: Record<string, CssPropertyConfig> = {};\r\n  \r\n  Object.entries(config).forEach(([key, value]) => {\r\n    if (isCssProperty(key)) {\r\n      // Direct CSS property\r\n      flattened[key] = value as CssPropertyConfig;\r\n    } else {\r\n      // Category - extract all CSS properties from it\r\n      const category = value as Record<string, CssPropertyConfig>;\r\n      Object.entries(category).forEach(([cssKey, cssValue]) => {\r\n        if (isCssProperty(cssKey)) {\r\n          flattened[cssKey] = cssValue;\r\n        }\r\n      });\r\n    }\r\n  });\r\n  \r\n  return flattened;\r\n}\r\n\r\n// Store styles per story instance\r\nlet storyStyles: Map<string, Record<string, string>> = new Map();\r\nlet currentContext: any = null;\r\nlet observer: MutationObserver | null = null;\r\nlet previousStoryId: string | null = null;\r\nlet previousStoryContext: any = null;\r\n\r\nexport const withRoundTrip: DecoratorFunction<Renderer> = (storyFn, context) => {\r\n  const storyId = context.id;\r\n  \r\n  // Clean up previous story's CSS variables if switching stories\r\n  if (previousStoryId && previousStoryId !== storyId && previousStoryContext) {\r\n    cleanupPreviousStoryStyles(previousStoryId, previousStoryContext);\r\n  }\r\n  \r\n  // Update tracking variables\r\n  previousStoryId = storyId;\r\n  previousStoryContext = currentContext; // Store the old context before updating\r\n  currentContext = context;\r\n  \r\n  // Clean up previous observer when switching stories\r\n  cleanupObserver();\r\n  \r\n  // Get the story function result\r\n  const storyResult = storyFn();\r\n  \r\n  // Only set up CSS vars if this specific story has them configured\r\n  const storyHasCssVars = context?.parameters?.cssVars && \r\n    Object.keys(context.parameters.cssVars).length > 0;\r\n  \r\n  if (storyHasCssVars) {\r\n    // Initialize styles for this story\r\n    storyStyles.set(storyId, {});\r\n    \r\n    // Apply initial values from story parameters\r\n    applyInitialValues(storyId);\r\n    \r\n    useChannel({\r\n      [EVENTS.REQUEST]: (styles: Record<string, string>) => {\r\n        // Store styles for this specific story\r\n        const currentStoryStyles = storyStyles.get(storyId) || {};\r\n        const updatedStyles = { ...currentStoryStyles, ...styles };\r\n        storyStyles.set(storyId, updatedStyles);\r\n        \r\n        // Apply styles only to this story's elements\r\n        applyStylesToStory(storyId, updatedStyles);\r\n        \r\n        // Set up observer to watch for DOM changes if not already set up\r\n        if (!observer) {\r\n          setupMutationObserver();\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  return storyResult;\r\n};\r\n\r\nfunction setupDocsModeMutationObserver() {\r\n  // For docs mode, observe the entire document for changes\r\n  const docsObserver = new MutationObserver((mutations) => {\r\n    let hasRelevantChanges = false;\r\n    \r\n    mutations.forEach((mutation) => {\r\n      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\r\n        // Check if any added nodes contain story components\r\n        for (const node of mutation.addedNodes) {\r\n          if (node.nodeType === Node.ELEMENT_NODE) {\r\n            const element = node as Element;\r\n            // Check if the added node is or contains story content\r\n            if (element.matches?.('[data-docs-story], .sb-story') || \r\n                element.querySelector?.('[data-docs-story], .sb-story')) {\r\n              hasRelevantChanges = true;\r\n              break;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    });\r\n    \r\n    if (hasRelevantChanges) {\r\n      // Reapply styles for all stories that have them\r\n      storyStyles.forEach((styles, storyId) => {\r\n        applyStylesToStory(storyId, styles);\r\n      });\r\n    }\r\n  });\r\n\r\n  docsObserver.observe(document.body, {\r\n    childList: true,\r\n    subtree: true\r\n  });\r\n}\r\n\r\nfunction applyInitialValues(storyId: string): void {\r\n  // Get CSS vars configuration from story parameters\r\n  const cssVarsConfig = currentContext?.parameters?.cssVars;\r\n  if (!cssVarsConfig) {\r\n    return;\r\n  }\r\n  \r\n  // Flatten the categorized parameters to get all CSS properties\r\n  const flattenedParams = flattenParameters(cssVarsConfig as Parameters);\r\n  \r\n  // Extract values that are explicitly set, initialize others as empty\r\n  const initialStyles: Record<string, string> = {};\r\n  Object.entries(flattenedParams).forEach(([key, config]) => {\r\n    // Initialize with explicit value or empty string\r\n    initialStyles[key] = config.value || '';\r\n  });\r\n  \r\n  // Store initial styles for this story (even if all are empty)\r\n  const currentStoryStyles = storyStyles.get(storyId) || {};\r\n  storyStyles.set(storyId, { ...currentStoryStyles, ...initialStyles });\r\n  \r\n  // Apply styles immediately to this story (this will remove properties for empty values)\r\n  applyStylesToStory(storyId, storyStyles.get(storyId)!);\r\n  \r\n  // For docs mode, also retry after delays since MDX components render asynchronously\r\n  if (currentContext?.viewMode === 'docs') {\r\n    setTimeout(() => applyStylesToStory(storyId, storyStyles.get(storyId)!), 100);\r\n    setTimeout(() => applyStylesToStory(storyId, storyStyles.get(storyId)!), 300);\r\n  }\r\n  \r\n  // Set up observers for DOM changes\r\n  if (!observer) {\r\n    setupMutationObserver();\r\n  }\r\n  if (currentContext?.viewMode === 'docs') {\r\n    setupDocsModeMutationObserver();\r\n  }\r\n}\r\n\r\nfunction applyStylesToStory(storyId: string, styles: Record<string, string>): void {\r\n  const isDocsMode = currentContext?.viewMode === 'docs';\r\n  const targetSelector = currentContext?.parameters?.cssVarsTarget;\r\n  \r\n  // Only proceed if we actually have styles configuration (even if values are empty)\r\n  if (Object.keys(styles).length === 0) {\r\n    return;\r\n  }\r\n  \r\n  let elements: HTMLElement[] = [];\r\n  \r\n  if (isDocsMode) {\r\n    // In docs mode, find story containers that match this specific story\r\n    // Look for containers that might contain this story's components\r\n    if (targetSelector) {\r\n      // User specified a custom target\r\n      const storyContainers = document.querySelectorAll(`[data-docs-story=\"${storyId}\"], [id=\"story--${storyId}\"]`);\r\n      if (storyContainers.length === 0) {\r\n        // If we can't find specific containers, be very conservative\r\n        // Only apply to elements that actually need these specific CSS variables\r\n        const allContainers = document.querySelectorAll('[data-docs-story], .sb-story');\r\n        allContainers.forEach(container => {\r\n          const targetElements = container.querySelectorAll<HTMLElement>(targetSelector);\r\n          targetElements.forEach(el => {\r\n            // Only add elements that already use the specific CSS variables we're setting\r\n            const computedStyle = window.getComputedStyle(el);\r\n            const usesOurVars = Object.keys(styles).some(cssVar => \r\n              computedStyle.getPropertyValue(cssVar) || \r\n              ['background', 'backgroundColor', 'color'].some(style => \r\n                computedStyle.getPropertyValue(style).includes(`var(${cssVar})`))\r\n            );\r\n            if (usesOurVars) {\r\n              elements.push(el);\r\n            }\r\n          });\r\n        });\r\n      } else {\r\n        storyContainers.forEach(container => {\r\n          const targetElements = container.querySelectorAll<HTMLElement>(targetSelector);\r\n          elements.push(...Array.from(targetElements));\r\n        });\r\n      }\r\n    } else {\r\n      // Use smart detection\r\n      const storyContainers = document.querySelectorAll(`[data-docs-story=\"${storyId}\"], [id=\"story--${storyId}\"]`);\r\n      if (storyContainers.length === 0) {\r\n        // If we can't find specific containers, be very conservative\r\n        // Only apply to elements that actually need these specific CSS variables\r\n        const allContainers = document.querySelectorAll('[data-docs-story], .sb-story');\r\n        allContainers.forEach(container => {\r\n          const smartElement = findComponentInContainer(container as HTMLElement);\r\n          if (smartElement) {\r\n            const computedStyle = window.getComputedStyle(smartElement);\r\n            // Only add elements that use the specific CSS variables we're setting\r\n            const usesOurVars = Object.keys(styles).some(cssVar => \r\n              computedStyle.getPropertyValue(cssVar) || \r\n              ['background', 'backgroundColor', 'color'].some(style => \r\n                computedStyle.getPropertyValue(style).includes(`var(${cssVar})`))\r\n            );\r\n            if (usesOurVars) {\r\n              elements.push(smartElement);\r\n            }\r\n          }\r\n        });\r\n      } else {\r\n        storyContainers.forEach(container => {\r\n          const smartElement = findComponentInContainer(container as HTMLElement);\r\n          if (smartElement) elements.push(smartElement);\r\n        });\r\n      }\r\n    }\r\n  } else {\r\n    // For regular story mode\r\n    if (targetSelector) {\r\n      const element = document.querySelector<HTMLElement>(`#storybook-root ${targetSelector}`);\r\n      if (element) elements = [element];\r\n    } else {\r\n      // Use smart component detection\r\n      const smartElement = findComponentInStoryRoot();\r\n      if (smartElement) elements = [smartElement];\r\n    }\r\n  }\r\n  \r\n  // Apply styles to all found elements immediately\r\n  elements.forEach(element => {\r\n    Object.entries(styles).forEach(([property, value]) => {\r\n      if (value) {\r\n        element.style.setProperty(property, value, isDocsMode ? 'important' : '');\r\n      } else {\r\n        element.style.removeProperty(property);\r\n      }\r\n    });\r\n  });\r\n}\r\n\r\nfunction setupMutationObserver() {\r\n  const root = document.getElementById('storybook-root');\r\n  if (!root) return;\r\n\r\n  observer = new MutationObserver((mutations) => {\r\n    let hasRelevantChanges = false;\r\n    \r\n    mutations.forEach((mutation) => {\r\n      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\r\n        // Check if any added nodes are elements (not just text nodes)\r\n        for (const node of mutation.addedNodes) {\r\n          if (node.nodeType === Node.ELEMENT_NODE) {\r\n            hasRelevantChanges = true;\r\n            break;\r\n          }\r\n        }\r\n      }\r\n    });\r\n    \r\n    if (hasRelevantChanges) {\r\n      // Reapply styles for all stories that have them\r\n      storyStyles.forEach((styles, storyId) => {\r\n        applyStylesToStory(storyId, styles);\r\n      });\r\n    }\r\n  });\r\n\r\n  observer.observe(root, {\r\n    childList: true,\r\n    subtree: true\r\n  });\r\n}\r\n\r\nfunction cleanupObserver() {\r\n  if (observer) {\r\n    observer.disconnect();\r\n    observer = null;\r\n  }\r\n}\r\n\r\nfunction cleanupPreviousStoryStyles(previousStoryId: string, previousContext: any) {\r\n  const previousStyles = storyStyles.get(previousStoryId);\r\n  if (!previousStyles || !previousContext) {\r\n    return;\r\n  }\r\n\r\n  const isDocsMode = previousContext?.viewMode === 'docs';\r\n  const targetSelector = previousContext?.parameters?.cssVarsTarget;\r\n  \r\n  let elements: HTMLElement[] = [];\r\n  \r\n  if (isDocsMode) {\r\n    // In docs mode, only clean up elements specific to the previous story\r\n    if (targetSelector) {\r\n      const storyContainers = document.querySelectorAll(`[data-docs-story=\"${previousStoryId}\"], [id=\"story--${previousStoryId}\"]`);\r\n      storyContainers.forEach(container => {\r\n        const targetElements = container.querySelectorAll<HTMLElement>(targetSelector);\r\n        elements.push(...Array.from(targetElements));\r\n      });\r\n    } else {\r\n      // Use smart detection for specific story containers\r\n      const storyContainers = document.querySelectorAll(`[data-docs-story=\"${previousStoryId}\"], [id=\"story--${previousStoryId}\"]`);\r\n      storyContainers.forEach(container => {\r\n        const smartElement = findComponentInContainer(container as HTMLElement);\r\n        if (smartElement) elements.push(smartElement);\r\n      });\r\n    }\r\n  } else {\r\n    // For regular story mode, clean up all elements since only one story is visible\r\n    if (targetSelector) {\r\n      const element = document.querySelector<HTMLElement>(`#storybook-root ${targetSelector}`);\r\n      if (element) elements = [element];\r\n    } else {\r\n      // Use smart component detection\r\n      const smartElement = findComponentInStoryRoot();\r\n      if (smartElement) elements = [smartElement];\r\n    }\r\n  }\r\n  \r\n  // Remove all CSS variables that were set by the previous story\r\n  elements.forEach(element => {\r\n    Object.keys(previousStyles).forEach(property => {\r\n      element.style.removeProperty(property);\r\n    });\r\n  });\r\n  \r\n  // Don't remove from storyStyles map in docs mode since multiple stories can be active\r\n  if (!isDocsMode) {\r\n    storyStyles.delete(previousStoryId);\r\n  }\r\n}\r\n\r\n// Smart component detection for regular story mode\r\nfunction findComponentInStoryRoot(): HTMLElement | null {\r\n  const root = document.getElementById('storybook-root');\r\n  if (!root) return null;\r\n\r\n  // Strategy 1: Look for elements that use CSS variables (most reliable)\r\n  const elementWithCssVars = findElementUsingCssVariables(root);\r\n  if (elementWithCssVars) return elementWithCssVars;\r\n\r\n  // Strategy 2: Find the deepest meaningful element with classes\r\n  const deepestElement = findDeepestMeaningfulElement(root);\r\n  if (deepestElement) return deepestElement;\r\n\r\n  // Strategy 3: Fallback to first child\r\n  return root.firstElementChild as HTMLElement;\r\n}\r\n\r\n// Smart component detection within a specific container (for docs mode)\r\nfunction findComponentInContainer(container: HTMLElement): HTMLElement | null {\r\n  // Strategy 1: Look for elements that use CSS variables\r\n  const elementWithCssVars = findElementUsingCssVariables(container);\r\n  if (elementWithCssVars) return elementWithCssVars;\r\n\r\n  // Strategy 2: Find the deepest meaningful element with classes\r\n  const deepestElement = findDeepestMeaningfulElement(container);\r\n  if (deepestElement) return deepestElement;\r\n\r\n  // Strategy 3: Fallback to first child\r\n  return container.firstElementChild as HTMLElement;\r\n}\r\n\r\n// Find elements that are already using CSS variables (most likely the target)\r\nfunction findElementUsingCssVariables(container: HTMLElement): HTMLElement | null {\r\n  const walker = document.createTreeWalker(\r\n    container,\r\n    NodeFilter.SHOW_ELEMENT,\r\n    {\r\n      acceptNode: (node: Element) => {\r\n        if (node === container) return NodeFilter.FILTER_SKIP;\r\n        \r\n        const element = node as HTMLElement;\r\n        const computedStyle = window.getComputedStyle(element);\r\n        \r\n        // Check if element uses any CSS custom properties\r\n        for (let i = 0; i < computedStyle.length; i++) {\r\n          const property = computedStyle[i];\r\n          if (property && property.startsWith('--')) {\r\n            return NodeFilter.FILTER_ACCEPT;\r\n          }\r\n        }\r\n        \r\n        // Also check if the element's CSS contains var() functions\r\n        const styles = ['background', 'backgroundColor', 'color', 'border', 'borderColor'];\r\n        for (const style of styles) {\r\n          const value = computedStyle.getPropertyValue(style);\r\n          if (value && value.includes('var(--')) {\r\n            return NodeFilter.FILTER_ACCEPT;\r\n          }\r\n        }\r\n        \r\n        return NodeFilter.FILTER_SKIP;\r\n      }\r\n    }\r\n  );\r\n\r\n  return walker.nextNode() as HTMLElement | null;\r\n}\r\n\r\n// Find the deepest meaningful element (elements with classes or meaningful attributes)\r\nfunction findDeepestMeaningfulElement(container: HTMLElement): HTMLElement | null {\r\n  let deepestElement: HTMLElement | null = null;\r\n  let maxDepth = 0;\r\n\r\n  const walker = document.createTreeWalker(\r\n    container,\r\n    NodeFilter.SHOW_ELEMENT,\r\n    {\r\n      acceptNode: (node: Element) => {\r\n        if (node === container) return NodeFilter.FILTER_SKIP;\r\n        \r\n        const element = node as HTMLElement;\r\n        \r\n        // Consider any element with a class name as a potential component\r\n        const hasClass = typeof element.className === 'string' && element.className.trim() !== '';\r\n        const hasId = typeof element.id === 'string' && element.id !== '';\r\n        \r\n        if (hasClass || hasId) {\r\n          // Calculate depth from container\r\n          let depth = 0;\r\n          let parent = element.parentElement;\r\n          while (parent && parent !== container) {\r\n            depth++;\r\n            parent = parent.parentElement;\r\n          }\r\n          \r\n          if (depth > maxDepth) {\r\n            maxDepth = depth;\r\n            deepestElement = element;\r\n          }\r\n          \r\n          return NodeFilter.FILTER_ACCEPT;\r\n        }\r\n        \r\n        return NodeFilter.FILTER_SKIP;\r\n      }\r\n    }\r\n  );\r\n\r\n  // Walk through all nodes to find the deepest\r\n  while (walker.nextNode()) {\r\n    // The logic is in the acceptNode function\r\n  }\r\n\r\n  return deepestElement;\r\n}\r\n","/**\r\n * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators\r\n * in order to augment stories:\r\n * - with extra rendering\r\n * - gather details about how a story is rendered\r\n *\r\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\r\n *\r\n * https://storybook.js.org/docs/react/writing-stories/decorators\r\n */\r\nimport type { ProjectAnnotations, Renderer } from \"storybook/internal/types\";\r\nimport { KEY } from \"./constants\";\r\nimport { withRoundTrip } from \"./withRoundTrip\";\r\n\r\n/**\r\n * Note: if you want to use JSX in this file, rename it to `preview.tsx`\r\n * and update the entry prop in tsup.config.ts to use \"src/preview.tsx\",\r\n */\r\n\r\nconst preview: ProjectAnnotations<Renderer> = {\r\n  decorators: [withRoundTrip],\r\n  initialGlobals: {\r\n    [KEY]: {}\r\n  },\r\n};\r\n\r\nexport default preview;\r\n"]}