Command line interface

[paazmaya]

Please provide a command line interface which could be used like:

specificity-graph create file.css [options]
specificity-graph update file.css

[dhoko]

I'm working on it, PR is coming :)

$ cat style.css | specificity-graph > output.json
$ specificity-graph style.css output.json
$ specificity-graph style.css -a // output some stats about the specificity

The command create a json, then open index.html and you should see the graph.
It's not ready yet.

I aslo move from d3.js to Google Chart, less code and it's easy to configure. Google Chart won't be in the PR.

[paazmaya]

Whooaa! Great

[pocketjoso]

Cool! I was going to say the reason I haven't created any CLI is because for a CLI my intention would be to be able to run it without using a browser, i.e. something like that it just saves the graph as an SVG to file. As I used d3 and I wasn't aware of any good way to run it without a browser, I never looked into this (I did briefly consider using PhantomJS to do it though. Also, this repo kind of does that). But if I'm understanding you correctly and you're just asking for a browser page to be opened via the CLI command, then that should be pretty simple. Let's see what @dhoko comes up with!

I aslo move from d3.js to Google Chart, less code and it's easy to configure. Google Chart won't be in the PR.

I'm not against moving away from d3. The main reason I wanted to use it here is because I just haven't played around with it before - but it's definitely overkill for a simple line graph. If you're interested in creating a separate clean PR that just substitutes d3 with Google Chart; that reduces the file size while maintaining functionality, I'll be happy to merge that.

[stefanjudis]

What about rendering d3 in the process - as far as I know this might be possible.

Have't tried it yet though. And am just sharing ideas. :)

[dhoko]

The CLI must be KISS I think, so no server, no chart generation etc. The cli generates a json (some stats too) :

Verbose:

Graph:

@pocketjoso @stefanjudis Yup we can, but why ? We already have the index.html, so with a JSON it's easy to build as many graph we want.

Maybe, we can build a directory for specificity, no ? (Istanbul creates a directory coverage for unit tests)

Ex:

$ specificity-graph style.css specificity
$ cat style.css | specificity-graph -o=specificity

Parse style.css, then it creates a directory specificity with an index.html and output.json.

[stefanjudis]

yeah totally agree.

CLI should be able to generate JSON, but additionally it would be nice to also render a report in html format, right?

I'd like to have it in our build process right before deploy to production and prefer to have a nice report page. :)

So maybe a flag would be nice to render report additionally to JSON output?

[dhoko]

Yup, so no more Google Chart. D3 is overkill and hard to configure, maybe we can try another lib:

• Charted just a csv, no configuration
• Chartist.js few lines
• Morris few lines

"I'd like to have it in our build process right before deploy to production and prefer to have a nice report page. :)"

+1

[pocketjoso]

All right, lots of good ideas here! I think being able to generate (and view) a specificity graph directly from the CLI makes sense, but might be to slow to always do, so perhaps like @stefanjudis said - a flag for that. How it would work, perhaps what @dhoko suggested, saving a json and html file to a specificity folder. This open command would just follow it up by opening the generated (and saved) html file. If we save them by default to this folder, and just step up the file names (or use some kind of timestamp), then we can make the command easier to run, especially automatically (we can still allow a flag to specify a specific save path).

For the ideas around rendering a report, or lots of stats.. What exactly do you want to see in there? How would you use it? If we can come up with some good ideas, let's open up a different issue, and eventually a different PR for that.

[stefanjudis]

I see a couple of use cases:

Calling it to see stats immediately to get an idea how it's going ( this is similar to the black example image @dhoko placed above ):

specificity-graph main.css

Additionally I'd like to have the option to output the evaluated data somewhere ( JSON including timestamp probably )

specificity-graph main.css --output JSON --directory specificity

But what I'd prefer over everything is also to able to generate an HTML report, so that I can put it into my CI and paste the url into the development chats for everybody to check. :)
HTML report would include all values in table and nice graph to see where something is going wrong.
So this might be a mixture of verbose and graph suggested by @dhoko.

specificity-graph main.css --output HTML --directory specificity

[pocketjoso]

@paazmaya @stefanjudis This functionality is now available as of specificity-graph v0.1. Feedback welcome!

[stefanjudis]

@pocketjoso nice!!! will hopefully give it a shot soon.

Thanks for your work.

[paazmaya]

Great, thank you!

[pocketjoso]

Thank @dhoko, he did most of the work. :)