Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat] Accept JSON file to inject unknown or runtime CSS variables that cannot be parsed using CSS source files #92

Open
phoenisx opened this issue Nov 1, 2022 · 2 comments
Assignees
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@phoenisx
Copy link
Contributor

phoenisx commented Nov 1, 2022

Something like the following should provide a good way to inject CSS variables into the extension cache, to populate variables that extension is unable to figure out statically (for e.g CSS variables that are generated dynamically during runtime).

// dyn-css-variables.json
{
  "--variable-name": "variable value"
}

Users can then pass this file into cssvar.files source files list:

{
  "cssvar.files": ["**/*.css", "dyn-css-variables.json"]
}
@Anoesj
Copy link

Anoesj commented Sep 2, 2023

I would like to propose a few changes/ideas.

Firstly, I would like the option of using a JS/CJS/MJS file too, so you're able to do some scripting. This way, it's easier to dynamically create variable names and values. Let's say you have lots of color variables and you also want to create variables for their HSL values. It would be a tedious task to write them all down manually (even though this could be automated in user land, more on this below).

Secondly, I feel like it'd be nicer to not (only) define variables and their values, but also their original definition location, so when clicking through on a CSS variable, one would go to the original definition, instead of the JSON file. Sometimes, it would even be hard and extra work to get the actual value of the CSS variable. I suggest using something like this format instead, where path and value are nullable or omissable:

{
  "--color-red": {
    "path": "/path/to/file:66:3",
    "value": "#f00"
  } 
} 

Custom JSON regeneration logic

One might want to automate the creation of this config JSON file by watching files, reading, parsing or regexing them, and then recreating the JSON file dynamically. It'd be nice to document some ways to do this. I assume the config file will be watched and reloaded on change?

A benefit of dynamically creating the config file is that this creates a way to read your own CSS/SCSS/Sass/Less/etc files and scan for specific patterns to get the location and/or values of CSS variables. For example, I sometimes use a mixin to create multiple CSS variables at once: see #109.

@phoenisx
Copy link
Contributor Author

phoenisx commented Sep 3, 2023

Having manually managed configs can quickly become an overhead, especially when the source and script(or JSON data) are approx. duplicates.

Having a JS script is a good idea, but its maintenance can be tiring (unless it's auto-generated)(the same applies to a JSON file as well), but I can also not think of any other (less complex, easy to manage) solution for this issue.

Anyway, appreciate your inputs. I will look into this in the future, as I am occupied with a lot of other stuff these days 👍🏽 (Unless you have time to work on this 😉)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants