import { useStylesheetStore } from '../stores/stylesheet'; export function useCssUpdater() { const store = useStylesheetStore(); /** * Update or add a CSS property for a given selector */ const updateStyle = (selector, property, value) => { const currentBlock = store.extractBlock(selector) || createRule(selector); if (currentBlock.includes(`${property}:`)) { const updatedBlock = currentBlock.replace( new RegExp(`(${property}:\\s*)[^;]+`, 'i'), `$1${value}` ); store.content = store.content.replace(currentBlock, updatedBlock); } else { const updatedBlock = currentBlock.replace( /(\s*})$/, ` ${property}: ${value};\n$1` ); store.content = store.content.replace(currentBlock, updatedBlock); } }; /** * Remove a CSS property from a selector */ const removeProperty = (selector, property) => { const currentBlock = store.extractBlock(selector); if (!currentBlock) return; const updatedBlock = currentBlock.replace( new RegExp(`\\s*${property}:\\s*[^;]+;\\n?`, 'gi'), '' ); if (updatedBlock !== currentBlock) { store.content = store.content.replace(currentBlock, updatedBlock); } }; /** * Remove multiple CSS properties from a selector */ const removeProperties = (selector, properties) => { let currentBlock = store.extractBlock(selector); if (!currentBlock) return; let updatedBlock = currentBlock; for (const property of properties) { updatedBlock = updatedBlock.replace( new RegExp(`\\s*${property}:\\s*[^;]+;\\n?`, 'gi'), '' ); } if (updatedBlock !== currentBlock) { store.content = store.content.replace(currentBlock, updatedBlock); } }; /** * Create a new CSS rule for a selector */ const createRule = (selector) => { store.content += `\n\n${selector} {\n}\n`; return `${selector} {\n}`; }; /** * Remove detailed margin properties and set shorthand */ const setMargin = (selector, value, unit) => { removeProperties(selector, ['margin-top', 'margin-right', 'margin-bottom', 'margin-left']); updateStyle(selector, 'margin', `${value}${unit}`); }; /** * Remove shorthand margin and set detailed margins */ const setDetailedMargins = (selector, top, right, bottom, left) => { removeProperty(selector, 'margin'); updateStyle(selector, 'margin-top', `${top.value}${top.unit}`); updateStyle(selector, 'margin-right', `${right.value}${right.unit}`); updateStyle(selector, 'margin-bottom', `${bottom.value}${bottom.unit}`); updateStyle(selector, 'margin-left', `${left.value}${left.unit}`); }; /** * Remove detailed padding properties and set shorthand */ const setPadding = (selector, value, unit) => { removeProperties(selector, ['padding-top', 'padding-right', 'padding-bottom', 'padding-left']); updateStyle(selector, 'padding', `${value}${unit}`); }; /** * Remove shorthand padding and set detailed padding */ const setDetailedPadding = (selector, top, right, bottom, left) => { removeProperty(selector, 'padding'); updateStyle(selector, 'padding-top', `${top.value}${top.unit}`); updateStyle(selector, 'padding-right', `${right.value}${right.unit}`); updateStyle(selector, 'padding-bottom', `${bottom.value}${bottom.unit}`); updateStyle(selector, 'padding-left', `${left.value}${left.unit}`); }; return { updateStyle, removeProperty, removeProperties, createRule, setMargin, setDetailedMargins, setPadding, setDetailedPadding, }; }