SCSS generation broken in Jekyll 4.0

[lah7]

Hi, I was testing an update to Jekyll 4.0 but found this plugin causes Jekyll to generate invalid CSS files from SCSS files. Luckily, i18n pages and variables appear to be working as expected.

For example, if the project has SCSS includes inside _scss and assets/example.scss contains:

---
---
@import "example1.scss";
@import "example2.scss";

After updating the bundle, the output for example.css becomes something like this:

{
	"version": 3,
	"file": "example.css",
	"sources": [
		"example1.scss",
		"example2.scss"
	],
	"sourcesContent": [
              ...
	],
	"names": [],
	"mappings":  "....."
}

Disabling the plugin allows SCSS to generate as expected.

I'm unfamiliar with Ruby, but I would guess it's due to these changes new in 4.0:

• https://jekyllrb.com/docs/upgrading/3-to-4/#for-plugin-authors

I see from this project's README that only 3.0 is currently supported, but it would be grand if 4.0 works too, it's an excellent i18n plugin! :+1: Thanks in advance.

[untra]

Heya @lah7 👋

Thanks for the feedback! I haven't been working in the Ruby/Jekyll space for awhile; I put this plugin together back when Jekyll 3 was the new hotness. I'm a little short on time these days, but these are good clues for getting proper Jekyll 4 support in.

I do just need to take a weekend and refamiliarize myself with the Jekyll ecosystem, and the changes they've made to the page generation. I've also wanted to adjust the entire approach on how the site-pages are generated so this plugin can (hopefully 🤞) get whitelisted for use in gh-pages sites, but thats a different batch of work as well.

Thanks again for the support! Lemme know how else I can help. Cheers

[untra]

it occurs to me: wouldn't you want your _scss and other stylesheets listed in the exclude_from_localization? Files and directories listed there wont be localized.

not sure you mentioned if you used that.

[lah7]

Thanks - I did forget to mention that my _config.yml is ignoring those folders:

exclude_from_localization: [
    "assets",
    "images"
]

Adding _scss to the list yields the same results.

So, even though the plugin doesn't generate files like /fr/assets/xxx.css, the one and only assets/xxx.css produces the JSON like the above while the plugin is enabled.

---

Turns out it happens without @imports from the _scss folder too. Simple SCSS can reproduce it - such as putting in assets/test.scss:

body {
    background: red;
    
    p {
        color: white;
    }
}

The output _site/assets/test.css becomes:

{
	"version": 3,
	"file": "test.css",
	"sources": [
		"test.scss"
	],
	"sourcesContent": [
		"body {\n    background: red;\n    \n    p {\n        color: white;\n    }\n}\n\n"
	],
	"names": [],
	"mappings": "AAAA,AAAA,IAAI,CAAC,EACD,UAAU,EAAE,GAAG,GAKlB;;AAND,AAGI,IAHA,CAGA,CAAC,CAAC,EACE,KAAK,EAAE,KAAK,GACf"
}

[tshchik]

I face the same situation as @lah7 . Seems the scss file doesn't get processed?

[cmcnicholas]

I have the same issue, the output of the css files becomes the css sourcemap, disabling this plugin and everything works.

[lah7]

Found a workaround - add this to _config.yml - this disables the generation of CSS source maps and the CSS is generated again:

sass:
    sourcemap: never

(Thanks for the hint @cmcnicholas, I didn't realise the output is the CSS sourcemap)

[cmcnicholas]

Ace, I can go with this for now, would be nice if it didn't interfere as we are due a css rewrite end of the year and sourcemaps are very useful 😂 but I can cope for now. Cheers for feeding back

[karrirasinmaki]

@lah7 you can also enable line comments. It generates CSS files with comments above style declarations pointing back to sass files.

sass:
  sourcemap: 'never'
  line_comments: true

Example output CSS excerpt:

/* line 362, ../feeling-responsive/_sass/_03_settings_mixins_media_queries.scss */
meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:120.063em)/";
  width: 120.063em; }

/* line 367, ../feeling-responsive/_sass/_03_settings_mixins_media_queries.scss */
meta.foundation-data-attribute-namespace {
  font-family: false; }

[rizkysyaiful]

@lah7 workaround is working well here. That'd be nice if @untra update the installation tutorial on readme.md until it get fixed.

[joeacarstairs]

Update: the workaround seems to only work for Jekyll <=4.2. From Jekyll 4.3.0, setting sass: sourcemap: never leads to a FrozenError on my machine.

[tusharj9]

Is there any workaround for this? Got stuck on this FrozenError .

[ameaninglessname]

I also encountered this issue when upgrade my site from jekyll-theme-chirpy 5.6.2 to jekyll-theme-chirpy 5.6.2.

I got the error, the site could be opened though, with a wrong style:

Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    d:/Users/PC/Documents/Web/UserName.github.io/_site/assets/css/style.css
                     - assets/css/style.scss
                     - assets/css/style.css.map

And if I do this as suggested above:

sass:
  sourcemap: 'never'

I got the FrozenError:

/Ruby32-x64/lib/ruby/gems/3.2.0/gems/jekyll-polyglot-1.5.1/lib/jekyll/polyglot/patches/jekyll/site.rb:235:in `gsub!': can't modify frozen String: "/*!\n * Chirpy v6.0.1 (https://github.com/cotes2020/jekyll-theme-chirpy)\n * © 2019 Cotes Chung\n * MIT Licensed\n */#search-results a,h5,h4,h3,h2,h1{color:var(--heading-color);font-weight:400;font-family:Lato,\"Microsoft Yahei\",sans-serif}#core-wrapper h5,#core-wrapper h4,#core-wrapper h3,#core-wrapper h2{margin-top:2.5rem;margin-bottom:1.25rem}#core-wrapper h5:focus,#core-wrapper h4:focus,#core-wrapper h3:focus,#core-wrapper h2:focus{outline:none}h5 .anchor,h4 .anchor,h3 .anchor,h2 ...

[grzegorz-jakubiak]

The workaround doesn't work for: jekyll (4.3.2) and jekyll-sass-converter (2.2.0) (locked to this version because https://github.com/helaili/jekyll-action/issues/150)

My _config.yml

# ployglot
languages: ['en', 'de', 'fr']
default_lang: 'en'
exclude_from_localization: ['assets', 'images', 'public']
parallel_localization: true

sass:
  sourcemap: never
  line_comments: true

Configuration file: /Users/grzegorzjakubiak/Documents/Projects/blog/_config.yml
            Source: /Users/grzegorzjakubiak/Documents/Projects/blog
       Destination: /Users/grzegorzjakubiak/Documents/Projects/blog/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
       Jekyll Feed: Generating feed for posts
       Jekyll Feed: Generating feed for posts
       Jekyll Feed: Generating feed for posts
          Conflict: The following destination is shared by multiple files.
                    The written file may end up with unexpected contents.
                    /Users/grzegorzjakubiak/Documents/Projects/blog/_site/assets/css/pixyll.css
                     - assets/css/pixyll.scss
                     - assets/css/pixyll.css.map

[aturret]

Is there any workaround for this? Got stuck on this FrozenError .

I'm not familiar with Ruby. So I asked ChatGPT and followed its instruction to replace doc.output.gsub! to doc.output.gsub for the last four functions of site.rb.

It works for me now. But I'm not sure if it's the right way to resolve this.

[aturret]

@tusharj9 @Sycamost I tried to fix the frozen string issue and have made a pull request. Please feel free to try my temporary solution.

[untra]

can someone who uses scss test with the recently deployed jekyll-polyglot-1.6.0 gem, and confirm they're no longer seeing the FrozenError thrown when toggling sass: sourcemap: never?

[ameaninglessname]

can someone who uses scss test with the recently deployed jekyll-polyglot-1.6.0 gem, and confirm they're no longer seeing the FrozenError thrown when toggling sass: sourcemap: never?

After using the cmd bundle update to update polyglot to 1.6.0, I can build my site without problems, thanks!

[untra]

Glad to hear it! I'm closing this issue as fixed then 👍

[tusharj9]

yeah worked for me as well. Thanks for the quick turn around.