feat: implement inheritance lock/unlock with CSS commenting system

Add ability to lock/unlock inheritance for element styles while preserving
custom values. Locked styles are commented in the CSS and restored when unlocked.

New utilities:
- Create css-comments.js with comment/uncomment functions
- Add parseValueWithUnit to css-parsing.js for value parsing
- Add getBlockState, commentCssBlock, uncommentCssBlock to stylesheet store

ElementPopup improvements:
- Detect inheritance state from CSS block state (active/commented/none)
- Capture computed styles from iframe when unlocking with no custom CSS
- Comment/uncomment CSS blocks instead of deleting them on lock toggle
- Use nextTick to prevent race condition with watchers during popup init
- Extract values from both active and commented CSS blocks

Workflow:
1. First unlock: Capture computed styles → create CSS block
2. Lock: Comment the CSS block (styles preserved in comments)
3. Unlock again: Uncomment the block (styles restored)

Fixes issue where CSS rules were created on popup open due to
watcher race conditions during initialization.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/utils/css-comments.js

@@ -0,0 +1,155 @@
+/**
+ * CSS Comments Utility
+ * Handles commenting/uncommenting CSS blocks for inheritance control
+ */
+
+/**
+ * Check if a CSS block is commented
+ * @param {string} css - The CSS content
+ * @param {string} selector - The CSS selector to check
+ * @returns {boolean}
+ */
+export function isBlockCommented(css, selector) {
+  const commentedBlock = extractCommentedBlock(css, selector);
+  return commentedBlock !== null;
+}
+
+/**
+ * Extract a commented CSS block for a selector
+ * @param {string} css - The CSS content
+ * @param {string} selector - The CSS selector
+ * @returns {string|null} - The commented block or null if not found
+ */
+export function extractCommentedBlock(css, selector) {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const regex = new RegExp(
+    `/\\*\\s*\\n?${escaped}\\s*\\{[^}]*\\}\\s*\\n?\\*/`,
+    'g'
+  );
+  const match = css.match(regex);
+  return match ? match[0] : null;
+}
+
+/**
+ * Comment a CSS block
+ * @param {string} css - The CSS content
+ * @param {string} blockContent - The CSS block to comment
+ * @returns {string} - CSS with the block commented
+ */
+export function commentBlock(css, blockContent) {
+  if (!blockContent || !css.includes(blockContent)) return css;
+
+  const commented = `/*\n${blockContent}\n*/`;
+  return css.replace(blockContent, commented);
+}
+
+/**
+ * Uncomment a CSS block for a selector
+ * @param {string} css - The CSS content
+ * @param {string} selector - The CSS selector
+ * @returns {string} - CSS with the block uncommented
+ */
+export function uncommentBlock(css, selector) {
+  const commentedBlock = extractCommentedBlock(css, selector);
+  if (!commentedBlock) return css;
+
+  // Remove comment delimiters /* and */
+  const uncommented = commentedBlock
+    .replace(/^\/\*\s*\n?/, '')
+    .replace(/\s*\n?\*\/$/, '');
+
+  return css.replace(commentedBlock, uncommented);
+}
+
+/**
+ * Get the state of a CSS block
+ * @param {string} css - The CSS content
+ * @param {string} selector - The CSS selector
+ * @returns {'active'|'commented'|'none'}
+ */
+export function getBlockState(css, selector) {
+  // Check for commented block
+  if (isBlockCommented(css, selector)) {
+    return 'commented';
+  }
+
+  // Check for active block
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const regex = new RegExp(`${escaped}\\s*\\{[^}]*\\}`, 'g');
+  const activeMatch = css.match(regex);
+
+  if (activeMatch && activeMatch.length > 0) {
+    return 'active';
+  }
+
+  return 'none';
+}
+
+/**
+ * Extract a value from a commented CSS block
+ * @param {string} commentedBlock - The commented CSS block
+ * @param {string} property - The CSS property to extract
+ * @returns {string|null} - The value or null if not found
+ */
+export function extractValueFromCommentedBlock(commentedBlock, property) {
+  if (!commentedBlock) return null;
+
+  // Remove comment delimiters
+  const cssContent = commentedBlock
+    .replace(/^\/\*\s*\n?/, '')
+    .replace(/\s*\n?\*\/$/, '');
+
+  // Extract property value
+  const regex = new RegExp(`${property}\\s*:\\s*([^;]+)`, 'i');
+  const match = cssContent.match(regex);
+
+  return match ? match[1].trim() : null;
+}
+
+/**
+ * Extract all commented blocks from CSS
+ * Used for preserving comments during formatting
+ * @param {string} css - The CSS content
+ * @returns {Array<{selector: string, block: string}>}
+ */
+export function extractAllCommentedBlocks(css) {
+  const blocks = [];
+  const regex = /\/\*\s*\n?([.\w\s>#:-]+)\s*\{[^}]*\}\s*\n?\*\//g;
+  let match;
+
+  while ((match = regex.exec(css)) !== null) {
+    blocks.push({
+      selector: match[1].trim(),
+      block: match[0]
+    });
+  }
+
+  return blocks;
+}
+
+/**
+ * Remove all commented blocks from CSS
+ * Used before formatting
+ * @param {string} css - The CSS content
+ * @returns {string} - CSS without commented blocks
+ */
+export function removeAllCommentedBlocks(css) {
+  return css.replace(/\/\*\s*\n?[.\w\s>#:-]+\s*\{[^}]*\}\s*\n?\*\//g, '');
+}
+
+/**
+ * Reinsert commented blocks into formatted CSS
+ * @param {string} css - The formatted CSS
+ * @param {Array<{selector: string, block: string}>} blocks - Commented blocks to reinsert
+ * @returns {string} - CSS with commented blocks reinserted
+ */
+export function reinsertCommentedBlocks(css, blocks) {
+  let result = css;
+
+  // Append commented blocks at the end
+  blocks.forEach(({ block }) => {
+    result += '\n' + block;
+  });
+
+  return result;
+}

src/utils/css-parsing.js

@@ -44,6 +44,24 @@ const updateCssValue = ({ css, selector, property, value, unit }) => {
   return css.replace(selectorRegex, `${selector} {${newBlockContent}}`);
 };
 
-const cssParsingUtils = { extractCssBlock, extractCssValue, updateCssValue };
+const parseValueWithUnit = (cssValue) => {
+  if (!cssValue) return null;
+
+  // Match number with optional unit
+  const match = cssValue.match(/([\d.]+)(px|rem|em|mm|cm|in)?/);
+  if (!match) return cssValue; // Return as-is if no match
+
+  return {
+    value: parseFloat(match[1]),
+    unit: match[2] || ''
+  };
+};
+
+const cssParsingUtils = {
+  extractCssBlock,
+  extractCssValue,
+  updateCssValue,
+  parseValueWithUnit
+};
 
 export default cssParsingUtils;