Jekyll 4.0.0 scss Conversion error

[ddmayer]

My Environment

Software	Version(s)
Operating System	macOS 10.14.6
jekyll	4.0.0
ruby	2.6.4

---

Current Behavior

I have front matters in my main.scss, here's the part of the code

---
path: /events/tmu-international-volunteer-class
---

When I run jekyll serve, it returns the error below:

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'events/tmu-international-volunteer-class/assets/css/main.scss':

Error: Invalid CSS after "<": expected 1 selector or at-rule, was '<link rel="styleshe' on line 1:1 of main.scss >> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css ^

This doesn't happen when the front matter is empty.

In jekyll v3.8.6 , there's no this type of error.

[ashmaroli]

I don't think the use of <link href... inside a Sass partial or a CSS file is a valid pattern. Any links to documentation regarding that..?

[DirtyF]

I can reproduce this on a blank jekyll website, the error is triggered when front matter contains /

Trace isn't helpful:

ERROR: YOUR SITE COULD NOT BE BUILT:
                    ------------------------------------
                    Invalid YAML front matter in /Users/frank/code/test-scss-path/assets/css/main.scss

[ashmaroli]

I reproduced this same error by having an empty front matter but having the <link .. tag inserted after the front matter block:

  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/styles.scss':
                    Error: Invalid CSS after "<": expected 1 selector or at-rule, was '<link rel="styleshe' on
line 1:1 of styles.scss >> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css ^

[ddmayer]

@ashmaroli , there's no <link .. tag in the SCSS file.

After a while, I found out the error is triggered when:
"The HTML and the SCSS it links to both have the front matter named "path" with the same value."

I've reproduced the same error, here's the repository:
https://github.com/ddmayer/jekyll_4.0.0_scss_conversion

[DirtyF]

@ddmayer What problem are we trying to solve here? Why do you need to put a path in a Sass file?

[ddmayer]

@DirtyF I have event webpages in the folder 'event'. Every event page has its own assets. I think it would be easier to maintain if I store those assets respectively in each event page folder, like

/my_website/
`-- events
       |-- event_page_1
       |      |-- index.html
       |      `-- assets
       |             |-- css
       |             `-- img
       `-- event_page_2
              |-- index.html
              `-- assets
                     |-- css
                     `-- img

In /my_website/events/event_page_1/assets/css/main.scss, I set "path" in the front matter

---
path: /my_website/events/event_page_1/
---

so that I can refer to the image by something like

background-image: url("{{ page.path }}/assets/img/logo.jpg");

[ashmaroli]

no error if I put path value between quotes:

@DirtyF I don't think that's the issue here. Try quoting the values in the repo below:
https://github.com/ddmayer/jekyll_4.0.0_scss_conversion

[DirtyF]

@ashmaroli yeah, the problem is that they key is called path, if you use something else, it works.

[ashmaroli]

@ddmayer The actual reason behind this issue is the Liquid template caching mechanism incorporated in Jekyll 4.0 and existing Jekyll architecture.

Background

Jekyll allows overriding a Page's path via its front matter:

jekyll/lib/jekyll/page.rb

Lines 142 to 144 in d8de658

	def path
	data.fetch("path") { relative_path }
	end

The caching mechanism caches template content for a given path:

jekyll/lib/jekyll/liquid_renderer/file.rb

Line 13 in d8de658

@renderer.cache[@filename] ||= Liquid::Template.parse(content, :line_numbers => true)

In the second snippet above, @filename evaluates to the same value. This is because of the first snippet above which is called by the snippet below:

jekyll/lib/jekyll/renderer.rb

Line 80 in d8de658

output = render_liquid(output, payload, info, document.path)

Therefore when two Page objects have the same virtual path, problems arise.

Moving on..

• The easiest solution technically is to use a different front matter key for your use-case.
• If that's cumbersome, the alternative is to follow the recommendations in Jekyll 4.0 gets confused about page variables #7811 (comment)

Wish this issue had surfaced while we were still in the beta phase as well.
We could've changed the way a Page's path gets affected via front matter..

---

IMO, the backwards-compatible solution for Jekyll 4.1 would be to introduce a mechanism to disable the Liquid template caching via the config file.

[jekyllbot]

This issue has been automatically marked as stale because it has not been commented on for at least two months.

The resources of the Jekyll team are limited, and so we are asking for your help.

If this is a bug and you can still reproduce this error on the latest 3.x-stable or master branch, please reply with all of the information you have about it in order to keep the issue open.

If this is a feature request, please consider building it first as a plugin. Jekyll 3 introduced hooks which provide convenient access points throughout the Jekyll build pipeline whereby most needs can be fulfilled. If this is something that cannot be built as a plugin, then please provide more information about why in order to keep this issue open.

This issue will automatically be closed in two months if no further activity occurs. Thank you for all your contributions.

[Isaac-Tait]

I am getting a similar error (difference is that my front matter is empty but I am still getting this error). I opened a discussion question at the Jekyll Discussion page. See the link here for a code snippets and error messages, as well as a link to the repo and GitHub Code Space for testing/debugging (I did not want to copy and paste the discussion contents here but if it would be helpful I am happy to do that)

[jekyllbot]

This issue has been automatically marked as stale because it has not been commented on for at least two months.

The resources of the Jekyll team are limited, and so we are asking for your help.

If this is a bug and you can still reproduce this error on the latest 3.x-stable or master/main branch, please reply with all of the information you have about it in order to keep the issue open.

If this is a feature request, please consider building it first as a plugin. Jekyll 3 introduced hooks which provide convenient access points throughout the Jekyll build pipeline whereby most needs can be fulfilled. If this is something that cannot be built as a plugin, then please provide more information about why in order to keep this issue open.

This issue will automatically be closed in two months if no further activity occurs. Thank you for all your contributions.

[oDinZu]

I received a conversion error today with vanilla css framework from Ubuntu.

hydenjekyllorg-jekyll-serve-1  |   Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/main.scss':
hydenjekyllorg-jekyll-serve-1  |                     Error: Invalid CSS after "... $value: math": expected expression (e.g. 1px, bold), was ".div($value, $numbe" on line 96:19 of _scss/libs/vanilla-framework/_global_functions.scss from line 7:1 of _scss/libs/vanilla-framework/_settings.scss from line 1:1 of _scss/libs/vanilla-framework/_vanilla.scss from line 3:1 of _scss/styles.scss from line 1:1 of main.scss >> $value: math.div($value, $number); ------------------^ 
hydenjekyllorg-jekyll-serve-1  | /usr/gem/gems/jekyll-sass-converter-2.2.0/lib/jekyll/converters/scss.rb:200:in `rescue in sass_convert': Error: Invalid CSS after "...   $value: math": expected expression (e.g. 1px, bold), was ".div($value, $numbe" (Jekyll::Converters::Scss::SyntaxError)
hydenjekyllorg-jekyll-serve-1  |         on line 96:19 of _scss/libs/vanilla-framework/_global_functions.scss
hydenjekyllorg-jekyll-serve-1  |         from line 7:1 of _scss/libs/vanilla-framework/_settings.scss
hydenjekyllorg-jekyll-serve-1  |         from line 1:1 of _scss/libs/vanilla-framework/_vanilla.scss
hydenjekyllorg-jekyll-serve-1  |         from line 3:1 of _scss/styles.scss
hydenjekyllorg-jekyll-serve-1  |         from line 1:1 of main.scss
hydenjekyllorg-jekyll-serve-1  | >>       $value: math.div($value, $number);