help phpstorm resolve variables in <link> stylesheets
Hi,
I'm using PhpStorm 2023.3.7 with StencilJS. From what I can tell, this does the same thing when I create a new HTML 5 boilerplate app with File → New Project and select HTML 5 Boilerplate. In the StencilJS render function or in the <head> of the index.html file I just do this:
<link rel="stylesheet" type="text/css" href="https://path.to/my-custom-colors.css>
Then in my css I reference a variable defined in the custom colors sheet:
p {
background-color: var(--my-favorite-color);
}When I do npm run start and preview the page, both the StencilJS custom element and the plain html 5 app correctly find load my-custom-colors.css from the website and the variable is correctly used. My background is whatever I want to make --my-favorite-color.
The problem is that PhpStorm doesn't know about the variable. I would expect it to be able to load the css in the background and parse it, displaying the little thumbnail preview of the color when I'm working in the local css file.
It looks like PhpStorm will process all the css files in the application, even if they aren't linked or imported anywhere. In my HTML 5 test application I made a new file called ./img/foobar.css with:
:root{
--baz: purple;
}Never linked foobar.css anywhere, never imported it, and it is in the img folder too. But when I went into css/style.css and used var(--baz) php storm found the reference and made a little purple thumbnail.
I would expect the exact opposite behavior: 1) PhpStorm should not tell me that it cannot resolve the custom property --my-favorite-color just because it is coming from a cdn and 2) It should tell me that it can't find --baz because the foobar.css file isn't actually loaded with a <link> or @import in any file. Seems like that last one would be especially important since it is likely I forgot to link my css file and that's an error I want to know about.
So is there any way to make PhpStorm work the way I would expect? It isn't just a StencilJS thing because it doesn't work in the plain HTML 5 boilerplate app either.
Looks like a similar question was asked over 12 years ago and still no response. https://intellij-support.jetbrains.com/hc/en-us/community/posts/207063975-Dynamic-path-for-included-imported-linked-files-in-XSLT-and-other-languages?input_string=help%20phpstorm%20resolve%20variables%20in%20%3Clink%3E%20stylesheets
Please sign in to leave a comment.
Hi there,
The IDE can only parse local files, not remote ones (CDN etc.)
If you need to use such a file via CDN – tell the IDE to download it: place caret on the resource,
Alt+Enter(or whatever you may have there to bring the quick fix/intentions menu) and choose the appropriate option – the IDE will download and save the file outside of the project (somewhere in the config folder).https://www.jetbrains.com/help/phpstorm/style-sheets.html#ws_css_completion_classes_from_external_libs
What should it do when a resource is loaded in a “dynamic” way (e.g. in a template via some special/custom code (e.g.
{{ asset(”path/to/my.css") }}or alike))? The final page would work just fine even though it's not “explicitly imported” (in a usual way) anywhere…