Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error in production mode on RoR 7.0.3.1 with Bootstrap 5.2 #174

Open
Sega100500 opened this issue Aug 4, 2022 · 6 comments
Open

Error in production mode on RoR 7.0.3.1 with Bootstrap 5.2 #174

Sega100500 opened this issue Aug 4, 2022 · 6 comments

Comments

@Sega100500
Copy link

Ruby 3.1.2
Ruby on Rails 7.0.3.1
Third party library: Bootstrap 5.2 ( new version 5.2 released )

With bootstrap 5.1.3 (previous version) all works fine!

app/assets/config/manifest.js :

//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

//= link lib/bootstrap/5.2.0/js/bootstrap.bundle.min.js
//= link lib/bootstrap/5.2.0/js/bootstrap.min.js
//= link lib/bootstrap/5.2.0/css/bootstrap.min.css

in view stylesheets and javascripts are attached via stylesheet_link_tag and javascript_include_tag

config/environments/production.rb :

config.assets.css_compressor = :sass

log/production.log :

I, [2022-08-04T22:18:02.411943 #21004]  INFO -- : [65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] Started GET "/" for 127.0.0.1 at 2022-08-04 22:18:02 +0500
I, [2022-08-04T22:18:02.414687 #21004]  INFO -- : [65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] Processing by ApplicationBaseController#index as HTML
I, [2022-08-04T22:18:02.422122 #21004]  INFO -- : [65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7]   Rendered application_base/index.html.erb within layouts/application (Duration: 0.8ms | Allocations: 318)
I, [2022-08-04T22:18:10.643746 #21004]  INFO -- : [65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7]   Rendered layout layouts/application.html.erb (Duration: 8222.5ms | Allocations: 366884)
I, [2022-08-04T22:18:10.644123 #21004]  INFO -- : [65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] Completed 500 Internal Server Error in 8229ms (ActiveRecord: 0.4ms | Allocations: 368805)
F, [2022-08-04T22:18:10.645185 #21004] FATAL -- : [65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7]   
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] ActionView::Template::Error (Error: Custom property values may not be empty.
        on line 6:68975 of stdin
>> -size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg 
   ------------------------------------------^
):
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7]   
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] stdin:6
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sassc (2.4.0) lib/sassc/engine.rb:50:in `render'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sassc-rails (2.1.2) lib/sassc/rails/compressor.rb:29:in `call'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/sass_compressor.rb:30:in `call'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/processor_utils.rb:84:in `call_processor'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/processor_utils.rb:66:in `block in call_processors'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/processor_utils.rb:65:in `reverse_each'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/processor_utils.rb:65:in `call_processors'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/loader.rb:182:in `load_from_unloaded'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/loader.rb:59:in `block in load'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/loader.rb:337:in `fetch_asset_from_dependency_cache'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/loader.rb:43:in `load'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/cached_environment.rb:44:in `block in load'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/cached_environment.rb:44:in `fetch'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/cached_environment.rb:44:in `load'
[65dc8afa-0db3-4e0c-a7be-1b8fc43f79a7] sprockets (4.1.1) lib/sprockets/bundle.rb:32:in `block in call'

...
@rikkipitt
Copy link

I'm seeing this too on a build I'm trying to deploy to Heroku. Or at least, a variation of it.

@gravitystorm
Copy link

If anyone has a workaround for this, please let me know! At the moment I don't see a clear way forward.

I've spent some time today trying to narrow this down, and I hope that someone will read this testcase and might recognise the problem. The full input line from bootstrap 5.2 is .navbar{--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");} but this can be heavily simplified as I've done below. From my testing, almost all variations work, just not for custom properties with no space after the colon and a non-empty url() function.

require 'sassc'

# An empty url() is fine
data = '.foo { --bar:url() }'
puts SassC::Engine.new(data).render

# A non-empty url() wrapped in interpolation is fine
data = '.foo { --bar:#{url("foo")} }'
puts SassC::Engine.new(data).render

# A non-empty url() with a space beforehand is fine
data = '.foo { --bar: url("foo") }'
puts SassC::Engine.new(data).render

# A non-empty url with no space works for non-custom properties
data = '.foo { bar:url("foo") }'
puts SassC::Engine.new(data).render

# A non-empty url with no space throws an error
data = '.foo { --bar:url("foo") }'
puts SassC::Engine.new(data).render

output:

.foo {
  --bar:url() ; }
.foo {
  --bar:url("foo") ; }
.foo {
  --bar: url("foo") ; }
.foo {
  bar: url("foo"); }
Traceback (most recent call last):
	2: from sass-error.rb:21:in `<main>'
	1: from /var/lib/gems/2.7.0/gems/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'
stdin:1: Error: Custom property values may not be empty. (SassC::SyntaxError)
        on line 1:13 of stdin
>> .foo { --bar:url("foo") }
   ------------^

If anyone recognises this, and can post a link to an issue in sassc-ruby or libsass, that would be useful! Or any workarounds gratefully received.

@Firefishy
Copy link

This worked for me: sass/sassc-ruby#233

@johnnyshields
Copy link

johnnyshields commented Feb 5, 2023

FYI I'm maintaining dartsass-sprockets which is a fork of this gem based on the code which @Firefishy posted. Please try it and see if it works.

@gravitystorm
Copy link

@johnnyshields thanks for your work on dartsass-sprockets! I would happily switch to it, but unfortunately the bootstrap rubygem has a runtime dependency on sassc-rails, and dragging that in leads to namespace conflicts between sassc-rails and dartsass-sprockets. See also twbs/bootstrap-rubygem#255

@gravitystorm
Copy link

If anyone recognises this, and can post a link to an issue in sassc-ruby or libsass, that would be useful! Or any workarounds gratefully received.

I managed to figure out some of the root cause, along with a partial workaround. Based on my initial work, it's only a problem when the space between the : and the url( is missing, i.e. it's only when some compressed output is being re-parsed that the issue is triggered.

In our case, this is because we had a screen.css file with a sprockets-based * =require "common", and a common.scss with a sass-based @import "bootstrap" . This means that sprockets first compiles and compresses bootstrap, then pastes the output into the CSS file, then tries to compress the end result and barfs while parsing the already-compressed bootstrap.

This also explains why it worked fine for me in development, and not in testing/production, since development doesn't compress any of the SCSS files.

The true fix would be to isolate the parsing bug and patch libsass, but I'm not intending to attempt that (and libsass is deprecated anyway, so the effort might be futile). The workaround is to make sure that you a) have your main stylesheet as a .scss file, not .css and b) only use sass-based @import declarations, so that everything is parsed and compressed in one pass.

I hope this helps someone else too, it took me a while to figure out!

gravitystorm added a commit to gravitystorm/openstreetmap-website that referenced this issue Jul 12, 2023
There are two options for combining stylesheets, using sprockets
(via `require` statements) or using sass (via `@import` statements.

This commit switches to using `@import` statements throughout, to
avoid a bug with libsass that prevents us from using bootstrap 5.2+

See sass/sassc-rails#174

Since R2 is not triggered when `@import`ing a file, we need to
switch the top-level stylesheet names to include the extension. We
can also take the opportunity to remove a level of indirection,
along with removing symlinks which cause problems on some platforms.

* openstreetmap#3984
* openstreetmap#3422
gravitystorm added a commit to gravitystorm/openstreetmap-website that referenced this issue Jul 12, 2023
There are two options for combining stylesheets, using sprockets
(via `require` statements) or using sass (via `@import` statements).

This commit switches to using `@import` statements throughout, to
avoid a bug with libsass that prevents us from using bootstrap 5.2+

See sass/sassc-rails#174

Since R2 is not triggered when `@import`ing a file, we need to
switch the top-level stylesheet names to include the extension. We
can also take the opportunity to remove a level of indirection,
along with removing symlinks which cause problems on some platforms.

* openstreetmap#3984
* openstreetmap#3422
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants