ifwu/vscode-styled-jsx

Visual Studio Code syntax highlighting for styled-jsx

⚠️ This repository is no longer actively maintained, since I no longer have a requirement for react and styled-jsx and I am unable to commit time to maintaining it. If you're interested in taking over, please let me know.

vscode-styled-jsx

Syntax highlighting for styled-jsx

Syntaxes files are inspired by vscode-styled-components Uses the CSS grammar from the Atom language-babel.

Plan

• Add support for css attributes autocomplete
• Add support for classNames autocomplete
• fix too many interpolation includes in partterns

vscode-styled-jsx's Issues

Uncorrect warning "Do not use empty rulesets"

As the title saied, but it's actually not empty.

can't make it work

Hi!

I'm having serious trouble making this extension work for me. After installing it simply does nothing.
I've tried it with every other extension disabled and still not working.
Could someone help me to debug this issue? I'm seriously missing that syntax highlighting.
VS Code Version: 1.25.1
And I use 'Javascript' as language mode.

Repo is unmaintained: Better maintained repo

As @iFwu said in the top of the README.md file :

⚠️ This repository is no longer actively maintained, since I no longer have a requirement for react and styled-jsx and I am unable to commit time to maintaining it. If you're interested in taking over, please let me know.

Since there is not so much activity since then, I decided to take care of this VS Code extension and will try my best to maintain it, available there: https://github.com/Divlo/vscode-styled-jsx.

Add support for preprocessed CSS languages

styled-jsx supports plugins which allows for the use of multiple different languages (Stylus, Sass, PostCSS, etc.)

It would be cool to support multiple languages out of the box and be able to specify the language used in a project-specific configuration.

Doesn't syntax highlight when css.global`...` is used

The plugin doesn't do any syntax highlighting for either of these files:

/* @flow */

import css from 'styled-jsx/css';

export default css.global`
  foo {
    color: red;
  }
`;

/* @flow */

import {global} from 'styled-jsx/css';

export default global`
  foo {
    color: red;
  }
`;

It correctly syntax highlights if css`...` is used.

Syntax highlighting does not work

Using latest released version at this time.

Here's what it looks like:

I don't really have much more I can say about this, except that it was working not too long ago :/

Cmd+/ comment shortcut support

Would it be possible to support the comment shortcut (Cmd+/)?

Example: color: white; becomes {/*color: white;*/} instead of /*color: white;*/ when pressing Cmd+/

Some syntax causes broken highlight.

Incorrect highlighting of dashed values

vscode-styled-jsx incorrectly highlights any values with dashes in them, including CSS vars

Add support for css attributes autocomplete

Hi @iFwu ! Do you have any date for this plan https://github.com/iFwu/vscode-styled-jsx#plan ?

Thanks!

Which theme is being used in the screenshot in the README

Not working when putting template literals on their own line

When opening the template literals at the same line as the opening <style jsx> tag everything works fine:

but after running Prettier it moves the JSX expression with the template literal to a new line and the highlighting stops working:

Thanks for your work on this plugin.

Seems to turn off when using `global`

See screenshots - with global prop - doesn't highlight:

Without - works:

I'm guessing this is a parsing issue in the plugin, but I'm not familiar enough with vscode plugins to know where to start looking to send a PR (sorry).

Dynamic value syntax improve.

Syntax highlighting breaks when jsx is explicitly set to `true`

We recently changed out project to require explicit values for boolean props and now the great highlighting this plugin provides doesnt work. Looking at the source it seems its a matter of extending this line to account for <style jsx={true}> but could be completely mistaken?

Add support for resolve

Resolve uses a different syntax and is also useful for those who use babel macros (such as create-react-app users).

import React from 'react'
import { resolve } from 'styled-jsx/macro'

const { className, styles } = resolve`main {
  margin-left: 64px;
  padding: 16px;
}`
export default ({ children }) => (
  <main className={className}>
    {children}
    {styles}
  </main>
)

No longer working

I'm not sure why but this extension has stopped working for me recently. I've done nothing other than upgrade VS Code to the latest version (currently v1.28.2). And I've tried reinstalling vscode-styled-jsx, but no luck.

Am I doing anything obviously wrong here?

I really miss the syntax highlighting and intellisense :/