ReferenceError: Can't find variable: URL

[svoop]

I'm using "autoprefixer-rails" via "middleman-autoprefixer" for a Middleman site.

After a forced upgrade from ~9.1 to ~10.0, compiling the stylesheets produces the following error:

ReferenceError: Can't find variable: URL

I've tracked it down to the following line in the stylesheet:

grid-template-columns: repeat(auto-fit, 9em);

Removing it entirely or replacing auto-fit with – say – 3 works fine.

I'm not sure how to further debug this, please let me know if I can provide more useful details.

[albb0920]

Do you have full backtrace of the error?
A minimal project that could reproduce this would also be very helpful.

Thanks

[svoop]

@albb0920 That's just the the thing, I don't see how I can get more context for this error message. Verbose Middleman does not help, how can I make autoprefixer-rails more verbose?

[svoop]

@albb0920 I've breakpointed into the relevant places where AutoprefixerRails (10.2.5.1) is used in the "middleman-autoprefixer" (3.0.0) and extracted the following sample code:

require 'autoprefixer-rails'

processor = ::AutoprefixerRails::Processor.new({
  browsers: ["last 2 versions"],
  add:      true,
  remove:   true,
  grid:     true,
  supports: false,
  flexbox:  false
})

content = "body {\n  background: url(\"/__images/backdrop-f3317875.jpg\") center center/100% 100% no-repeat fixed padding-box content-box #1b2024;\n  color: white;\n  padding: 0 0.2em 1em 0.2em; }\n\na {\n  color: rgba(0, 0, 0, 0); }\n\nh1 {\n  font: bold 3em \"open-sans-condensed\", sans-serif;\n  text-align: center; }\n\n.grid {\n  display: grid;\n  gap: 0.5em;\n  grid-template-columns: repeat(auto-fit, 9em);\n  justify-content: center; }\n\n.card {\n  position: relative;\n  width: 9em;\n  height: 9em;\n  color: white;\n  background-color: rgba(128, 128, 128, 0.8); }\n\n.icon {\n  position: absolute;\n  top: 0.3em;\n  left: 0;\n  width: 100%;\n  margin: auto;\n  font-family: \"fontello\";\n  font-style: normal;\n  font-weight: normal;\n  speak: none;\n  display: inline-block;\n  text-decoration: inherit;\n  text-align: center;\n  font-variant: normal;\n  text-transform: none;\n  font-size: 4em; }\n\n.label {\n  position: absolute;\n  left: 0.4em;\n  bottom: 0.25em;\n  font: 1.2em \"open-sans-condensed\", sans-serif;\n  text-align: left; }\n\n/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAic291cmNlL19fYXNzZXRzL3N0eWxlc2hlZXRzL3NpdGUuY3NzLmNzcyIsCgkic291cmNlcyI6IFsKCQkic291cmNlL19fYXNzZXRzL3N0eWxlc2hlZXRzL3NpdGUuY3NzLnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSJib2R5IHtcbiAgYmFja2dyb3VuZDogdXJsKFwiL19faW1hZ2VzL2JhY2tkcm9wLmpwZ1wiKSBjZW50ZXIgY2VudGVyIC8gMTAwJSAxMDAlIG5vLXJlcGVhdCBmaXhlZCBwYWRkaW5nLWJveCBjb250ZW50LWJveCAjMWIyMDI0O1xuICBjb2xvcjogd2hpdGU7XG4gIHBhZGRpbmc6IDAgMC4yZW0gMWVtIDAuMmVtO1xufVxuXG5hIHtcbiAgY29sb3I6IHJnYmEoIzAwMCwgMCk7XG59XG5cbmgxIHtcbiAgZm9udDogYm9sZCAzZW0gXCJvcGVuLXNhbnMtY29uZGVuc2VkXCIsIHNhbnMtc2VyaWY7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbn1cblxuLmdyaWQge1xuICBkaXNwbGF5OiBncmlkO1xuICBnYXA6IDAuNWVtO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdChhdXRvLWZpdCwgOWVtKTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG59XG5cbi5jYXJkIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB3aWR0aDogOWVtO1xuICBoZWlnaHQ6IDllbTtcbiAgY29sb3I6IHdoaXRlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDEyOCwgMTI4LCAxMjgsIDAuOCk7XG59XG5cbi5pY29uIHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDAuM2VtO1xuICBsZWZ0OiAwO1xuICB3aWR0aDogMTAwJTtcbiAgbWFyZ2luOiBhdXRvO1xuICBmb250LWZhbWlseTogXCJmb250ZWxsb1wiO1xuICBmb250LXN0eWxlOiBub3JtYWw7XG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG4gIHNwZWFrOiBub25lO1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHRleHQtZGVjb3JhdGlvbjogaW5oZXJpdDtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBmb250LXZhcmlhbnQ6IG5vcm1hbDtcbiAgdGV4dC10cmFuc2Zvcm06IG5vbmU7XG4gIGZvbnQtc2l6ZTogNGVtO1xufVxuXG4ubGFiZWwge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6IDAuNGVtO1xuICBib3R0b206IDAuMjVlbTtcbiAgZm9udDogMS4yZW0gXCJvcGVuLXNhbnMtY29uZGVuc2VkXCIsIHNhbnMtc2VyaWY7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG59XG4iCgldLAoJIm5hbWVzIjogW10sCgkibWFwcGluZ3MiOiAiQUFBQSxBQUFBLElBQUksQ0FBQztFQUNILFVBQVUsRUFBRSw2QkFBNkIsQ0FBQyxNQUFNLENBQUMsV0FBYSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxXQUFXLENBQUMsT0FBTztFQUNuSCxLQUFLLEVBQUUsS0FBSztFQUNaLE9BQU8sRUFBRSxpQkFBaUIsR0FDM0I7O0FBRUQsQUFBQSxDQUFDLENBQUM7RUFDQSxLQUFLLEVBQU8sZ0JBQUksR0FDakI7O0FBRUQsQUFBQSxFQUFFLENBQUM7RUFDRCxJQUFJLEVBQUUsMENBQTBDO0VBQ2hELFVBQVUsRUFBRSxNQUFNLEdBQ25COztBQUVELEFBQUEsS0FBSyxDQUFDO0VBQ0osT0FBTyxFQUFFLElBQUk7RUFDYixHQUFHLEVBQUUsS0FBSztFQUNWLHFCQUFxQixFQUFFLHFCQUFxQjtFQUM1QyxlQUFlLEVBQUUsTUFBTSxHQUN4Qjs7QUFFRCxBQUFBLEtBQUssQ0FBQztFQUNKLFFBQVEsRUFBRSxRQUFRO0VBQ2xCLEtBQUssRUFBRSxHQUFHO0VBQ1YsTUFBTSxFQUFFLEdBQUc7RUFDWCxLQUFLLEVBQUUsS0FBSztFQUNaLGdCQUFnQixFQUFFLHdCQUF3QixHQUMzQzs7QUFFRCxBQUFBLEtBQUssQ0FBQztFQUNKLFFBQVEsRUFBRSxRQUFRO0VBQ2xCLEdBQUcsRUFBRSxLQUFLO0VBQ1YsSUFBSSxFQUFFLENBQUM7RUFDUCxLQUFLLEVBQUUsSUFBSTtFQUNYLE1BQU0sRUFBRSxJQUFJO0VBQ1osV0FBVyxFQUFFLFVBQVU7RUFDdkIsVUFBVSxFQUFFLE1BQU07RUFDbEIsV0FBVyxFQUFFLE1BQU07RUFDbkIsS0FBSyxFQUFFLElBQUk7RUFDWCxPQUFPLEVBQUUsWUFBWTtFQUNyQixlQUFlLEVBQUUsT0FBTztFQUN4QixVQUFVLEVBQUUsTUFBTTtFQUNsQixZQUFZLEVBQUUsTUFBTTtFQUNwQixjQUFjLEVBQUUsSUFBSTtFQUNwQixTQUFTLEVBQUUsR0FBRyxHQUNmOztBQUVELEFBQUEsTUFBTSxDQUFDO0VBQ0wsUUFBUSxFQUFFLFFBQVE7RUFDbEIsSUFBSSxFQUFFLEtBQUs7RUFDWCxNQUFNLEVBQUUsTUFBTTtFQUNkLElBQUksRUFBRSx1Q0FBdUM7RUFDN0MsVUFBVSxFQUFFLElBQUksR0FDakIiCn0= */"
path = "site.css"

processor.process(content, path ? { from: path } : {}).css

Running it with Ruby 3.0.2 yields the following:

origin@(execjs):9708:26: ReferenceError: Can't find variable: URL (ExecJS::ProgramError)
	from error@(execjs):9666:31
	from toString@(execjs):7927:31
	from map@[native code]
	from process@(execjs):23696:41
	from (execjs):23715:12
	from (execjs):23720:21
	from (execjs):1:46
	from global code@(execjs):1:58
	from /Users/svoop/.gem/ruby/3.0.2/gems/execjs-2.8.1/lib/execjs/external_runtime.rb:39:in `exec'
	from /Users/svoop/.gem/ruby/3.0.2/gems/execjs-2.8.1/lib/execjs/external_runtime.rb:21:in `eval'
	from /Users/svoop/.gem/ruby/3.0.2/gems/execjs-2.8.1/lib/execjs/external_runtime.rb:46:in `call'
	from /Users/svoop/.gem/ruby/3.0.2/gems/autoprefixer-rails-10.2.5.1/lib/autoprefixer-rails/processor.rb:35:in `process'
	from test.rb:15:in `<main>'

[albb0920]

This is due to URL not available in execjs context, I'll figure out a way to fix this
https://github.com/postcss/postcss/blob/main/lib/input.js#L156

[albb0920]

@svoop Sorry for the long wait, can you try the branch issue-213 and see if it fixes this?

Thanks

[svoop]

@albb0920 Thanks a lot for looking into this!

With the version from the issue-213 branch, I get a different error:

ReferenceError: Can't find variable: BigInt

Using the sample code in my comment above yields the following:

createLongLongConversion@(execjs):9712:59: ReferenceError: Can't find variable: BigInt (ExecJS::ProgramError)
	from (execjs):9774:50
	from createCommonjsModule@(execjs):260:13
	from (execjs):9555:33
	from (execjs):77359:2
	from (execjs):77367:21
	from (execjs):1:46
	from global code@(execjs):1:58
	from /Users/svoop/.gem/ruby/3.0.2/gems/execjs-2.8.1/lib/execjs/external_runtime.rb:39:in `exec'
	from /Users/svoop/.gem/ruby/3.0.2/gems/execjs-2.8.1/lib/execjs/external_runtime.rb:14:in `initialize'
	from /Users/svoop/.gem/ruby/3.0.2/gems/execjs-2.8.1/lib/execjs/runtime.rb:72:in `new'
	from /Users/svoop/.gem/ruby/3.0.2/gems/execjs-2.8.1/lib/execjs/runtime.rb:72:in `compile'
	from /Users/svoop/.gem/ruby/3.0.2/gems/execjs-2.8.1/lib/execjs/module.rb:27:in `compile'
	from /Users/svoop/.gem/ruby/3.0.2/bundler/gems/autoprefixer-rails-ce130381b6e6/lib/autoprefixer-rails/processor.rb:133:in `runtime'
	from /Users/svoop/.gem/ruby/3.0.2/bundler/gems/autoprefixer-rails-ce130381b6e6/lib/autoprefixer-rails/processor.rb:35:in `process'
	from (irb#1):15:in `<main>'

[albb0920]

Hmmm.... What is your ExecJS.runtime after requiring autoprefixer-rails ?

[svoop]

I'm on an aging homebrewed Mac (Mojave, 10.14.6), here you go:

#<ExecJS::ExternalRuntime:0x0000000108e1f718
 @binary=
  "/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc",
 @command=
  ["/System/Library/Frameworks/JavaScriptCore.framework/Versions/Current/Helpers/jsc",
   "/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc"],
 @deprecated=false,
 @encoding=nil,
 @name="JavaScriptCore",
 @popen_options={:internal_encoding=>"UTF-8"},
 @runner_path=
  "/Users/svoop/.gem/ruby/3.0.2/gems/execjs-2.8.1/lib/execjs/support/jsc_runner.js">

[svoop]

Given my Mac kinda growing old (while I wait for the first usable Apple Silicon MacBook), maybe my jsc is too old. But apparently, it comes as part of WebKit which comes as part of Safari... and Safari does still receive regular updates on Mojave. Okay, I'm one release behind (WebKit 611.2.7.1.4) which dates back two or three days (I'm on mobile networks these days, never use Safari and thus deferred the update), but nonetheless, an outdated jsc can't account for this problem apparently.

Should I try another JS runtime instead?

[albb0920]

We only officially support Node and MiniRacer, please give one of them a try.
You can use environment variable EXECJS_RUNTIME to override which runtime to use.
Thanks!

[svoop]

@albb0920 After adding mini_racerto the Gemfile, the version from the issue-213 branch works like a charm, even no need to fiddle with the EXECJS_RUNTIME variable! 🎉 Thanks a lot for fixing this issue! (As far as I can tell, it's a go for merge and rollout.)

[albb0920]

Sorry for the long wait, this is now released with 10.3.1.0

[svoop]

@albb0920 A few days is hardly a "long wait". 😄 Thanks a bunch for your help, the fix and rollout!!