Blows up with CSS Grid Layout

[jdsutherland]

When the CSS file contains named grid lines, the following stack trace occurs:

/Users/j/.config/nvim/plugged/bracey.vim/server/cssfile.js:15
        var rules = this.parsed.stylesheet.rules;
                                ^

TypeError: Cannot read property 'stylesheet' of undefined
    at CssFile.selectorFromPosition (/Users/j/.config/nvim/plugged/bracey.vim/server/cssfile.js:15:26)
    at Server.handleEditorCommand (/Users/j/.config/nvim/plugged/bracey.vim/server/server.js:187:28)
    at Server.parseEditorRequest (/Users/j/.config/nvim/plugged/bracey.vim/server/server.js:97:7)
    at IncomingMessage.<anonymous> (/Users/j/.config/nvim/plugged/bracey.vim/server/server.js:65:9)
    at IncomingMessage.emit (events.js:314:20)
    at endReadableNT (_stream_readable.js:1244:12)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)

named grid line syntax:

grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];

It looks like this is probably a bug with the css parser dependency:

bracey.vim/server/cssfile.js

Line 59 in e47352a

this.parsed = cssparser.parse(source);

[jdsutherland]

Looking at this a bit more, I'm not sure exactly what is causing it to blow up but it seems very likely related to grid; I suspect the css parser hasn't been updated to support it.

[mirsella]

i don't know if this is included in "named grid line" but this make it blow up too :

:root {
  --primary: #F7CCCC;
  --second: #F12B6B;
  /* etc */ 
}

i hope it can be fixed soon :)

[mirsella]

I tried to put my statement in an <style> element directly in the index.html and it works, but not in the .css.
I'll put it here while I'm using Bracey and deleting it after.

[jdsutherland]

@mirsella your issue isn't related to grid but what both probably have in common is that they're newer CSS additions. It looks like bracey and the css parser library were mostly built prior to 2015, so it's not surprising that new CSS features are causing issues.

One way to fix the issue might be to swap out the current css parser (looks dead) for https://github.com/postcss/postcss.

[mirsella]

i've found this project which will replace bracey for me. can even be install as vim module with Plug etc pretty easily.

I know you deleted it from your comments, but what the live reloading feature modern framework have ? like vuejs reactjs etc can have live reload which reload the whole html file so with support for CSS js etc ?

[jdsutherland]

@mirsella I replaced the css parser with postcss. postcss supports CSS3+ features that the old css parser didn't. There is an additional issue, however; csslint is used to detect errors and it doesn't support some newer features, notably CSS3 variables. So even though postcss works, csslint causes bracey to show false positives.

csslint is dead and isn't likely to be updated (see CSSLint/csslint#720).
stylelint might be an alternative–I briefly tried swapping it out but couldn't get it working. My workaround is to just remove csslint and avoid having bracey display errors–I'm using CoC with CSS LS, so it's redundant.

You can try using the branch postcss-and-remove-csslint at https://github.com/jdsutherland/bracey.vim if interested. If you do check it out, let me know if you have any issues.

[mirsella]

waw gg. when you mentioned that it was the css parser not up to date, I tried to fork it with another one but didn't understand the code. the logic was overwhelming, I'll go look our fork :)
I'm using live-server now, but thanks.

[turbio]

reopening, since linting also needs to be fixed to handle modern css.