FEATURE: Automatically detect remote style sheets

[VladimirMikulic]

As the title suggests, I would like that this extension can suggest classes in a file that is referencing a remote style sheet without requiring me to add it to the html-css-class-completion.remoteStyleSheets property.

Would that be possible? Thanks.

[gencer]

Hi @VladimirMikulic , It is actually possible but let me think about it.

BTW, should we only allow HTML files or All files like .{hml,htm,php,slim,latte,vue}... This can be a little tricky.

[VladimirMikulic]

Hi @gencer. Thank you very much for a fast reply. It's annoying that every time I switch project, I need to add different version of Bootstrap/Tailwind.. to the completion.remoteStyleSheets property.

Instead of an array, you could maybe have parseRemoveStyleSheets as boolean.

For the initial implementation, only HTML files are just fine. Maybe you could set a configuration option for this as well to let users decide which files to allow?

[gencer]

Sounds good to me. Both boolean value and trace fields for extensions. I will look into this tomorrow.

[VladimirMikulic]

Awesome! Thank you very much.

[gencer]

This can be implemented. I believe i can parse html with regex and inlcude in the project however this is going to be harder on other template providers. I have two options here.

A) only support html for now and provide option for this B) create unified parser for each template providers and parse all.

Im evaluating these options now.

[VladimirMikulic]

@gencer that's some good news. Let me know what you've decided to do. In my opinion, the unified parser would be really cool to have (as a config option maybe).

[gencer]

@VladimirMikulic Can you test this version, please?

Before installing this one, please remove all remoteStylesheet directives from config files.

Currently this will try to load from HTML only. There is a new configuration parameter called searchRemoteGlobPattern:

          "html-css-class-completion.searchRemoteGlobPattern": {
            "type": "string",
            "default": "**/*.{svelte,latte,php,html,twig}",
            "description": "A glob pattern that includes html code which will be parsed if its contains Remote CSS"
          },

But its currently only supported on HTML. More languages will be added in future.

Awaiting your feedback.

v1.6.0

html-slim-scss-css-class-completion-1.6.0.zip

[VladimirMikulic]

@gencer this is AWESOME! I've just tried it out and guess what? I'll never have to memorize framework classes again :)

There is one bug/feature that I've encountered. Let's say I include Bulma in my document and I cache the classes, it works, no problem. Then, I realize that the project requires Bootstrap and I replace the Bulma CDN href with Bootstrap's and cache the classes again. This time it suggests Bulma classes as well as Bootstrap classes, although I use only Bootstrap and I removed Bulma.

I.E. the cache is not invalidated. It's not a top priority bug, though.

Anyway, thank you very much on this, I'll be using v1.6.0 from now on!

[gencer]

@VladimirMikulic Glad it did worked! 🎉 Well, i will also make sure cache gets invalidated after such changes.

I will not publish this version yet due to cache invalidation. You can freely use this version. I will update here when i got more info about this bug.

[gencer]

@VladimirMikulic Can you test this version to see re-cache works without using old remote stylesheet like you mentioned earlier.

html-slim-scss-css-class-completion-1.6.1.zip

[gencer]

Please also note that, You have to explicitly set this within your settings for this version:

{
  ...
  "html-css-class-completion.searchRemoteGlobPattern": "**/*.{svelte,tpl,latte,php,html,twig}",
  ...
}

Then restart / install

[VladimirMikulic]

Hi @gencer. Thank you for coming back to me. Unfortunately, this version completely breaks the CSS classes autocompletion. Now, it suggests HTML tags and attributes as "classes".

[gencer]

Hmm. Weird. Lets try empty the folder then.

Try this one:

html-slim-scss-css-class-completion-1.6.1.zip

[VladimirMikulic]

This one is no go as well. For example, let's say I cache Bulma classes and it does work fine, but if I delete Bulma and replace it with Bootstrap it won't fetch new classes. It still suggests Bulma classes.

[gencer]

But previously, bootstrap and bulma both was suggested right? This time only old one.

It's getting weirder. I will install a virtual machine and try there with few templates.

Thank you so much for taking time to test them for me.

Stay safe!

[VladimirMikulic]

That's correct. Previously, they were both suggested. I'll help you as much as I can, just @mention-me :)

[gencer]

Thanks @VladimirMikulic! I will try to debug this one to make sure it get refreshed when re-cached. In fact im planning to add this to incremental building. This means when you hit CTRL+S or just save, it will do the update for you.

I will update here when i got something.

[VladimirMikulic]

CTRL+S would be really amazing workflow. Thank you very much on the effort that you've put into this extension!