search

mhanberg / jekyll-postcss

A plugin to use PostCSS plugins like Autoprefixer or Tailwind CSS with Jekyll.
MIT License
66 stars 12 forks source link

Frontmatter triggers "undefined method `chomp' " error #19

Closed cilex-ft closed 3 years ago

cilex-ft commented 3 years ago

I can't figure this out.

If Jekyll's assets/main.scss is :

---
---
@import "styles";
@tailwind base;
@tailwind components;
@tailwind utilities;

then I get /gems/gems/jekyll-postcss-0.4.0/lib/jekyll-postcss/socket.rb:28:in `read': undefined method `chomp' for nil:NilClass (NoMethodError) when running bundle exec jekyll serve. To me it looks like that the "---" trigger the error.

Which is consistent with https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports which states "One important thing to note about postcss-import is that it strictly adheres to the CSS spec and disallows @import statements anywhere except at the very top of a file."

However you write in README

Your stylesheets still need to have front matter for them to be processed by Jekyll.

This sounds perfectly reasonable, but seems to trigger the Chomp error.

I tried multiple postcss.config.js, such as : 

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = {
  parser: 'postcss-scss',
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    process.env.NODE_ENV === 'production' ? require('autoprefixer') : null,
    process.env.NODE_ENV === 'production'
      ? cssnano({ preset: 'default' })
      : null,
    purgecss({
      content: ['./layouts/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })//    require("cssnano")({ preset: "default" })
  ]
};

... to no avail.

I'm a seasoned admin, but very new to ruby, gems and npm - so I probably miss something obvious. Having a full install procedure, starting from a npm-free ubuntu, with complete main.scss and postcss.config.js, would be perfect.

mhanberg commented 3 years ago

Does your "styles" css file have front matter?

Do you mind showing the full terminal output when you start the server and this error occurs?

mhanberg commented 3 years ago

What evidence are you seeing that frontmatter is what triggers the error?

cilex-ft commented 3 years ago

Here is the output when starting the server:

Configuration file: /home/xxxx/tech/perso/simple/_config.yml
            Source: /home/xxxx/tech/perso/simple
       Destination: /home/xxxx/tech/perso/simple/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
PostCSS Server listening on port 8124...
       Jekyll Feed: Generating feed for posts
/home/xxxx/tech/perso/simple/node_modules/postcss/lib/processor.js:153
        throw new Error('PostCSS plugin ' + plugin.postcssPlugin + ' requires PostCSS 8.\n' + 'Migration guide for end-users:\n' + 'https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users');
        ^

Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/home/xxxx/tech/perso/simple/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/home/xxxx/tech/perso/simple/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/home/xxxx/tech/perso/simple/node_modules/postcss/lib/postcss.js:55:10)
    at Function.process (/home/xxxx/gems/gems/jekyll-postcss-0.4.0/bin/postcss:9:5)
    at Socket.c.on (/home/xxxx/gems/gems/jekyll-postcss-0.4.0/bin/postcss:21:14)
    at Socket.emit (events.js:198:13)
    at addChunk (_stream_readable.js:288:12)
    at readableAddChunk (_stream_readable.js:269:11)
    at Socket.Readable.push (_stream_readable.js:224:10)
    at TCP.onStreamRead [as onread] (internal/stream_base_commons.js:94:17)
  Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'assets/main.scss':
                    undefined method `chomp' for nil:NilClass
                    ------------------------------------------------
      Jekyll 4.1.1   Please append `--trace` to the `serve` command 
                     for any additional information or backtrace. 
                    ------------------------------------------------
Traceback (most recent call last):
    43: from /home/xxxx/gems/bin/bundle:23:in `<main>'
    42: from /home/xxxx/gems/bin/bundle:23:in `load'
    41: from /home/xxxx/gems/gems/bundler-2.1.4/exe/bundle:34:in `<top (required)>'
    40: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/friendly_errors.rb:123:in `with_friendly_errors'
    39: from /home/xxxx/gems/gems/bundler-2.1.4/exe/bundle:46:in `block in <top (required)>'
    38: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/cli.rb:24:in `start'
    37: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/vendor/thor/lib/thor/base.rb:476:in `start'
    36: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/cli.rb:30:in `dispatch'
    35: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/vendor/thor/lib/thor.rb:399:in `dispatch'
    34: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/vendor/thor/lib/thor/invocation.rb:127:in `invoke_command'
    33: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/vendor/thor/lib/thor/command.rb:27:in `run'
    32: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/cli.rb:476:in `exec'
    31: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/cli/exec.rb:28:in `run'
    30: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/cli/exec.rb:63:in `kernel_load'
    29: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/cli/exec.rb:63:in `load'
    28: from /home/xxxx/gems/bin/jekyll:23:in `<top (required)>'
    27: from /home/xxxx/gems/bin/jekyll:23:in `load'
    26: from /home/xxxx/gems/gems/jekyll-4.1.1/exe/jekyll:15:in `<top (required)>'
    25: from /home/xxxx/gems/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
    24: from /home/xxxx/gems/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
    23: from /home/xxxx/gems/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
    22: from /home/xxxx/gems/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
    21: from /home/xxxx/gems/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
    20: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/commands/serve.rb:86:in `block (2 levels) in init_with_program'
    19: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
    18: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/command.rb:91:in `each'
    17: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
    16: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/commands/build.rb:36:in `process'
    15: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/commands/build.rb:65:in `build'
    14: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/command.rb:28:in `process_site'
    13: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/site.rb:80:in `process'
    12: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/site.rb:208:in `render'
    11: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/site.rb:523:in `render_pages'
    10: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/site.rb:523:in `each'
     9: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/site.rb:524:in `block in render_pages'
     8: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/site.rb:532:in `render_regenerated'
     7: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:63:in `run'
     6: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:84:in `render_document'
     5: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:100:in `convert'
     4: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:100:in `reduce'
     3: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:100:in `each'
     2: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:102:in `block in convert'
     1: from /home/xxxx/gems/gems/jekyll-postcss-0.4.0/lib/jekyll/converters/postcss.rb:41:in `convert'
/home/xxxx/gems/gems/jekyll-postcss-0.4.0/lib/jekyll-postcss/socket.rb:28:in `read': undefined method `chomp' for nil:NilClass (NoMethodError)
Configuration file: /home/xxxx/tech/perso/simple/_config.yml
            Source: /home/xxxx/tech/perso/simple
       Destination: /home/xxxx/tech/perso/simple/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
PostCSS Server listening on port 8124...
       Jekyll Feed: Generating feed for posts
/home/xxxx/tech/perso/simple/node_modules/postcss/lib/processor.js:153
        throw new Error('PostCSS plugin ' + plugin.postcssPlugin + ' requires PostCSS 8.\n' + 'Migration guide for end-users:\n' + 'https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users');
        ^

Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/home/xxxx/tech/perso/simple/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/home/xxxx/tech/perso/simple/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/home/xxxx/tech/perso/simple/node_modules/postcss/lib/postcss.js:55:10)
    at Function.process (/home/xxxx/gems/gems/jekyll-postcss-0.4.0/bin/postcss:9:5)
    at Socket.c.on (/home/xxxx/gems/gems/jekyll-postcss-0.4.0/bin/postcss:21:14)
    at Socket.emit (events.js:198:13)
    at addChunk (_stream_readable.js:288:12)
    at readableAddChunk (_stream_readable.js:269:11)
    at Socket.Readable.push (_stream_readable.js:224:10)
    at TCP.onStreamRead [as onread] (internal/stream_base_commons.js:94:17)
  Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'assets/main.scss':
                    undefined method `chomp' for nil:NilClass
                    ------------------------------------------------
      Jekyll 4.1.1   Please append `--trace` to the `serve` command 
                     for any additional information or backtrace. 
                    ------------------------------------------------
Traceback (most recent call last):
    43: from /home/xxxx/gems/bin/bundle:23:in `<main>'
    42: from /home/xxxx/gems/bin/bundle:23:in `load'
    41: from /home/xxxx/gems/gems/bundler-2.1.4/exe/bundle:34:in `<top (required)>'
    40: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/friendly_errors.rb:123:in `with_friendly_errors'
    39: from /home/xxxx/gems/gems/bundler-2.1.4/exe/bundle:46:in `block in <top (required)>'
    38: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/cli.rb:24:in `start'
    37: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/vendor/thor/lib/thor/base.rb:476:in `start'
    36: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/cli.rb:30:in `dispatch'
    35: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/vendor/thor/lib/thor.rb:399:in `dispatch'
    34: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/vendor/thor/lib/thor/invocation.rb:127:in `invoke_command'
    33: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/vendor/thor/lib/thor/command.rb:27:in `run'
    32: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/cli.rb:476:in `exec'
    31: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/cli/exec.rb:28:in `run'
    30: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/cli/exec.rb:63:in `kernel_load'
    29: from /home/xxxx/gems/gems/bundler-2.1.4/lib/bundler/cli/exec.rb:63:in `load'
    28: from /home/xxxx/gems/bin/jekyll:23:in `<top (required)>'
    27: from /home/xxxx/gems/bin/jekyll:23:in `load'
    26: from /home/xxxx/gems/gems/jekyll-4.1.1/exe/jekyll:15:in `<top (required)>'
    25: from /home/xxxx/gems/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
    24: from /home/xxxx/gems/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
    23: from /home/xxxx/gems/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
    22: from /home/xxxx/gems/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
    21: from /home/xxxx/gems/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
    20: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/commands/serve.rb:86:in `block (2 levels) in init_with_program'
    19: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
    18: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/command.rb:91:in `each'
    17: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
    16: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/commands/build.rb:36:in `process'
    15: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/commands/build.rb:65:in `build'
    14: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/command.rb:28:in `process_site'
    13: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/site.rb:80:in `process'
    12: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/site.rb:208:in `render'
    11: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/site.rb:523:in `render_pages'
    10: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/site.rb:523:in `each'
     9: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/site.rb:524:in `block in render_pages'
     8: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/site.rb:532:in `render_regenerated'
     7: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:63:in `run'
     6: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:84:in `render_document'
     5: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:100:in `convert'
     4: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:100:in `reduce'
     3: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:100:in `each'
     2: from /home/xxxx/gems/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:102:in `block in convert'
     1: from /home/xxxx/gems/gems/jekyll-postcss-0.4.0/lib/jekyll/converters/postcss.rb:41:in `convert'
/home/xxxx/gems/gems/jekyll-postcss-0.4.0/lib/jekyll-postcss/socket.rb:28:in `read': undefined method `chomp' for nil:NilClass (NoMethodError)

and main.scss

xxxx@yyy:~/tech/perso/simple$ cat assets/main.scss 
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@import "styles";
@tailwind base;
@tailwind components;
@tailwind utilities;

It's probably obvious for expert eyes, but I'm just at the bottom of the learning curve right now.

mhanberg commented 3 years ago

Looks like you're seeing a problem with tailwind and postcss.

I suggest looking into that. If you figure that out and are still seeing this error, please report back and I'll reopen the issue.