I think we all have opinions about CSS and its current set of tools. One tool that's sorely needed that doesn't exist; is the ability to refactor CSS.
The design points:
- We are talking about a real CSS editor.
- We must have intellisense to all current relevant CSS. For example, at anytime we type in something like "." or "#" or "div" all current definitions pop up, as we type the list gets filtered more and more until we either pick the one we want or we create a new one. If we pick one then we are taken to that line in that file.
- All relevant style-sheets should be included in the search due to the fact that CSS is about cascades. E.g. we have two cascading styles, with same names e.g. ".controls", then we should see all styles with that name in all relevant style sheets.
For now, that's enough to get started. But as we work on this together we will eventually be able to turn CSS into a real language, not a DSL. Our goal is ultimately to do things like refactor, combine, delete, find unused styles, but we'll talk about that later. Even though CSS will never be a real language like JavaScript, we can create editor plug-ins that treat it like one.
Looking for folks
- Who know Visual Studio Code editor internals
- JavaScript or Typescript folks who can read CSS files either from the editor or from file locations and produce filterable drop down lists.
Interested?
Top comments (9)
I've no time and knowledge about visual studio code but I've on mind what must be done to achieve your goals and i'm hands on CSS / SCSS every day, if you wanna talk about it i'm in.
Of course if you want community to help. But i think that what you want to achieve must be a package (installable using yarn and npm) instead a visual studio code plug-in, as it will be able to run on any front end project (On my company we use jetbrains IDEs for example).
Agreed, the other tooling(s) use the package.
I have not yet created an NPM package, but have read up on it. Would like to see how it works, I have however created other package types over in Microsoft world so am familiar with the concept.
Do you want to create the repo and seed it with NPM package framework? We can create issues for ourselves to resolve as the ALM there. Instead of here?
Ok it's done:
gitlab.com/Beas7/scsstools
I use gitlab instead github since a pair of years ago, hope you find it useful too
we already have a gitlab one, let's focus on one platform only and then we can copy the project to another platform if you want.
Okay I think you are saying GitLab is the place, when you say we, are you talking about Dev.to users? Or people you know? Where is the link and the project? Tx!
Sorry I edited another comment with the info, i suppose dev.to didnt notified you.
Here's the link i just created:
gitlab.com/Beas7/scsstools
Yes i mean you, me and whoever want to join us :D
Just initialized yarn package, i think same json will serve as npm one
ok, we need a way to communicate too, choose the way you like from my portfolio: joelbonetr.com