Restore embedded linting when a Stylelint Processor exists for it

[Arcanemagus]

Embedded scope linting was removed in https://github.com/AtomLinter/linter-stylelint/commit/c9da67a6fa19c9961ff8ee32feb7bc938342de27 as part of the update to Stylelint v7, since it no longer exists in the core. This issue is to track restoring this functionality when somebody has written a Processor implementing it.

[ccbikai]

https://github.com/ccbikai/stylelint-processor-html

[Arcanemagus]

Might as well implement Markdown (and any other relevant ones) as well: https://github.com/stylelint/stylelint/blob/master/docs/developer-guide/processors.md

[klebba]

+1

[mxstbr]

We just released a processor to lint the CSS in styled components! 🎉

https://github.com/styled-components/stylelint-processor-styled-components

Is there a way we can add support for this in linter-stylelint? It's in my .stylelintrc, so I figured you'd pick it up automatically but of course you don't react to .js files. Can we maybe add a generic "Try linting files with these extensions" option to linter-stylelint?

[Arcanemagus]

@mxstbr Unfortunately it's not quite that simple, as we only want to attempt linting if there is a processor available for the type. Reverting the removals from the commit referenced above is the starting place, I just haven't had time to implement it yet.

[cncolder]

@Arcanemagus language-babel support highlight styled-components by add a new scope named source.css.styled. To resolve @mxstbr question. Just add source.css.styled in baseScopes at lib/index.js#L27. That's simple.

[Arcanemagus]

@cncolder All that would do is start running this package on those sections of the code, the functionality to make stylelint actually understand the file as a whole still needs to be restored.

[jbreuer95]

+1

[mattixittam]

+1 for https://github.com/ccbikai/stylelint-processor-html

[funwithtriangles]

What's the status on this one? Is there any way to get linting to appear in Atom?

[czonechan]

the stylelint-processor-html does not trigger in html or vue file, and style lint can not work in Atom. can you make the file extensions to be configurable, just like https://github.com/AtomLinter/linter-stylelint/issues/306 said?

[phyllisstein]

Since the user is responsible for configuring both the settings for .stylelintrc and the settings for linter-stylelint, isn't the onus on her to make sure that if she tells the linter to apply itself to a scope she also configures stylelint to understand it? It's possible that I'm misunderstanding something about the linter's inner workings, but from what I've read it doesn't look as though there's any need to be more robust or defensive about it than that.

[Arcanemagus]

@phyllisstein Until https://github.com/AtomLinter/linter-stylelint/issues/51 is fixed, every supported plugin will need to be installed here in this package as currently it only uses the embedded stylelint instance. It's not just a matter of configuring stylelint to work with it in the project right now.

[ezhlobo]

@Arcanemagus hey, are you planning to address this issue? Otherwise, could you describe what do want to be done here, so the community will be able to help?

[boboldehampsink]

This package is useless for me until I can lint .vue files within Atom

[juni0r]

Having support for .vue files would be awesome. Meanwhile I use lint-sass-vue.

[edahlseng]

@Arcanemagus or anyone else, can you explain what's needed to make this happen? I'm happy to take this on, but am looking for a bit of direction since I'm brand new to this codebase!

[emuvente]

@Arcanemagus I think now that #381 is merged, this can be supported by adding these scopes to the baseScopes array:

source.css.embedded.html
source.scss.embedded.html
source.css.scss.embedded.html
source.less.embedded.html
source.css.less.embedded.html
source.css.postcss.embedded.html
source.css.postcss.sugarss.embedded.html

[edahlseng]

@emuvente would styled-components in .js files also be supported by adding other scopes?

[emuvente]

@edahlseng Yes, it looks like styled components could possibly be supported by adding the source.inside-js.css.styled scope. #322 appears to be trying to solve that.

I think one way this could be solved is to have the default scopes and a couple configuration options to add on additional scopes if wanted. The configuration options could be:

• A checkbox for 'Enable checking embedded styles' that would add the .embedded.html scopes.
• A checkbox for 'Enable checking styled-components' that would add the source.inside-js.css.styled scope.
• A text input for 'Additional scopes to check' where the user could enter any additional grammar scopes that they wanted the plugin to run in, similar to how linter-eslint handles this problem.

@Arcanemagus thoughts?

[phyllisstein]

@emuvente that sounds great to me, so long as the TypeScript users among us get that "Additional Scopes" input. 😬