jss icon indicating copy to clipboard operation
jss copied to clipboard

jss cannot read external css rules

Open mainpart opened this issue 11 years ago • 2 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

mainpart avatar Dec 11 '13 11:12 mainpart

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

JSlote avatar Sep 09 '14 18:09 JSlote

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.

fresheneesz avatar Mar 02 '15 07:03 fresheneesz