geoproject-app/src/stores/stylesheet.js

import { defineStore } from 'pinia';
import { ref } from 'vue';
import cssParsingUtils from '../utils/css-parsing';

export const useStylesheetStore = defineStore('stylesheet', () => {
  const content = ref('');

  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,
    loadStylesheet,
    updateProperty,
    extractValue,
    extractBlock
  };
});