{"action":"created","issue":{"url":"https://api.github.com/repos/keeganstreet/specificity/issues/26","repository_url":"https://api.github.com/repos/keeganstreet/specificity","labels_url":"https://api.github.com/repos/keeganstreet/specificity/issues/26/labels{/name}","comments_url":"https://api.github.com/repos/keeganstreet/specificity/issues/26/comments","events_url":"https://api.github.com/repos/keeganstreet/specificity/issues/26/events","html_url":"https://github.com/keeganstreet/specificity/issues/26","id":186606898,"number":26,"title":"command line argument that takes a file as argument","user":{"login":"Maxlufs","id":3827048,"avatar_url":"https://avatars.githubusercontent.com/u/3827048?v=3","gravatar_id":"","url":"https://api.github.com/users/Maxlufs","html_url":"https://github.com/Maxlufs","followers_url":"https://api.github.com/users/Maxlufs/followers","following_url":"https://api.github.com/users/Maxlufs/following{/other_user}","gists_url":"https://api.github.com/users/Maxlufs/gists{/gist_id}","starred_url":"https://api.github.com/users/Maxlufs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Maxlufs/subscriptions","organizations_url":"https://api.github.com/users/Maxlufs/orgs","repos_url":"https://api.github.com/users/Maxlufs/repos","events_url":"https://api.github.com/users/Maxlufs/events{/privacy}","received_events_url":"https://api.github.com/users/Maxlufs/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-11-01T18:16:53Z","updated_at":"2016-11-02T02:18:07Z","closed_at":"2016-11-02T02:18:07Z","body":"Hi, I've been looking for an npm package to basically suffix all the rules in my css files with a comment that has the specificity in it, so that i know which rule might override another. I've been using this node script just for myself for a while.\r\n\r\n```js\r\n#!/usr/bin/env node\r\n// index.js\r\nvar fs = require('fs');\r\nvar specificity = require('specificity');\r\nvar aArgv = process.argv.slice(2);\r\n\r\nfs.readFile(aArgv[0], 'utf8', function(oErr, sData) {\r\n  if (oErr) {\r\n    return console.log(oErr);\r\n  }\r\n  var sResult = sData.replace(/(^|}|\\/\\*|\\/\\/)(\\s*?)(#|\\.|:|\\[|[a-zA-Z])(.*?{)/gm, function(match, $1, $2, $3, $4 {\r\n    var sSelector = ($3 + $4).slice(0, -1); // selector, trim last character which is \"{\"\r\n    var sSpecificity =specificity.calculate(sSelector)[0].specificity; // e.g. 0,0,0,1\r\n    return ($1 + $2 + $3 + $4 + ' /*' + sSpecificity + '*/')\r\n })\r\n  console.log(sResult)\r\n})\r\n```\r\n```sh\r\n./index.js CSSFILE.css > NEWCSSFILE.css\r\n```\r\nThe before and after looks like\r\n```css\r\np:nth-child(1) {...}\r\n```\r\n=> \r\n```css\r\np:nth-child(1) { /*0,0,1,1*/...}\r\n```\r\nIdeally it would be great to have native IDE built-ins or just integrate in the build tool during dev process, but i would hope that it'd be possible to do this task with *specificity*'s built-in command line (other environments too), something like\r\n\r\n```sh\r\nspecificity -f CSSFILE.css > NEWCSSFILE.css\r\n```\r\n\r\nHope this would be something that you'd consider. If anyone happens to know any lib that does this or something similar or more, I'd be grateful for your sharing.\r\n\r\nThanks."},"comment":{"url":"https://api.github.com/repos/keeganstreet/specificity/issues/comments/257754093","html_url":"https://github.com/keeganstreet/specificity/issues/26#issuecomment-257754093","issue_url":"https://api.github.com/repos/keeganstreet/specificity/issues/26","id":257754093,"user":{"login":"keeganstreet","id":513363,"avatar_url":"https://avatars.githubusercontent.com/u/513363?v=3","gravatar_id":"","url":"https://api.github.com/users/keeganstreet","html_url":"https://github.com/keeganstreet","followers_url":"https://api.github.com/users/keeganstreet/followers","following_url":"https://api.github.com/users/keeganstreet/following{/other_user}","gists_url":"https://api.github.com/users/keeganstreet/gists{/gist_id}","starred_url":"https://api.github.com/users/keeganstreet/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/keeganstreet/subscriptions","organizations_url":"https://api.github.com/users/keeganstreet/orgs","repos_url":"https://api.github.com/users/keeganstreet/repos","events_url":"https://api.github.com/users/keeganstreet/events{/privacy}","received_events_url":"https://api.github.com/users/keeganstreet/received_events","type":"User","site_admin":false},"created_at":"2016-11-02T02:18:07Z","updated_at":"2016-11-02T02:18:07Z","body":"Hi @Maxlufs,\r\n\r\nThanks for sharing your work here. I would suggest that you create this as its own github repo and npm package. It can still include `specificity` as a dependency. I don't want to add file system processes to this package because I want to keep it simple and re-usable across different environments like Node.JS and the web.\r\n\r\nYou might also like to check out PostCSS, as this might be a good platform for building your tool on. Its really geared around modifying and processing CSS files and you could write a PostCSS extension that inserts the specificity of each selector as a comment. PostCSS will generate an Abstract Syntax Tree of the CSS document, which will allow you to easily find all the selectors without having to use regular expressions.\r\n\r\nCheers,\r\nKeegan"}}
{"actor":{"display_login":"keeganstreet"}}