Jekyll front matter breaks CSS parser

[colejd]

In Jekyll, your CSS file must start with front matter, like so:

---
---

This is needed to get Jekyll to move the file into your build folder.

If you compile this, you get this error: Error: ENOENT: no such file or directory, stat 'stdin'. This was a problem specific to my repo. the actual error is:

Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'assets/css/main.css':
                    767: unexpected token at ''

Anyone have any idea how to get around this? This isn't an issue if you're not using the JIT.

[adamwathan]

Hmm I'm surprised this would work without the JIT — that's not valid CSS and even the regular version of Tailwind requires a valid CSS file to parse.

Can you provide a reproduction of it working without JIT and not working with?

[colejd]

I had a basic misunderstanding. By removing the front matter, I was excluding the whole file from being processed.

I'll link an example anyway, because there's another underlying issue. This PR on my own website's repo adds a minimal implementation of the JIT. The front matter in question is located at assets/css/main.css.

It actually looks like the problem occurs when I import Tailwind, i.e.:

@import "tailwindcss/base";
@import "tailwindcss/components";

That leads to this error:

Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'assets/css/main.css':
                    767: unexpected token at ''

I suppose this means that it's not really an issue with the JIT, but it's strange that it doesn't happen if I just use regular Tailwind.

[colejd]

Narrowing it down... this seems to be an error caused by using postcss-import before the JIT. If you disable the import in postcss.config.js, the JIT works.

I think this means that the JIT doesn't like it when Tailwind's CSS has been inlined before being run through the JIT.

[colejd]

Interestingly, if you remove postcss-import and try to use Tailwind's @tailwind syntax for imports, you get the same error as above. You don't get it if you use the equivalent @import "tailwindcss/<something>"; syntax, although I think that's happening because final CSS still has the raw @import, meaning it's looking for Tailwind at runtime and not finding it.

So really it seems that the JIT just doesn't like it when Tailwind is inlined in my CSS, and that may or may not be caused by the front matter breaking the parser.

[leevigraham]

@colejd

If you compile this, you get this error: Error: ENOENT: no such file or directory, stat 'stdin'

What was causing that error… I get the same one in my snowpack setup.

[colejd]

@colejd

If you compile this, you get this error: Error: ENOENT: no such file or directory, stat 'stdin'

What was causing that error… I get the same one in my snowpack setup.

Basically, my build-and-watch setup was hiding errors that were happening in the build part of the process. If you run a single build, it'll probably tell you the actual error @leevigraham

[adamwathan]

Sounds like this is resolved (I think?), so going to close 👍 If there is still a problem here you think we can look at/fix please open a new issue that includes a minimal reproduction and we can definitely look at it.