v2 alpha: extension issues

[andrewbranch]

v2 alpha: extension issues

[andrewbranch]

But yarn add styled-components/vscode-styled-components failed

Fixed at styled-components/vscode-styled-components#203 (hopefully someone merges)

even though the current version of the migration guide says both relative and absolute paths should work

Ah yeah, that was my intention, but I actually couldn’t find anything that Gatsby was passing me that would give me the location of the origin gatsby-config.js ☹️. I forgot to update the migration guide after realizing that, but I also want to poke around the Gatsby Discourse or issue tracker to see if anyone knows something I don’t.

So I pasted the absolute path and now I'm getting the above mentioned TypeError: Cannot read property 'map' of undefined. Any way to proceed here?

From that stack I have a guess. I think the issue is probably triggered by processing a markdown document that has no code blocks on it. I just did a YOLO commit, so a new alpha should be published momentarily if you want to try it out.

Thanks for the early feedback! Great catch!

[janosh]

Hmmm... that's odd. MDX highlighting isn't working when the config is

{
  resolve: `gatsby-remark-vscode`,
  options: { extensions: [`mdx`, `vscode-styled-components`] },
},

but when it's just

  {
    resolve: `gatsby-remark-vscode`,
    options: { extensions: [`mdx`] },
  },

it does work. I just checked again and it was also working with the absolute import from above. So apparently there is a slight difference in behavior depending on the import method. Seems weird but in a way this is still progress. At least the node module import does have an effect in that it breaks something. 😄

Just pushed a new branch with the update to the latest alpha in case you want to check it out.

[andrewbranch]

@janosh I had a couple race condition bugs that only turned up when you have multiple extensions in the array 😱

New alpha is published now.

[andrewbranch]

That commit made line length too long for prettier 😄

[janosh]

Nice! Everything back to working now! My custom styles were gone but since the migration guide already has a helpful section on this that was a breeze to fix.

Btw, great solution to have extensions installed as node modules rather than manually downloading them. Like you said, it puts your dependencies where they really belong: into node_modules where they are version-locked and CI-friendly.

Also, thanks for opening vscode-styled-components#203! I tried fiddling around with the scripts section in their package.json myself during troubleshooting but didn't really know what I was doing.

One more possible bug. It might be that extensions downloaded as VSIX are not actually used. At least, this is what I'm seeing with the alpha

and this is how it's supposed to look

So either I'm doing something wrong or the absolute import of vscode-styled-components has no effect.

  {
    resolve: `gatsby-remark-vscode`,
    options: {
      extensions: [
        `mdx`,
        `/Users/janosh/Projects/janosh.io/src/utils/jpoissonnier.vscode-styled-components-0.0.27.vsix`,
      ],
    },
  },

The yarn-installed MDX extension is definitely working.

[andrewbranch]

Interesting. Can you try setting logLevel: "info" and seeing if any clues appear?

[janosh]

Actually, it has nothing to do with the way the extension is imported. Just successfully installed yarn add styled-components/vscode-styled-components and replaced the absolute VSIX import with the node module. Same problem, no styled components highlighting, so the issue is probably a little deeper than the import.

Adding logLevel: "info" to the GRVSC options, I got:

Logs without `vscode-styled-components`

info Registering grammar 'text.html.markdown.jsx' from
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.scala'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope 'source.dart'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'
info No language file was loaded for scope
info No language file was loaded for scope 'source.c++'
info No language file was loaded for scope
info No language file was loaded for scope 'source.asm'
info No language file was loaded for scope 'source.x86'
info No language file was loaded for scope 'source.x86_64'
info No language file was loaded for scope 'source.arm'
info No language file was loaded for scope
info No language file was loaded for scope 'source.sass'
info No language file was loaded for scope 'source.less'
info No language file was loaded for scope 'source.stylus'

Logs with `vscode-styled-components`

info Registering grammar 'text.html.markdown.jsx' from package mdx with language names: mdx,markdownreact
info Registering grammar 'source.css.styled' from package vscode-styled-components with language names:
info Registering grammar 'styled' from package vscode-styled-components with language names:
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.scala' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.dart' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').
info No language file was loaded for scope 'source.postscript' (requested by 'source.python').
info No language file was loaded for scope 'source.c++' (requested by 'source.python').
info No language file was loaded for scope 'source.js.jquery' (requested by 'source.python').
info No language file was loaded for scope 'source.asm' (requested by 'source.python').
info No language file was loaded for scope 'source.x86' (requested by 'source.python').
info No language file was loaded for scope 'source.x86_64' (requested by 'source.python').
info No language file was loaded for scope 'source.arm' (requested by 'source.python').
info No language file was loaded for scope 'text.html.javadoc' (requested by 'source.python').
info No language file was loaded for scope 'source.sass' (requested by 'source.python').
info No language file was loaded for scope 'source.less' (requested by 'source.python').
info No language file was loaded for scope 'source.stylus' (requested by 'source.python').

warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin
warn Encountered unknown language 'mdx'. If 'mdx' is an alias for a supported language, use the 'languageAliases' plugin

(Second run with a full-screen terminal because the lines don't wrap.)

Is GRVSC somehow not recognizing/marking the code blocks defining styled components such that they are not assigned to vscode-styled-components?

[andrewbranch]

I’m not sure what’s happening. I see the log where it finds the extension’s grammar registration, so it seems like it should be working. Will have to dig into it before launching v2. It’s also odd that I see it registering the MDX grammar under the language name mdx, but later it says it doesn’t know what mdx is. But your MDX code blocks are working ok?

[janosh]

Works perfectly now! 🎉

You can drop the alpha status now as far as I'm concerned. 😄

Just deployed it to production on my site. No issues as far as I can tell.

[andrewbranch]

Awesome! Thanks again for trying it out and giving detailed feedback. Never would have found some of these bugs in tests!