ben-eb / ben-eb/css-values

Integration with stylelint.

Open
#9 6 comments 2 reactions 0 assignees View on GitHub
enhancement help wanted question
Dominant language
JavaScript
Stars
64
Forks
3
PR merge metrics
No merged PRs in 30d

Description

This follows on some thoughts I had in the [stylelint chat](https://gitter.im/stylelint/stylelint?at=57a4c767d097eb6b2cc8408d).

/cc @stylelint/core

So, I believe that the primary use case for this project is to provide meaningful feedback to a developer about incorrect CSS, and so stylelint is the best fit for it. Of course, I have my own use case of being able to check validity of CSS properties before merging, but primarily I think stylelint benefits the most from this work. With this in mind, I think we need to discuss how we can integrate this into stylelint!

I am now thinking of not exposing any of the templating/generation that we do in the background, it's just not necessary for the two main use cases that I've outlined (and, it took me a while to see @davidtheclark's [logic for not doing this](https://github.com/ben-eb/css-values/issues/1#issuecomment-208080441)). Instead, css-values will exist as a module on npm which you can require, and won't do any CSS parsing beyond using [postcss-value-parser](https://github.com/TrySound/postcss-value-parser); you will be able to use it to return a warning message or `true` if the value passed validation.

``` js
import cssValues from 'css-values';

/**
* @param {string} Property to validate
* @param {string|valueParser} Value to validate
*/
const valid = cssValues('color', 'blue');
// => true

const invalid = cssValues('color', 'yrllow');
// => {message: '"yrllow" is not a valid value for "color".'}
```

To facilitate this I think we need to move to a monorepo which houses:
- The css-values module itself;
- A stylelint plugin which wraps the css-values functionality;
- A PostCSS plugin which wraps the css-values functionality;
- https://github.com/ben-eb/postcss-reduce-initial (a spin-off project which uses the same data);
- and any future module which depends on code/tests from this project.

One of the areas that I've already identified as needing improvements is the lack of feedback from the module on an invalid value. It seems like something that can be addressed fairly easily by changing the return value (in the invalid case) of a lot of the different [validator functions](https://github.com/ben-eb/css-values/tree/master/src/validators). So, if you'd like to contribute then this is a really good way to do so!

Please let me know if you have any questions/suggestions/feedback, it really helps! 😄

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reading the linked stylelint chat discussion and the existing validator functions in src/validators. The issue proposes stylelint, PostCSS, and monorepo integration, but does not define one bounded change; the invalid-value return behavior is the clearest possible starting point. Done would mean an agreed integration scope and corresponding validation feedback.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.