Style linting

[nijk]

I'm not sure if this is going to be possible, but I was wondering if you know of any way to run style linting against the styles provided to or output from this library?

Ideally I'm looking for a solution that would warn developers that they have written styling that will cause issues in the browser. Stylelint provides a good example of the kind of linting that I'm after, but the problem for me is how to get something like this working with Stylefy.

[Jarzka]

Personally I have never used stylelinting. If I'm right, Stylelint can only take input from CSS files, thus it does not work with stylefy directly since stylefy does not work with CSS files, it outputs CSS code directly to the DOM. It would be easy if Stylelint could read and analyse CSS code directly from the web page. But if it's not possible, the only way I can see it to get working is to copy and paste the CSS code generated by stylefy into a file and analyse it with Stylelint. Unfortunately this manual work. And it gets even harder since stylefy generates styles on-demand, so you have to browse through all of your pages to get all CSS generated.

EDIT: It seems that Stylelint does support reading directly from style tags: "Works with embedded styles: Within <style> tags (used by Vue and Web Components) and Markdown code fences."
However, I have not used Stylelint so I don't really have an understanding of how it works.

[nijk]

Yes that's right, it would need a collection of css files from disk that could be injected in the build pipeline.

I wonder if it might be possible to find a way to create an additional output of the stylefy css to file for linting purposes in dev builds?

[nijk]

I'm happy to have a poke around to see if I can get a PoC working

[Jarzka]

Outputing stylefy's CSS code into a file would require the browser to write a custom file on your filesystem automatically, which to my understanding, is not possible for security reasons.

[nijk]

Ah! I forgot that Stylefy generates the CSS at runtime.

[nijk]

AFAICT Garden can be used at compile time - which to my understanding this library uses under the hood. I'm still wondering if there's a way to generate the CSS at compile time for linting purposes. I appreciate there are probably lots of reasons why this might be a bad idea - I'm just wondering if this is even feasible?

[Jarzka]

The basic problem for compile-time CSS generation is that the use-style function is called at runtime, when your component is rendered, and the styles you give it to might have been generated dynamically (for example, if there is some if-else statement which use different style). Thus, I believe creating the same styles at compile time is difficult and linting is only possible to do via reading the style tags generated by stylefy, if Stylelint supports it.

[Jarzka]

I agree that getting that lint feedback at compile time would be useful, but since stylefy works mainly at runtime, this is a bit difficult to achieve. Maybe we could integrate the linting logic of Stylelint into stylefy and run it at runtime too. :D

[nijk]

Ok, that's an interesting idea - I imagine that would be a mammoth task though...

I had another mad idea - what about if Stylefy's runtime could send all generated CSS via XHR to a backend that was responsible for linting? That way any linting library could be used and there would be no linting logic to maintain.

[Jarzka]

Yes, integration to Stylelint would be a huge task...

Interesting idea. I believe it would be possible to take the generated CSS code and send it to somewhere. It would probably be useful in some kind of debugging mode only. :D But since stylefy/init supports option map, it would be easy to use it to turn debugging mode on. :) I think this is an idea worth trying! Of course, you would still need to implement the backend logic manually (take the generated CSS code, lint it with some tool and print the feedback to console).

However, I also believe that the bugs you reported are more important to fix right now. :P If you wish, feel free to experiment the idea. It should be possible to create such debugging mode without conflicting my bug fixes. But I can also take it to my TODO/TRY list and experiment it when I have time.

[nijk]

Oh yes, this is very much a 'nice to' feature request rather than a bug report.

Agreed on the debugging mode point, this is a feature that would only be useful in dev and would I imagine come with a very real perf hit.

I'd quite like to understand a little more about the inner workings of this library so I'm happy to have a play around and let you know how I get on.