reload(*.less) wrongly applying `rel` attribute on all link tags

zanona commented 9 years ago

Currently I have a bs-config.js with the following options:

...
files: [
    'src/*.html',
    'src/scripts/*.js',
    {
        options: { ignoreInitial: true },
        match: ['src/styles/*.less'],
        fn: function (event) {
            if (event !== 'change') { return; }
            this.reload('*.less');
        }
    }
],
injectFileTypes: ['less'],
...

But the problem is that when saving a less file (styles/atf.less) on the following document:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="styles/atf.less">
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700">
  <script async="" src="vendor/webfontloader/webfontloader.js"></script>
</head>

BrowserSync not only adds a rel attribute to all link tags, but also removed any URL query parameters included previously (check font.googleapis.com link), generating:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="http://localhost:3000/styles/atf.less?rel=1435062375072">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css?rel=1435062375074">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?rel=1435062375074">
  <script async="" src="vendor/webfontloader/webfontloader.js"></script>
</head>

So I believe there are two things going wrong here:

Adds rel attribute to all link tags instead of just the ones with *.less as established on bs-config.json
Adds rel attribute and removes all previously set URL query parameters (googleapis.com example)

The only way I could get it to work, was to hardcode the file name under bs-config file with this.reload('atf.less'). Also please note that adding an Array of values such as this.reload(['atf.less', 'main.less']) caused BrowserSync to reload all files, including the html page.

BrowserSync version tested: 2.7.12

shakyShane commented 9 years ago

@zanona thanks for the detail.

Yeah, the less/sass support needs a little deeper integration to fix this. It's on the list.

kosmotaur commented 8 years ago

Hi,

We're working on an API generating dynamic CSS bundles. To define which styles to include, we use query params, like so: styles.css?components=["newsletter-subscribe"]

When BS tries to refresh, it doesn't preserve the existing query params, so it's breaking the whole flow. I could work on a PR for that, if I could only please get a tip about where to start looking?

Cheers!

shakyShane commented 8 years ago

@zanona

Adds rel attribute and removes all previously set URL query parameters (googleapis.com example)

this is fixed via https://github.com/BrowserSync/browser-sync-client/commit/fdc6bc6556df63749b352bdd4dbb0039cb074115 and can be installed by either

cd node_modules/browser-sync
npm i browser-sync-client@latest

or (my fav)

npm rm browser-sync && npm i browser-sync

shakyShane commented 8 years ago

@kosmotaur ^ this will also fix your issue

zanona commented 8 years ago

@shakyShane thanks a lot man, I will check it out. :+1:

shakyShane commented 8 years ago

@zanona only 1 of your 2 reported issues though, I'm afraid

BrowserSync / browser-sync

reload(*.less) wrongly applying `rel` attribute on all link tags #687