search

styled-components / vscode-styled-components

Syntax highlighting for styled-components
MIT License
917 stars 118 forks source link

In `.ts` file extensions, there is no color preview. #415

Closed zhenzhenChange closed 1 year ago

zhenzhenChange commented 1 year ago

Describe the bug (including copyable syntax)

In .ts file extensions, there is no color preview.

Screenshot

image

To Reproduce

None.

Expected behavior

Can you add support for .ts? Or can a configuration be opened for users to add it manually?

Build environment (please complete the following information):

Extensions 

adpyke.codesnap
alexiv.vscode-angular2-files
Angular.ng-template
anseki.vscode-color
ardenivanov.svelte-intellisense
bierner.markdown-preview-github-styles
bungcip.better-toml
chrmarti.regex
cweijan.xmind-viewer
DavidAnson.vscode-markdownlint
dbaeumer.vscode-eslint
donjayamanne.githistory
eamodio.gitlens
ElAnandKumar.el-vsc-product-icon-theme
esbenp.prettier-vscode
formulahendry.auto-close-tag
formulahendry.auto-complete-tag
formulahendry.auto-rename-tag
git-emoji.vscode-git-emoji
hangxingliu.vscode-nginx-conf-hint
haskell.haskell
intellsmi.comment-translate
justusadam.language-haskell
kisstkondoros.vscode-gutter-preview
kumar-harsh.graphql-for-vscode
Meowcolm024.runner2
mhutchie.git-graph
mikestead.dotenv
ms-azuretools.vscode-docker
MS-CEINTL.vscode-language-pack-zh-hans
ms-vscode-remote.remote-containers
ms-vscode-remote.remote-wsl
peakchen90.open-html-in-browser
PKief.material-icon-theme
redhat.vscode-yaml
rust-lang.rust-analyzer
shd101wyy.markdown-preview-enhanced
streetsidesoftware.code-spell-checker
styled-components.vscode-styled-components
svelte.svelte-vscode
techer.open-in-browser
tommasov.hosts
tomphilbin.gruvbox-themes
Vue.volar
yzhang.markdown-all-in-one

Additional context

None.

jasonwilliams commented 1 year ago

By default this extension activates on .tsx and .jsx, it's good practise to use styled components in tsx and jsx files so your IDE knows which mode to be in.

If you want to force this extension to be on you'll need to go to the bottom right of your IDE and set TypeScript JSX as your language.

zhenzhenChange commented 1 year ago

I haven't actually switched the .ts file to .tsx mode yet, but there are hints in the .ts file, I mean just the colours without the preview hints.

image

jasonwilliams commented 1 year ago

We cannot do that, because if we do that people would have colour pickers showing up all over the place whenever they reference a colour in a .ts file (even just the word “blue”).

Sadly the only option if you want this feature is to move to .tsx which is what most of our users have done already.

The other alternative is to copy the great work @RJWadley did, which is to detect if you’re within a CSS block and only have the colour picker load there. So taking this https://github.com/styled-components/vscode-styled-components/pull/375/files and applying into the colorpicker provider. Which would require a PR. Then maybe we could relax the rules around .ts usage.

karahbit commented 9 months ago

IntelliJ IDEA is able to provide color previews for styled components in .ts files. I was hoping to do the same in VS Code through this extension, but unfortunately this is still an issue.