plugin-import-css occasionally processes CSS from <link> tags during development

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

Occasionally during development when running yarn develop and loading the site for the first time, you'll see the site but with broken styles for (what I came to realize) was any CSS loaded via <link> tag (which is not the intended behavior)

Even at the same time....

Probably related to a recent change to support other import for CSS in other browsers, see #482 / #483 for reference I guess?

Details

Some interesting observations:

• I could only get to happen when dev tools was closed
• Only really seemed to happen in Chrome
• Doesn't happen in Getting Started repo, but does in my website repo (common thread being usage of plugin-import-css)

Was seeing something like this for theme.css

CSS-in-JS intercepting /Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/www/styles/theme.css
CSS-in-JS intercepting headers {
  request: {
    host: 'localhost:1984',
    connection: 'keep-alive',
    'sec-ch-ua': '"Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"',
    'sec-ch-ua-mobile': '?0',
    'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36',
    accept: 'application/signed-exchange;v=b3;q=0.9,*/*;q=0.8',
    purpose: 'prefetch',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'no-cors',
    'sec-fetch-dest': 'style',
    referer: 'http://localhost:1984/',
    'accept-encoding': 'gzip, deflate, br',
    'accept-language': 'en-US,en;q=0.9,es;q=0.8,it;q=0.7',
    cookie: '_ga=GA1.1.2112235173.1566163902; _gid=GA1.1.387321566.1616260324'
  },
  response: [Object: null prototype] {
    'content-type': 'text/css',
    'content-length': '922'
  }
}

Probably need some better logic here and maybe should be based on request headers instead?

[thescientist13]

So been doing a lot of investigation, but when it happened just now, I was able to capture the headers and noticed something interesting

content type response.header for intercept [Object: null prototype] {
  'content-type': 'text/css',
  'content-length': '922'
}
content type request.header for intercept {
  host: 'localhost:1984',
  connection: 'keep-alive',
  'sec-ch-ua': '"Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"',
  'sec-ch-ua-mobile': '?0',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36',
  accept: 'application/signed-exchange;v=b3;q=0.9,*/*;q=0.8',
  purpose: 'prefetch',
  'sec-fetch-site': 'same-origin',
  'sec-fetch-mode': 'no-cors',
  'sec-fetch-dest': 'style',
  referer: 'http://localhost:1984/',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-US,en;q=0.9,es;q=0.8,it;q=0.7',
  cookie: '_ga=GA1.1.2112235173.1566163902; _gid=GA1.1.387321566.1616260324'
}
for url /Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/www/styles/theme.css

The request.accept header value is 'application/signed-exchange;v=b3;q=0.9,*/*;q=0.8??? I have heard of signed exchanges but not sure in this case it would be this value and not the usual text/css?

ex.

content type response.header for intercept [Object: null prototype] {
  'content-type': 'text/css',
  'content-length': '922'
}
content type request.header for intercept {
  host: 'localhost:1984',
  connection: 'keep-alive',
  'sec-ch-ua': '"Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"',
  'sec-ch-ua-mobile': '?0',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36',
  accept: 'text/css,*/*;q=0.1',
  'sec-fetch-site': 'same-origin',
  'sec-fetch-mode': 'no-cors',
  'sec-fetch-dest': 'style',
  referer: 'http://localhost:1984/',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-US,en;q=0.9,es;q=0.8,it;q=0.7',
  cookie: '_ga=GA1.1.2112235173.1566163902; _gid=GA1.1.387321566.1616260324'
}
for url /Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/www/styles/theme.css
******************************
final objet contentType text/css
!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[thescientist13]

OK, added a bit of hack I guess by just specifically checking for that header, and can now confirm in that edge case where we get application/signed-exchange, it is now working in that edge case.

Nothing like a curveball bug at that last moment ⚾ ☺️