dvtng / jss

JavaScript library for getting and setting CSS stylesheet rules

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

jss cannot read external css rules

mainpart opened this issue · comments

i came to a situation when i need to check css rule of some jquery ui class loaded via external hoster stylesheet... in this case sheet.cssRules and sheet.rules arrays are empty.

Chrome.
image

I don't think JSS purports to be able to do this. It would be a good feature though!

commented

Jss creates its own stylesheet and uses it for everything. If you want to search all stylesheets, you can do the following:

var originalSheet = jss.defaultSheet // save the stylesheet so you can replace it
var styleNodes = document.querySelectorAll("style")
var results = styleNodes.map(function(node) { // loop through the stylesheets
    jss.defaultSheet = node.sheet // sets the sheet it will search
    return jss.get(selector)            // search that sheet
})
jss.defaultSheet = originalSheet  // replace the original sheet

Results will contain the list of styles for that selector from all stylesheets. Note that if there are multiple matching rules, jss combines them are combined together. I actually have no idea if jss returns all matching selectors, or only the specific selector you searched for.

I think this library could definitely use some more functionality around interacting with stylesheets like this.