gencer / SCSS-Everywhere

A Visual Studio Code extension that provides CSS class and ID atttribute completion with incremental build and usage explorer for the HTML class attribute based on the CSS/Template files in your workspace. Also supports React's className attribute.
https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion
MIT License
24 stars 9 forks source link

Latte & Used locations support? #9

Closed Kcko closed 5 years ago

Kcko commented 5 years ago

Could you please add support for Latte template system? Its similar to html or twig). My config "html-css-class-completion.includeGlobPattern": "*/.{css,scss,sass,latte,html}", but not working :(

gencer commented 5 years ago

This is the first time I heard of Latte. I will try to implement basic support as soon as possible.

I've looked over few samples and its indeed like html/twig. It shouldn't be hard to implement.

I'm on it on this weekend.

Kcko commented 5 years ago

Its a primary template system for NETTE framework (https://latte.nette.org/en/) which wins 3 best PHP framework in the world for year 2015.

Really nothing hard, it has same structure like a HTML langguage with own macros (https://latte.nette.org/en/macros).

Thx for good job & thx for fast reply.

Kcko commented 5 years ago

For future, is there real chance to do autocompletion for SCSS? (autosuggestioning vars, functions, mixins etc?)

Your plugin is solving what Im still missing in VSC (II've already reported it several times, without change/chance).

gencer commented 5 years ago

Currently SCSS autocompletes classes from CSS, SCSS, HTML and Slim files.

For vars, functions and mixins. Yes, This is possible and In fact I also need them too! But I will first add latte support.

Kcko commented 5 years ago

Great news! I'll look forward to it.

What is still basically missing in vsc is suggesting between 2 environments.

HTML -> CSS (SCSS, LESS ...) and vice versa CSS (SCSS, LESS ...) -> HTML

this probably works (plugin to provide it).

main.scss { .test {color: red; } } // when im here, i will see .test2 selector from other css/scss file rest.scss {.test2 {color: blue;} } / and vice versa

some-file.html ( plugin to provide it)

still we will see .test or test2

BUT

in scss & css file i never see classes or identifikators from (html / latte ...) REALLY MISS THIS FEATURE

would it be possible?

Thx for reply and Im looking forward for latte extension :-)

gencer commented 5 years ago

would it be possible?

Yes. It is possible. I will be working on it at this weekend. (Tomorrow and other day) If nothing goes wrong.

gencer commented 5 years ago

This feature has been added to master branch. I will provide an early beta extension for tests. Keep your eyes on here.

gencer commented 5 years ago

gif

Extension released. Please update your vscode extensions.

Kcko commented 5 years ago

Hi, thx a lot for latte support! Works great!

Suggesting between html(latte) and css (scss) works fairly well (with some delay when i add new class or id - is it a correct behavior? How long is the delay set?). It also show only classes (but no identificators "#"), could you add it?

Is possible via some settings turn on extended info about occurences what i´m looking for and what did plugin find? Like here? https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion It's better for an idea of what a class or identifier is, it will be very helfpul.

Thx for answer :-)

gencer commented 5 years ago

Yes, I can add id attributes. But let me ask this. When I look your link, I see that css autocompletion shows HTML files locations, where they are located at.

Do you want them? Or you want:

html:
<div id="here-is-an-id"></div>

scss/css:
#here-is... # autocomplete here.
gencer commented 5 years ago

Oh, I see, even i've added this feature already something is keeping this feature stopped. I will look into this now.

Kcko commented 5 years ago

Do you want them? Or you want:

But its the same or not?

Yes, this is exactly what i want. (screen when i used previous plugin)

And in html / latte (when I searching class or id from some CSS or SCSS file) - it would be nice to show file where it was found.

MIXED SCENARIO

When i create new id or class in HTML / LATTE and go to CSS / SCSS ur plugin will find it - COOL, but how do I know if this is a class from CSS or HTML?

When we solved these things , plugin will be best on the MARKET and i will propage on Twitter and to our firm / colleagues :-)

gencer commented 5 years ago

Well, I was thinking this last week. I was thinking like Go To Definition feature. Sometimes, I also get lost due to this.

I will do my best to bring this to our extension.

I also think one more thing. I would like to separate id and class icons in autocomplete lists.

Kcko commented 5 years ago

I also think one more thing. I would like to separate id and class icons in autocomplete lists.

Via some icon or with 2 separated lists?

When you parse files you probably know file / line where where the occurrence is located (when this information add to popup window which is shown after suggestion it will be timeless! :-)

gencer commented 5 years ago

I've implemented basic support for this. As you can see ID and Class has different icons. I will also separate them. When you press dot, you only see classes, when typing hash, you will see IDs.

image

This is how will it look like. A basic proposal.

Kcko commented 5 years ago

Good idea.

it could look like this: 1) When i write some className or identifikator i will see everything in one list (it will be different by icon or some muted postfix/prefix (class) this-is-class or (id) this-is-id. 2) When i specify selection with "." or "#" i get classname or id

And will you work previous point (extended info where class or id is located -> file/line or something like that (its really important, because when you have a big project with many scss files - own & vendor, you have a headache ;-) , and name of file will help you to recognize it)

Have a nice rest of the weekend

gencer commented 5 years ago

image

We're getting there...

Kcko commented 5 years ago

Looks fantastic!

gencer commented 5 years ago

@Kcko, have you tried what I say on other issue? Still same?

gencer commented 5 years ago

Better naming:

image

Kcko commented 5 years ago

@Kcko, have you tried what I say on other issue? Still same?

Yes, you have an answer, look on video and my description, thx.

gencer commented 5 years ago

@Kcko please try this for "usages"

v1.5.1-beta: https://github.com/gencer/HTML-Slim-CSS-SCSS-Class-Completion/releases/tag/v1.5.1-beta

Note: This is still BETA. Need lot of work but it should give you the idea. Note 2: Find usages only works in css/scss. So, in css/scss you should see your latte files.

gencer commented 5 years ago

There is a bug. When you create a new class in latte, usages are not listed. I've already fixed and will be available in next build.

gencer commented 5 years ago

Here is the fixed one: https://github.com/gencer/HTML-Slim-CSS-SCSS-Class-Completion/releases/tag/v1.5.2-beta

Kcko commented 5 years ago

I will try tomorrow, VSC offers 1.3.x version

gencer commented 5 years ago

I did not publish, VSIX file is here: https://github.com/gencer/HTML-Slim-CSS-SCSS-Class-Completion/releases/tag/v1.5.2-beta

I will publish after some additional work.

gencer commented 5 years ago

Latte and find usages are released in marketplace with version of 1.5.3.