VSCode Extension

[marcomuser]

One thing that I'm excited about is the theming system that Web Awesome comes with and uses across it's components. There is a beautiful token system specified as custom properties which on the one hand allow the customization and branding of the components but and on the other also streamline and harmonize the whole website being built.

Having said this, I feel like the DX of using the tokens could be improved by offering intellisense autocompletion support in text editors like VSCode. When I apply a custom property in a css or jsx file, I always have to look up which tokens are available.

I've been experimenting a bit with how this could be improved. A VSCode extension could parse the default.css theme file and extract all custom properties into a Map/Set. Then when the user types var(-- in a css, html, jsx, tsx, vue or svelte file the extension would offer autocompletion with all parsed custom properties. The same could be done for the utility classes when the user types class= or className= in a html, jsx... file.

I've been trying out how simple it is to extract custom properties and utility classes from the default.css and webawesome.css files and it seems to be pretty straightforward when using lightningcss (https://lightningcss.dev/). I'm basically first bundling the css files and then extract the properties I'm interested in with a custom transform. Theoretically, those two files and their imports could be bundled with the extension to make the setup easier.

I'm just having some fun with this thought experiment right now but would be keen to see how others see this topic? :)

[KonnorRogers]

Pretty much my exact thoughts. Make an LSP -> Search workspace for webawesome in node_modules -> if not there, cache a copy of webawesome's CSS files from the remote files -> use lightningcss to parse and then pass the tokens and classes along to the LSP. i think it should be possible to forward it the CSS language server. Definitely some research to do for writing the LSP.

[marcomuser]

Fetching it from the CDN as fallback is even better! The LSP part is probably the most interesting/challenging part. I'm not sure if one can simply forward it to the CSS language server to make it work across templating languages or if there is some sort of special handling necessary to trigger autocompletion in different contexts. The parsing and extraction of custom properties and utility classes, on the other hand, is pretty simple. For future reference, this is my "throwaway code" to try out lightningcss:

import { bundle, transform } from "lightningcss";

const customProperties = new Set<string>();

const { code: theme } = bundle({
  filename: "src/cached/default.css",
});

transform({
  filename: "default.css",
  code: theme,
  visitor: {
    DashedIdent(ident) {
      if (ident.startsWith("--wa-")) {
        customProperties.add(ident);
      }
    },
  },
});

const utilityClasses = new Set<string>();

const { code: utilities } = bundle({
  filename: "src/cached/webawesome.css",
});

transform({
  filename: "webawesome.css",
  code: utilities,
  visitor: {
    Selector(selector) {
      for (const s of selector) {
        if (s.type === "class" && s.name.startsWith("wa-")) {
          utilityClasses.add(s.name);
        } else if (
          s.type === "attribute" &&
          s.name === "class" &&
          s.operation?.value.startsWith("wa-")
        ) {
          utilityClasses.add(s.operation.value);
        }
      }
    },
  },
});

console.log(customProperties, utilityClasses);