Comments (8)
Hey, thanks!
For sure β
... I think I'll add this as a new plugin (and init
option) to the next minor release this weekend.
from pwa.
Hey, so this needs to wait a bit. I lost most of the day playing with Stylelint because it:
-
Doesn't support Stylus at all (stylelint/stylelint#674)
-
Doesn't work with SASS/SCSS alongside the CSS modules selectors.
I tried two approaches:
A) Adding it as a PostCSS plugin directly
This made most of SASS appear to work, although I'm not confident that it does because Option (B) shows significantly more errors & warnings per file. Also, each warning is printed twice in this mode.
B) Using the stylelint-webpack-plugin
directly.
The error formatting is correct, looks nice, but this mode is the most broken & inconsistent β see below.
For (2), I have stylelint-config-recommended
and stylelint-config-css-modules
installed & extended. It still complains about \:root
being an unknown type selector.
It will ignore \\:root
entirely, but that breaks SASS. And it'll accept :root
but sass-loader
will not since it needs the escapes.
In fact, nearly all non-CSS preprocessors have some kind of CSS-modules escape character.
// less
&:root {
--blue: #1E88E5;
}
&:global(.penta) {
background-image: url(@assets/shapes/penta.svg);
}
// sass
\:root
--blue: #1E88E5
\:global(.penta)
background-image: url(@assets/shapes/penta.svg)
// stylus
:root
--blue #1E88E5
:global(.penta)
background-image url("@assets/shapes/penta.svg")
All in all, I'd be happy to add this as an official plugin, but not in its current state. There are too many holes as is β or, at least, too many inconsistencies that PWA can't solve in a single package on the user's behalf. I'd much rather wait on a good addition than put out a semi-baked solution that only works some of the time.
Unfortunately, I don't have the spare time right now to contribute towards these gaps, otherwise I most definitely would.
from pwa.
Doesn't support Stylus at all
Yeap. There is no way to support since:
- The syntax is incredibly hard to write the parser
- It has no active development to ask them to give AST from their parser
- There is no big user base
Doesn't work with SASS/SCSS alongside the CSS modules selectors.
Hm. We can fix postcss-scss
to parse \:
as :
. This syntax works in every place of SCSS?
In fact, nearly all non-CSS preprocessors have some kind of CSS-modules escape character.
Off-topic: This is why you can use PostCSS for preprocessors too ;). It works perfectly with CSS Modules, since CSS Modules is just PostCSS plugin.
from pwa.
Yeah, understood. I could live with putting a disclaimer for "no Stylelint with Stylus".
Yes, SCSS/SASS expects \:
escapes β they're the same in this regard. Although, I didn't make it very clear above, but this seems to be an issue with the Webpack plugin on. When Stylelint is attached to the PostCSS chain, it accepts the escapes.
And yeah, I see that attaching stylelint
as a PostCSS plugin is the way to go, but the formatting on the errors & warnings is funky and I'm not able to "normalize" it into the Webpack format.
Here are the outputs from both approaches:
Notice how there's only 1 warning via the PostCSS route but that it's duplicated.
from pwa.
The best solution, for Webpack context, would be to have a stylelint-loader
that ran in the enforce: "post"
mode. This would mean that it runs after all other loaders for the given file extension(s). Since PostCSS (+ SASS, + Stylus, etc) will run first, then the post-loaded Stylelint loader is always running on the transformed CSS.
This would solve the Stylus issue and prevent any inconsistencies that I've been experiencing.
I think the only thing you lose is the ability to lint the spacing on the input files, although each preprocessor might be preserving the original spacing.
from pwa.
Yes, SCSS/SASS expects : escapes β they're the same in this regard. Although, I didn't make it very clear above, but this seems to be an issue with the Webpack plugin on.
Letβs create a issue in webpack stylelint loader.
I think fixing the loader will fix all current problems.
from pwa.
The best solution, for Webpack context, would be to have a stylelint-loader that ran in the enforce: "post" mode.
I am not sure.
- Stylelint plugin for text editor will show different mistakes
- ESLint and Stylelint behaviour will be different
Allso, are you sure that webpack loader is a best place for linter? I see there are 2 reasons for using linter:
- Avoid spending time for a stupid mistake
- Prevent
master
from pushing mistakes. Also, teach a coding standard for junior developers.
Both cases are not really covered by webpackβs loader. Nobody really keeps webpack console in front on eyes to see a warning in the right time. Junior will see error only on CI server (and will blame theirself that everyone now see this mistake).
I think the best way of using linter: text editor plugins and lint-staged
.
from pwa.
This is what the enforce: "post"
does:
- Save file
foo.styl
- PostCSS: Stylus to CSS
- PostCSS: Autoprefixer on CSS (optional)
- Stylelint on CSS
Compare that to the ESLint approach:
This is if you use
enforce: "pre"
OR if ESlint is first loader
- Save file
foo.js
- ESLint on JS
- Babel: Apply transforms
ESLint is able to do this because they're working with a normalized syntax (JS) whereas Stylelint is attempting to ingest everything, but it (knowingly) can't.
The more analogous example for ESLint would be linting your CoffeeScript files.
I would also say TypeScript, but it has its own Linter (due to drastic syntax differences).
- Save file
foo.coffee
- Convert Coffee to JS
- ESLint the JS
- Babel: Apply any transformations
In all scenarios, you still get linter feedback per-save. The difference is just in when the linting happens.
Β―_(γ)_/Β―
I know it's not great & not what you have in mind, but to me it seems like the only way to normalize the behavior is to normalize what Stylelint ingests.
from pwa.
Related Issues (20)
- Irrelevant question HOT 1
- Export to relative paths? HOT 6
- Creating a project with just 'less' preprocessor throws an error HOT 1
- PWA command not found on local install HOT 2
- Add push notifications and things mentioned in here
- How do I deloy on a heroku server? HOT 2
- how could I contribute translation for this project? HOT 2
- Service Worker
- Feature Request - Init into existing Project HOT 1
- React Installed brand new, not working straight up. HOT 5
- Config for supplying own service worker file
- npm i missing from docs
- Help, how to remove .svelte file from browser source HOT 3
- Duplicated App in svelte production HOT 2
- Create sub-folder in pages folder [Svelte] HOT 2
- @pwa/plugin-typescript is not published HOT 2
- Custom postcss webpack style rules missing with pwa.config.js HOT 8
- Handle LauncherError exception HOT 4
- When you say "WIP" what does that mean? HOT 2
- pnpm install
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pwa.