Comments (10)
Thanks for looking into this! We have a work around for now, but would certainly be interested if you make any progress on this.
from vscode-css-variables.
How do u intend to use css variables in JS and TS??
from vscode-css-variables.
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);
}
`;
from vscode-css-variables.
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
from vscode-css-variables.
I hope this is what you were looking for. I fixed it in my extension 😅 🎉
Thanks for making me aware of this feature 👍🏾
from vscode-css-variables.
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 :)
from vscode-css-variables.
@ticktockreed this should work now, thanks for the feedback.
The new version now supports goto definition and simplifies config or no config.
from vscode-css-variables.
@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:
from vscode-css-variables.
I can also create a new issue if you would prefer.
from vscode-css-variables.
Opened #58 to track this.
from vscode-css-variables.
Related Issues (20)
- Support for Color Functional Notation
- Setting to Disable .js / .ts Autocomplete? HOT 8
- How to debug this extension in vscode? HOT 1
- [Bug] should only show css variables suggestion in style block for vue file HOT 1
- Allow CDN links in lookupFiles list HOT 1
- Ctrl + click for references doesn't work properly when extension is enabled
- [Bug] Accepting autocomplete is problematic in daily use HOT 1
- It is not working in *.styl file
- Preview colors for node_module
- Server crashed 5 times!!! HOT 1
- How to add yarn berry packages into cssVariables.lookupFiles list?
- Any settings to insert CSS variable name without `var()`? HOT 2
- lookupFiles not work with workspace folder HOT 1
- color preview is not rendered HOT 1
- Adds extra hyphens when starting by typing hyphens HOT 2
- Warn if not defined
- No suggestion if try to re-define css variable
- Add ability to add variables that are not in any css files as they'll be generated at run time
- sass预设不同的主题
- [Bug] Extension crashes when getting permission denied
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vscode-css-variables.