pseudo-class styles not working when external fonts loaded before kss.js file

[tylerwolff]

More specifically, when I include fonts from google above kss.js, no dynamic pseudo-class styles are generated. I believe this is because the script stops looping through the stylesheets once it hits the font stylesheet. Perhaps this is because stylesheet.cssRules is null for that type of css file, but I'm not totally sure.

[gregjopa]

@tylerwolff - I have a pull request open in issue #60 that fixes a bug with pseudo-classes. Try adding in the js code from this pull request to your project to see if it fixes your issue.

[tylerwolff]

@gregjopa awesome, thanks buddy! will check it out

[parris]

We ran into this today also and it seems that this is a cross domain issue.

[arielkirkwood]

+1 on the cross-domain issue. We're using a forked version of KSS that includes the changes in PR #47 and in our app, we fetch our CSS from another server. Our style guide is at style.example.com and the CSS file is at dashboard.example.com, and the cssRules (or rules) property is null for stylesheets coming from those cross-domain sources.

Not sure how or who should handle this issue :(

[parris]

@neonelectro we are using: https://github.com/hughsk/kss-node it works pretty awesomely and doesn't need a server side component (just an instance of node to compile). We just used that and avoided loading CSS in a cross-domain manner by having static pages. We use grunt, it watches for scss file changes and recompiles our styleguide instantly (along with our scss files).

[arielkirkwood]

@parris Thanks for the suggestion, but I don't have time to redo this under node :(

For anyone in my situation (remote stylesheets not playing nice with KSS.js due to same-origin policy), I've been able to work around this issue by proxying the remote stylesheet through the local server. @tylerwolff - this might solve your issue.

Example Sinatra route:

# make http://local.example.com/path/to/stylesheet.css serve a file located at http://remote.example.com/path/to/remote/stylesheet.css
get '/path/to/stylesheet.css' do
  content_type 'text/css'
  send_file open("http://remote.example.com/path/to/remote/stylesheet.css")
end

Make sure require('open-uri') is specified at the top of your file (e.g., app.rb) so you can fetch the remote file via open()

Then link in your HTML template:

<link rel="stylesheet" href="http://local.example.com/path/to/stylesheet.css" type="text/css" />

p.s. If you do this, make sure you don't have a local copy of the file you're trying to pull in from a remote server, or Sinatra will serve the public file first before obeying any routes you specify. To be clear:

A file located at "/path/to/stylesheet.css" that is inside Sinatra's public folder will get served and any route specifying get '/path/to/stylesheet.css' will be ignored. I spent an hour figuring that out >.<

[lananelson]

I am experiencing an issue when loading fonts from Typekit. Typekit script inserts following HTML in the head above other stylesheets:

<style type="text/css">.tk-open-sans{font-family:"open-sans",sans-serif;}.tk-museo{font-family:"museo",serif;}.tk-museo-sans{font-family:"museo-sans",sans-serif;}.tk-museo-slab{font-family:"museo-slab",serif;}</style>

This causes loop to exit because of an exception on this line (href attribute is null) in kss.js:

if (stylesheet.href.indexOf(document.domain) >= 0) {

[benschwarz]

Right, so sounds like we should return if the stylesheet has no href.

Can you make a patch?

[annez]

To fix this, all you need to check for is if the stylesheet has an href.

if stylesheet.href and stylesheet.href.indexOf(document.domain) >= 0

There are also several issues if you're defining styles within media queries (for example to target webkit specificity for select boxes etc). I've fixed this, but I'll put it in another thread.

[benschwarz]

@annez Any updates on your PR? If you can just patch n' close this issue, it'd be a great start before the other issues that you mentioned above.