search

dzhavat / css-flexbox-cheatsheet

VS Code extension that lets you open a CSS Flexbox cheatsheet directly in the editor.
https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet
MIT License
101 stars 12 forks source link

Support Vue Single File Component (SFC) #6

Open atilacamurca opened 4 years ago

atilacamurca commented 4 years ago

Vue Single File Component is a .vue file that has the following syntax:

<template>
  <div>hello</div>
</template>
<script>
export default {}
</script>
<style>
.d-flex {
  display: flex;
}
</style>

So, you need to check for the <style></style> tag and enable the plugin if found.

The <style></style> tag may have an lang attribute that tells the language of the style, that can be scss, stylus or css (the default). Without the lang attribute, the default is used.

dzhavat commented 4 years ago

Hey, thanks for trying the extension!

I just wrote a comment in #5 about a similar request but for styled components.

My idea is to find out how VS Code itself detects CSS and implement something similar but I haven't figured that out yet. :)

Thanks for your suggestion. Will definitely give it a try.

atilacamurca commented 4 years ago

I open a similar request on other VS Code extension (https://github.com/Raathigesh/fabulous/issues/10) and I think this should help you. Here's the PR https://github.com/Raathigesh/fabulous/pull/21

dzhavat commented 4 years ago

Thanks for pointing me to those pages. Will definitely take a look. Hopefully this will help me solve my problem.