Comments (9)
Thanks for the confirmation. Will probably dig in pretty soon. Meanwhile, just ran across this: http://www.slideshare.net/maxdesign/understanding-the-mysteries-of-the-css-property-value-syntax. You probably already reviewed that information when making the parser. Helped me.
from css-values.
This is also a good resource. 😄
https://developer.mozilla.org/en/docs/Web/CSS/Value_definition_syntax
from css-values.
@ben-eb okay, I will take a look today or next week
from css-values.
The thing that I think would help the most in bringing me or some other potential contributor up to speed on the intentions module would be an example how it would get used. How would a tool like stylelint use this? Would stylelint have to run acquire
and run
itself and then use the built functions? Or would the built functions be published somehow?
from css-values.
css-values is a tool to create modules (or other things). So if we wanted to make a plugin for stylelint, we would install css-values as a development dependency, and then run
the generator to output that plugin. Then, consumers of that plugin download the built functions and not the methods used to generate them.
I haven't decided on acquire
, other than we should run that periodically to catch updates to the dataset - that's a good task that a bot could do. I think it will be good when we reach 1.0.0
to publish dataset updates with semantic versioning - new properties are minor versions, changes to existing properties are major versions.
from css-values.
Ok, I'd like to try to talk through some details and you correct me if I'm wrong :)
acquire
simply gets the latest JSON data from MDN.- When you
run
, you parse the values of that JSON data (so css-values includes an MDN-spec-syntax parser) to generate an tree of nodes. - Using that node tree, you generate a bunch of functions that can check whether a property-value pair matches the spec.
- The end-user, then, has access to the generated functions (if they want to validate property-value pairs) and also to the node tree itself (if they want to, say, generate a document or do something else).
So if stylelint made a rule that uses generated functions to check for invalid values, it would
- Pull in CSS-values as a dev dependency.
- Run CSS-values and put the output into a directory that is part of the repo, versioned & released.
- Reference those generated functions from its
value-no-unknown
rule.
Does the above sound right? This kind of practice really helps me understand new things.
from css-values.
Spot on, yeah. Note that in addition to acquire
, we supplement that data with Autoprefixer (this is just for vendor specific keywords). At the moment that is pulled in via whatever Autoprefixer version the module is currently using.
from css-values.
@ben-eb I can be an collaborator :) Atm I'm not familiar with API yet, but I can help with property coverage for a first time.
from css-values.
@delorge I've sent an invite so you can contribute directly to this repo if you would like! I think there are a few more simple tasks in this format (#10), if you would like to take those also it would be really great;
<url>
; for properties that use<uri>
instead of the<url>
identifier, we can provide an override in https://github.com/ben-eb/css-values/blob/master/src/data.js#L10. More details here: https://developer.mozilla.org/en-US/docs/Web/CSS/url<single-animation-iteration-count>
; the syntax isinfinite | <number>
so we can re-use theisNumber
validator again here. More details here: https://developer.mozilla.org/en/docs/Web/CSS/animation-iteration-count<track-size>
; slightly more complicated, but not by much. There are patterns that you can follow for function validation in bothisColor
andisRepeatStyle
. More details here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns<geometry-box>
; we can re-use theisBox
validator for this. More details here: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-origin
from css-values.
Related Issues (17)
- API design HOT 13
- next validator task HOT 2
- Function validators
- Consolidate identical validators
- Support proprietary gradient syntaxes.
- Outstanding syntaxes needing validators
- Implement property specific validation messages HOT 3
- Pull in Latest Data from MDN HOT 1
- Handle multiple values appropriately
- Template:CSSData link is broken?
- Support `scrollbar-color` property
- Handle global values appropriately
- Cover 100% of properties & values accurately HOT 4
- 100% code coverage HOT 2
- Add isBlendMode utility. HOT 2
- Integration with stylelint. HOT 6
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 css-values.