[OFF-TOPIC][REQUEST] Script for building Style Settings options for a theme about obsidian-style-settings HOT 2 OPEN

This is a great idea. It could even be built into the UI of the plugin as sort of a wizard. Something like:

1. Select the CSS file you'd like to generate a config for
2. Define any class toggles
3. The plugin can the display a list of all CSS variables and allow the user to select a type, output format, write a description, etc
4. Allow the user to add headings/section and drag and drop to arrange everything

This would be a big task, but could really improve the usability of the style-settings plugin

from obsidian-style-settings.

I was actually thinking of making something similar to this before I found style-settings. Based on this css-tricks article I wrote this snippet, which might come in handy for building out this feature:

function getCSSVars() {
  const cssVarFilter = propName => propName.trim().indexOf("--") === 0;
  const sheetToDictionary = sheet => {
    let dict = {};
    for (const rule of [...sheet.cssRules]) {
      if (rule.type === 1) {
        const props = [...rule.style].filter(cssVarFilter);
        for (const propName of props) {
          const key = propName.trim()
          if (dict[key] === undefined) {
            dict[key] = [];
          }
          dict[key].push(rule.style.getPropertyValue(propName).trim())
        }
      }
    }
    return dict;
  };

  return [...document.styleSheets]
    .map(sheetToDictionary)
    .filter(dict => Object.entries(dict).length > 0)
}

Its an improved version of the code from the article, for every stylesheet it creates a map of variables and the values being set to them. Since variables can be set and then changed, I'm storing all their possible values in an array and so we'll end up with a key and all values ever assigned to that key.

The issues with this approach is its hard to identify the stylesheets. The only accurate way is to look at the content of the sheets. Though it seems like the second sheet is always obsidian's main stylesheet, the fourth is always the theme + snippets (sadly these are merged together).

Idk if this would help, I salvaged this from a trashed plugin prototype from earlier today before I found this plugin.

from obsidian-style-settings.