ben-eb / css-values Goto Github PK
View Code? Open in Web Editor NEWValidate CSS property value pairs.
License: MIT License
Validate CSS property value pairs.
License: MIT License
Any contributions are welcome, as this is such a big project I don't feel like I can handle it all by myself. Indeed, currently we have nearly 4000 tests that are generated for the output module!
These contributions can be (but are not limited to) tests (passing/failing), improving the code coverage, documentation of current code (perhaps we should look into some automated documentation?), features, bug fixes, advice for implementing more properties, or helping me tackle anything that is labelled 'help wanted'.
I'm open to adding collaborators directly to the repository if I already know you, or after a first pull request if I don't. ๐
Currently, the output module will not handle initial
, inherit
or unset
, the global keywords that are not defined in the specification grammar for each property. I think this is appropriate to handle globally and not per-validator; I did read somewhere that there were a couple of exceptions but I can't find the link to that now.
body {
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10 preview */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
http://www.colorzilla.com/gradient-editor/ is a good tool to use for generating the backwards compatible syntaxes.
Hi, Ben! I want next validator task)
For usage in stylelint-declaration-strict-value
Currently we're on ~82% covered, would be great to get that to 100%.
The data.json has not been updated in a while. Would be good to acquire the latest data from MDN.
clip-path
: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
grid-auto-columns
: <track-size>
grid-column-end
: <grid-line>
grid-template-columns
: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?
mask-image
: <mask-reference>#
shape-outside
: none | <shape-box> || <basic-shape> | <image>
transition-property
: none | <single-transition-property>#
(MDN has this as IDENT
which I take to mean using isCustomIdent
)We need to be able to validate any given blend mode. This will enable us to check the following CSS properties:
background-blend-mode
mix-blend-mode
We can do this by creating a helper function in the validators folder named isBlendMode.js
. If you need an implementation reference, you can use https://github.com/ben-eb/css-values/blob/master/src/validators/isGenericFamily.js. All we need to do here is to reference the blending modes instead! You can find the list here: https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode
Don't forget to add isBlendMode
to the index of validators, located at https://github.com/ben-eb/css-values/blob/master/src/validators/index.js.
Next, we need some way to tell css-values how to generate tests for these values. You can basically follow the existing format in https://github.com/ben-eb/css-values/blob/master/src/fixtures.js - import the list of blend modes and export an object named blendMode
with those as valid values, and some made up invalid value.
We then need to add this to the tests. You can do this by updating https://github.com/ben-eb/css-values/blob/master/src/__tests__/validators.js with the isBlendMode
validator that you created, named blendMode
. If you run the tests now with npm test
you will see that blend modes are validated properly.
Hopefully if everything worked correctly, css-values will now output a file that validates the properties listed above. You can check that it does by running npm run prepublish && npm run generate
. There should be a new file in output/properties/compositingAndBlending
. If this worked, then please add the properties to https://github.com/ben-eb/css-values/blob/master/src/completed.js.
If you're stuck, please post here and I'll help out in any way that I can. And with that being said, PRs welcome! ๐
Simple example; padding-left
is the same as padding-top
is the same as padding-right
is the same as padding-bottom
. There should be a way of merging validators which have the same configuration, greatly simplifying an output module.
We could probably do this by storing the data in memory instead of writing to disk straight away. Once all property/value pairs are parsed and merged, we could then write the files.
There is a bunch of css functions that don't have appropriate validator yet. This issue is created in order to keep track of progress in this kind of functionality.
Feel free to update this post (or point out missing functions)
One of the things that I am unsure of is how to design an appropriate API for this project, and which things that we need to expose. Currently, we have;
The templates are mostly what I'm having difficulty with here. How much of this do we expose?
Discussion is open. ๐
The docs and code reference this URL:
https://developer.mozilla.org/en-US/docs/Template:CSSData
However this page just gives me Not Found?
Need to improve parsing & the code generator to be able to handle the more complex grammars, such as <color>
.
At the moment, this module just validates a single value and doesn't handle multiple values very well. For example, in the output module a couple of tests for the initial-letter
property are failing, because the module doesn't take into account the position of each of the values.
normal | [<number> <integer>?]
https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter
So, we need to make the module aware of multiple value syntaxes such as this one; test fixtures should be generated to handle cases such as initial-letter: 3.0 2
for example.
Now that 0.1.0 is out, I'd like to implement more specific validation messages. These should offer more insight into why the validator might yield a warning; here are some examples:
rgb(255, 255, 255, 1)
- too many arguments, expected 3.rgb(255, 255)
- too few arguments, expected 3.rgb(255, 255, 255,)
- unexpected trailing comma.rgb(255 255 255)
- expected arguments to be comma-separated.Essentially what we have to do now is to break down the return conditions of the custom validators. Take isLength
as an example. The return condition should be extracted into individual conditions that yield a message if the condition is failing. So, for example, the function checks that the value does not end with .
- instead of a boolean test, we can return a message here instead:
if (!endsWith(int.number, '.')) {
return {
type: 'invalid',
message: 'At least one number should follow the decimal point.',
};
}
Suggestions for types of messages to return would be very welcome, as well as pull requests that implement these new messages. ๐
This follows on some thoughts I had in the stylelint chat.
/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). 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; you will be able to use it to return a warning message or true
if the value passed validation.
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:
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. 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! ๐
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.