Duplication inline elements in HEAD

[Fudoshiki]

application.slim

doctype html
html lang=locale
  head
    meta charset='utf-8'
    title == yield :title
    meta name='description' content=yield(:description)
    style { application layout styles }

after signed in layout will be signed.slim

doctype html
html lang=locale
  head
    meta charset='utf-8'
    title == yield :title
    meta name='description' content=yield(:description)
    style { signed layout styles }

result

<style> application layout styles </style>
<style> signed layout styles </style>

Turbolinks not replace but adds second style tag, how can I say Turbolinks that need replace old style tag?

[nateberkopec]

I wonder if there's a way data-turbolinks-track could be modified.

Perhaps a new value like replace could be used. If the element on the old and new page have the same ID, and data-turbolinks-track=replace, then the element from the old page is tossed out.

[Fudoshiki]

setup

1. Gemfile

   ...
   gem 'rails', '~> 5.0'
   gem 'turbolinks', '5.0.1'
   ...

2. app/javascripts/application.js

   // This is a manifest file that'll be compiled into application.js, which will include all the files
   // listed below.
   //
   // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
   // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
   //
   // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
   // compiled file. JavaScript code in this file should be added after the last require_* statement.
   //
   // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
   // about supported directives.
   //
   //= require jquery3
   //= require jquery_ujs
   //= require turbolinks
   //= require_self

3. app/views/layouts/application.slim

   doctype html
   html lang=locale
   head
     meta charset='utf-8'
     title == yield :title
     meta name='description' content=yield(:description)
     = javascript_include_tag :application, integrity: true, async: true, 'data-turbolinks-track': :reload
     link rel='apple-touch-icon' sizes='57x57' href='/apple-touch-icon-57x57.png' data-turbolinks-track='reload'
     link rel='apple-touch-icon' sizes='60x60' href='/apple-touch-icon-60x60.png' data-turbolinks-track='reload'
     link rel='apple-touch-icon' sizes='72x72' href='/apple-touch-icon-72x72.png' data-turbolinks-track='reload'
     link rel='apple-touch-icon' sizes='76x76' href='/apple-touch-icon-76x76.png' data-turbolinks-track='reload'
     link rel='apple-touch-icon' sizes='114x114' href='/apple-touch-icon-114x114.png' data-turbolinks-track='reload'
     link rel='apple-touch-icon' sizes='120x120' href='/apple-touch-icon-120x120.png' data-turbolinks-track='reload'
     link rel='apple-touch-icon' sizes='144x144' href='/apple-touch-icon-144x144.png' data-turbolinks-track='reload'
     link rel='apple-touch-icon' sizes='152x152' href='/apple-touch-icon-152x152.png' data-turbolinks-track='reload'
     link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon-180x180.png' data-turbolinks-track='reload'
     link rel='icon' type='image/png' href='/favicon-16x16.png' sizes='16x16' data-turbolinks-track='reload'
     link rel='icon' type='image/png' href='/favicon-32x32.png' sizes='32x32' data-turbolinks-track='reload'
     link rel='icon' type='image/png' href='/favicon-96x96.png' sizes='96x96' data-turbolinks-track='reload'
     link rel='icon' type='image/png' href='/android-chrome-192x192.png' sizes='192x192' data-turbolinks-track='reload'
     link rel='manifest' href='/manifest.json' data-turbolinks-track='reload'
     link rel='mask-icon' href='/safari-pinned-tab.svg' data-turbolinks-track='reload'
     meta name='msapplication-TileColor' content='#2b5797'
     meta name='msapplication-TileImage' content='/mstile-144x144.png'
     meta name='theme-color' content='#ffffff'
     meta name='viewport' content='width=device-width, minimum-scale=1, initial-scale=1 user-scalable=no'
     = csrf_meta_tags
     css: 
       | some css rules

Related issues

• Duplication elements (style, script tags) if we visit page with other layout and different style, script tags in head https://github.com/turbolinks/turbolinks/issues/187#issue-180483874]

• Case when Rails raising 4** or 500 error with rendering public/(404|422|500).html. This pages have own inline head styles, on back event we got styles from error page to previous

• Favicon calls on each request

  Initial load
  

  After each xhr request with Turbolinks.visit browser also request again favicons from cache
  

Ideas

1. Maybe doesn't copy inline elements from snapshot to new page?
2. Something Duplication inline elements in HEAD #187 (comment), but this doesn't cover case issue 2, maybe create PR in Rails repo to add data-turbolinks-track=replace on public pages?

[simonlehmann]

I am experiencing this issue too. Are there any updates on this? Thanks!

[Kiszko]

What's the solution to this?

[Fudoshiki]

https://github.com/Fudoshiki/turbolinks/commit/2ace88c83d31b8e5cf335c65982ab4ce28df0957

[aried3r]

Hey @Fudoshiki, should this really be closed? It's still an issue and I don't see a PR.
Thanks for posting your solution, though!

[Fudoshiki]

Turbolinks idea is placing common styles in head and per page styles in body #249 (comment)

application.slim

doctype html
html lang=locale
  head
    meta charset='utf-8'
    title == yield :title
    meta name='description' content=yield(:description)
    style { common styles }
  body
    style { page specific }