[lint-jss] warn about silly mistakes
- Dominant language
- JavaScript
- Stars
- 7.1k
- Forks
- 386
- PR merge metrics
- No merged PRs in 30d
Description
When I use the API like this:
``` js
var jss = require('jss');
var sheet = jss.createStyleSheet({
'.foo': {
bar: 0
}
});
console.log(sheet.toString());
```
...then my initial expectation was to get:
``` css
.foo {
bar: 0;
}
```
...but instead, I get:
``` css
..foo-1028573841 {
bar: 0;
}
```
I now know that I need to pass `{named: false}` to the `createStyleSheet` to generate the correct class name.
The same issue occurs when one forgets to use a plugin, e.g. if `jss-camel-case` is not used, then camel-cased properties will be generated without so much as a warning.
Another case of this occurs with `jss-nested`; coming from SCSS, I initially expected this:
``` js
var jss = require('jss');
var nested = require('jss-nested').default;
jss.use(nested());
var sheet = jss.createStyleSheet({
'foo': {
'> *:first-child': {
'bar-bar': 0
}
}
});
console.log(sheet.toString());
```
...to generate:
``` css
.foo-3691883159 > *:first-child {
bar-bar: 0;
}
```
...but instead, it generates:
``` css
.foo-2511288833 {
> *:first-child: [object Object];
}
```
I should have used the syntax `& > *:first-child` (with the `&`). The ampersand was implied in SCSS, but omitting it in JSS resulted in strange output.
It seems that non-sensical class name generation can be a "gotcha" for those new to JSS.
I think it'd be helpful if JSS could detect if it's generating malformed CSS. Maybe this functionality could be available as a development-only plugin, so performance wouldn't need to suffer. It could be as simple as detecting the use of basic CSS syntax / weird casing in keys and printing warnings, or as thorough as a "JSS Lint" utility with knowledge of all valid property names. What do you think?
Contributor guide
Assessment
This issue has not been assessed yet.