New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add support for running in a browser #3935
Comments
Seems like we have too dymanic require somewhere. I think client side use case is important. PostCSS and Autoprefixer both support it. |
We ran into our own difficulties trying to get stylelint to run client-side. We ended up going server-side for our demo on the website. However, this was a couple of years ago and the tooling might have moved on enough to take another crack at it.
The heaviest parts of stylelint are the:
I believe we use dynamic requires for these. They were added to improve the bad performance outlined in #2454. However, there's probably a better way. One that improves performance and caters for the client side use case. I've made a couple of attempts recently to use A good way forward might be to adopt prettier's approach to building. They are dealing with similar problems to us:
And they have far more contributors dedicating their time to the problem. Or it might be that unpicking some of our dynamic requires to support your webpack config will require less effort and time. Has anyone else got any ideas? |
I think we can have internal API for client-side and auto-load API for CLI: // Client-side
let core = require('stylelint/…')
let scss = require('postcss-scss')
core.check(source, { parser: scss }) // CLI
let autoloader = require('stylelint/…')
autoloader.autodetect(source, filename) // will require core and scss dynamically inside |
Thanks for chiming in guys (it's rare to see contributors acutally responding on GHI these days).
Slightly out of my understanding how all of this might be put together to work, so I think for now I'll stick to using the 5.x branch (6.x also kind of works, but there is a JS error, 8.x doesn't throw errors but for some reason the I have my hopes someone has the time to find a way and make Stylelint work on the client, that would really be tremendous. |
I've looked into this a couple more times, but I wasn't able to make much headway. Unfortunately, I don't foresee myself having time to dig deeper anytime soon.
Sounds good to me. It'll help with the weight of the parsers. I believe this is similar to what prettier does.
I'm going to label this issue up as an enhancement and help wanted. Hopefully, this issue will pique someone's interest and they'll champion this feature. |
Sounds good! I'll push this issue though JSFiddle channel, perhaps someone will have the resources to look into this. If not, do you mind if I post it as a bounty? I want to be 100% sure you're ok with that. |
Sounds good to me! |
I will promote this issue in PostCSS twitter too. |
Couldn't sleep, wanted to see if it could be hacked together to run similarly to the POC done earlier. Hopefully this might help someone in the future. tl;dr; it's possible in the current state |
@konpikwastaken great job 👍 |
It's great to see work happening around this! @konpikwastaken's comment on their linked repo is possibly the key to making this work well:
|
Sounds great! I think we can close this issue when someone finds time to do that refactoring. |
@m-allanson and I are going to look into this. It'd be great if we ended up with something similar to how Prettier does it: <script src="https://unpkg.com/stylelint@14.0.0/universal.js"></script>
<script src="https://unpkg.com/stylelint@14.0.0/syntax-scss.js"></script>
<script>
stylelint.lint("a#{var} { color: red; }", {
config: { "rules": { "color-named"} },
syntax: "scss",
});
</script> The issue is related to #2454, where we need to resolve some performance issues. |
In fact we have already spent some time working on this 😄. You can see a live demo of progress here: https://upbeat-yonath-79931e.netlify.app I think some refactoring of stylelint's internals would make this quite achievable, and would allow us to avoid previous approaches of stubbing out modules that access the filesystem. Check out this repo to see how the demo works. It's a relatively small amount of code. |
Following @jeddy3's changes in #4729 I've got a WIP branch here: https://github.com/stylelint/stylelint/compare/browser-bundle. It's still pretty rough but demonstrates that this should work. Syntax parsers are bundled separately and can be loaded on demand. The stylelint bundle comes out at 250KB (minified + gzipped), with the syntax parsers ranging between 30KB and 260KB.
There's an updated demo at https://stylelint-browser-bundle.netlify.app/. Check the network tab when selecting a syntax to see parsers being loaded in as needed. |
I've opened a draft PR that details the current progress of this feature: #4796 |
Any updates on this? |
VS Code now runs in the browser as well as on desktop. In theory, if browser support ever does get implemented, it may then be possible to have the VS Code extension run in the browser as well since vscode-languageserver has browser support. |
I saw that. Very exciting stuff. I don't think we've far off. @m-allanson has mostly got us there. I think we'll need to:
|
I'll need to investigate a few things downstream. I remember I was having issues using ESM in VS Code while testing. However, I don't really remember exactly what went wrong. I'll take a look into it, maybe after I take care of a few issues I'm working on in v1.2. |
I'm experimenting with getting stylelint to work on browser. I now realize that there are a lot of tricks required to get stylelint working on the browser.
We need to replace some file-related external modules with modules that work on the browser. Also, stylelint's internal module needs to be replaced with modules that works on the browser.
Some source code needs to be replaced and rewritten for the bundle.
It hacks the require function to resolve plugins and shareable configs. Users can resolve plugins and shareable configurations by pre-registering aliases. https://ota-meshi.github.io/stylelint4b/stylelint4b/#stylelint4b-alias Unless you use plugins or shareable configs, we probably don't need it. |
@ota-meshi Thanks for the share. That's an interesting trick! I now understand well what we need for running Stylelint on browsers. |
Hi all, I was trying to integrate stylelint too for phcode.dev, the browser version of braclkerts.io code editor. Is it still not supported/how much work is left to port it to the browser? |
Stylus is a usercsss browser extension, which uses stylelint as the CSS linter in the editor. Therefore we have a prebuilt bundle here: We did shim a lots of modules, see: |
I'm currently trying to replace CSSLint in @jsfiddle with Stylelint. Got it working thanks to a proof-of-concept made here https://github.com/m-allanson/stylelint-browser-demo
Unfortunately turns out this works fine but with a very old version of Stylelint, specifically the 5.x branch. Once updated deps to the newest Stylelint, the whole client-side bundle breaks apart with a slightly cryptic
Error: Cannot find module "."
error.I was wondering if anyone around here can help out figure out if it's even possible to run the newest Stylelint on the client-side (this is a requirement for JSFiddle as our env only supports linting that way).
A bit more on what my config looks like:
webpack.config
:package.json
:The build
bundle.js
is attached - bundle.js.zipLint method is exposed as
Stylelint.verify()
@ai Any chance you could help out? (we had a brief chat about this on Twitter).
The text was updated successfully, but these errors were encountered: