geoproject-app/src/stores/stylesheet.js

import { defineStore } from 'pinia';
import { ref, watch } from 'vue';
import cssParsingUtils from '../utils/css-parsing';
import prettier from 'prettier/standalone';
import parserPostcss from 'prettier/plugins/postcss';

export const useStylesheetStore = defineStore('stylesheet', () => {
  const content = ref('');
  const isEditing = ref(false);
  let formatTimer = null;
  let isFormatting = false;

  // Format CSS with Prettier
  const formatContent = async () => {
    if (isFormatting || !content.value) return;

    try {
      isFormatting = true;
      const formatted = await prettier.format(content.value, {
        parser: 'css',
        plugins: [parserPostcss],
        printWidth: 80,
        tabWidth: 2,
        useTabs: false,
      });
      content.value = formatted;
    } catch (error) {
      console.error('CSS formatting error:', error);
    } finally {
      isFormatting = false;
    }
  };

  // Watch content and format after 500ms of inactivity (only when not editing)
  watch(content, () => {
    if (isFormatting || isEditing.value) return;

    clearTimeout(formatTimer);
    formatTimer = setTimeout(() => {
      formatContent();
    }, 500);
  });

  const loadStylesheet = async () => {
    const response = await fetch('/assets/css/stylesheet.css');
    content.value = await response.text();
  };

  const updateProperty = (selector, property, value, unit) => {
    content.value = cssParsingUtils.updateCssValue({
      css: content.value,
      selector,
      property,
      value,
      unit
    });
  };

  const extractValue = (selector, property) => {
    return cssParsingUtils.extractCssValue(content.value, selector, property);
  };

  const extractBlock = (selector) => {
    return cssParsingUtils.extractCssBlock(content.value, selector);
  };

  return {
    content,
    isEditing,
    loadStylesheet,
    updateProperty,
    extractValue,
    extractBlock,
    formatContent
  };
});