Could this plugin support autocomplete in .js or .ts files?

[ticktockreed]

Thanks for the plugin, works great for CSS and preprocessor CSS.

It would be great to have access to CSS vars via autocomplete within .js and .ts files.

How feasible is this?

[phoenisx]

How do u intend to use css variables in JS and TS??

[ticktockreed]

We're using EmotionJS in some projects and Aphrodite in others. So would need access within .js or .ts files.

See example below:

// aphrodite example - moduleStyle.js 

import { StyleSheet } from 'aphrodite/no-important';
export default StyleSheet.create({
  title: {
    color: var(--dp_text)
  },
});

// emotionJS example -  module.style.ts

const primaryButton = (theme: TLTheme) => css`
  background-color: var(--dp_button_primary_background);
  color: var(--dp_text_inverted);
  :hover {
    background-color: var(--dp_button_primary_background_hover);
  }

  :active {
    background-color: var(--dp_button_primary_background_pressed);
  }
`;

[phoenisx]

I understand your concern!

I am building my own extension to support CSS Variables and CSS Module IntelliSense which you can find HERE. It's still in the alpha stage. It works great with plain CSS and other CSS language extensions like SCSS etc.

I tried your scenario in my extension, it works but with a hack. I see VSCode API fails to trigger autocomplete if JS file is opened. I mean, unless a CSS file is opened once the Autocomplete doesn't trigger at all.

Check the below illustration, the IntelliSense triggers but only after you open a CSS or SCSS or a similar file.

I will add this to my TODO list. I was thinking this would be a simple task, but it looks like it needs re-thinking for my extension and also needs re-architecting my whole extension.

You can open an issue (if u want to) HERE

[ticktockreed]

Thanks for looking into this! We have a work around for now, but would certainly be interested if you make any progress on this.

[phoenisx]

I hope this is what you were looking for. I fixed it in my extension 😅 🎉 Thanks for making me aware of this feature 👍🏾

[vunguyentuan]

Thanks for the plugin, works great for CSS and preprocessor CSS.

It would be great to have access to CSS vars via autocomplete within .js and .ts files.

How feasible is this?

Yes it is feasible but it will very annoying to other people because they dont want to get css suggestion on their ts, or js files.

I will try to allow users to decide that files they want to get autocomplete :)

[vunguyentuan]

@ticktockreed this should work now, thanks for the feedback. The new version now supports goto definition and simplifies config or no config.

[karlhorky]

@vunguyentuan would you consider allowing disabling this feature for projects that do not use CSS-in-JS?

For example, adding a new setting called cssVariables.autocompleteInLanguages, default values below:

{
  "cssVariables.autocompleteInLanguages": [
    "css",
    "less",
    "scss",
    "postcss",
    "javascript",
    "javascriptreact",
    "typescriptreact"
  ],
}

Or, if this is based on file extension instead of language in the file, a new setting called cssVariables.autocompleteInFiles, default values:

{
  "cssVariables.autocompleteInFiles": [
    "*.css",
    "*.scss",
    "*.sass",
    "*.less",
    "*.js",
    "*.jsx",
    "*.ts",
    "*.tsx"
  ]
}

Otherwise, the extension fills the autocomplete entries all over the place in JS, JSX, TS and TSX files with useless entries for CSS variables:

[karlhorky]

I can also create a new issue if you would prefer.

[karlhorky]

Opened #58 to track this.