Error Processing SCSS file

Help
1

So I’m picking up a legacy jekyll site that uses postcss and tailwind (1.9.6, I think; OLD). When I attempt to build with JEKYLL_ENV=production, I get an error in my site.scss file that seems to be coming from Ruby, but I can’t find an origin that makes sense to me. If JEKYLL_ENV=development everything runs fine.

My reading indicates that, in production, CSS is purged in the build process. There may be other things that happen there, but I haven’t seen them mentioned anywhere. What I’m struggling to understand is the order of operations and which component (tailwind, postcss, purgecss, or jekyll-sass-converter) does which part and when that component executes.

The error and stack trace only reference Ruby files (gems/sass-3.7.4/lib/sass/scss/parser.rb), but that makes me wonder what happens differently in development mode that wouldn’t trip up the Ruby parser.

  Rendering Markup: css/site.scss
  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/site.scss':
                    Invalid CSS after "...th:16.666667%}}": expected "}", was "" on line 1
jekyll 3.8.7 | Error:  Invalid CSS after "...th:16.666667%}}": expected "}", was "" on line 1

# postcss.config.js
const jekyllEnv = process.env.JEKYLL_ENV || "development";

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss")("./_includes/tailwind.config.js"),
    require("autoprefixer"),
    ...(jekyllEnv != "development"
      ? [
          require("@fullhuman/postcss-purgecss")({
            content: ["!(_site|node_modules)/**/*.+(html|js|md)", "*.html"],
            whitelistPatternsChildren: [/highlight/],
            defaultExtractor: (content) =>
              content.match(/[\w-/:]+(?<!:)/g) || [],
          }),
          require("cssnano")({ preset: "default" }),
        ]
      : []),
  ],
};

If I remove the purgecss require from my postcss config, I get a similar error, but at a different point. I’m not sure what to make of that.

Does anything leap out to anyone here? I have another similar site that works just fine, but I haven’t been able to find a key difference. In looking at site.scss itself, I don’t see any obvious issues and my linter doesn’t highlight any specific problems and, even if it did, I’d still come back to, “why only in production?”.

I’d appreciate any thoughts folks might have to point me in the right direction.

2

Can you run a jekyll build --trace and share the entire contents of the output? Sometimes it looks like the problem is one thing when it could be another, which is why the full output is useful for debugging.

Also, if the website is on a public repo, could you share the link here? Sometimes it is easier for us to debug by simply building it locally and taking a look at the results.

3

Sorry, one more thing. Could you please share the css/site.scss file? If it is just a compilation of other scss files, share the contents of the first one.