Musings on CSS editor extension idea

lol.md

Given the following structure:

| global.css
| lib
| -- utils.css
| ui
| -- button.css
| -- button.tsx
| -- text.css
| -- text.tsx
| -- youtube.tsx

The extension would understand that .tsx files are components. Only tokens defined in button.css or global.css are allowed/autocompleted in button.tsx.

There would also be a way to configure the extension to understand that lib/utils.css is a library of utility classes that can be used in certain contexts. Completely off-the-top-of-my-head but maybe:

// css.config.js
export default {
  libraries: [
    {
      source: "lib/**/*.css",
      context: ["lib/**/*", "ui/**/*"],
    },
    {
      source: "node_modules/@acme/video-player/**/*.css",
      context: ["ui/youtube.tsx"],
    },
  ],
};

In addition to an editor extension we'd probably want a script or eslint plugin that could handle linting in CI.