cssinjs / cssinjs/jss

[lint-jss] warn about silly mistakes

Open
#255 16 comments 1 reaction 0 assignees View on GitHub
complexity:high feature request idea
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.