Skip to content

Instantly share code, notes, and snippets.

@chaance
Created July 5, 2023 22:39
Show Gist options
  • Save chaance/85a6b5b52606efea1737f26d5b1e6831 to your computer and use it in GitHub Desktop.
Save chaance/85a6b5b52606efea1737f26d5b1e6831 to your computer and use it in GitHub Desktop.
Musings on CSS editor extension idea

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment