Coder Social home page Coder Social logo

gencer / scss-everywhere Goto Github PK

View Code? Open in Web Editor NEW

This project forked from zignd/html-css-class-completion

25.0 1.0 9.0 1.8 MB

A Visual Studio Code extension that provides CSS class and ID atttribute completion with incremental build and usage explorer for the HTML class attribute based on the CSS/Template files in your workspace. Also supports React's className attribute.

Home Page: https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion

License: MIT License

TypeScript 97.39% JavaScript 2.61%

scss-everywhere's Introduction


SCSS Everywhere

VERSION  Rating  Installs  Downloads 

Note: This is drop-in replacement for https://github.com/zignd/HTML-CSS-Class-Completion. Please uninstall that extension before installing this. Otherwise, things can happen.

Find usages:

ID Support:

Features

  • Gives you autocompletion for CSS class definitions that can be found in your workspace (defined in CSS files or the in the file types listed in the Supported Language Modes section)
  • Supports external stylesheets referenced through link elements in HTML files
  • Command to manually re-cache the class definitions used in the autocompletion
  • User Settings to override which folders and files should be considered or excluded from the caching process
  • Incremental build. You do not need to re-cache everytime.
  • Additional Slim, Haml, Smarty, Eex and Svelte template support
  • Both-way SCSS support
  • Separate class and id support Work in progress.
  • Automatically parse all remote stylesheets from HTML, Svelte, Twig, Slim and ERB files.
  • HTML, SCSS, SASS, CSS, Elixir, PHP, Vue, Slim, Haml, Latte and many more

Supported Language Modes

  • HTML
  • Razor
  • PHP
  • Laravel (Blade)
  • JavaScript
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Vue (.vue) [requires octref.vetur]
  • Twig
  • Smarty (.tpl)
  • Slim [requires Slim]
  • Haml [requires HAML or Better Haml extension]
  • Latte [requires Latte extension]
  • Svelte [requires Svelte]
  • Liquid [requires Liquid]
  • Elixir HTML (EEx) and HTML (Eex)
  • Markdown (.md)
  • Embedded Ruby (.html.erb) [requires rebornix.Ruby]
  • Handlebars
  • EJS (.ejs)

Both directions (from CSS/SCSS to HTML, Latte... or from HTML, Latte to CSS/SCSS...) are supported. Only changed parts will be re-indexed so this will give you almost instant auto-completion.

Specific Support

  • "@apply" directive in CSS, SASS and SCSS Files for Tailwind CSS
  • "className" and "class" in TypeScript React, JavaScript and JavaScript React language modes
  • Emmet abbreviations support triggered by typing a "." (comes disabled by default, check the User Settings topic for more information)

Incremental Build

We introduced incremental build. In previous versions we had to re-cache all workspace to reflect our atomic changes. This causes high CPU usage and unnecessary delay to our development time. Hence, we introduced this feature. Once you open your VSCode workspace, initial scan will be made and all upcoming changes will be incrementally and instantly reflected to the cache.

Contributions

You can request new features and contribute to the extension development on its repository on GitHub. Look for an issue you're interested in working on, comment on it to let me know you're working on it and submit your pull request! :D

For SCSS part, I have manually strip comments and do regexp on code. In this way I also able to locate magic methods/classes. For example; If you have .u-pb-{class} this extension will show you .u-pb- and leave it class name filled by you.

Check out the changelog for the current and previous updates.

For more info check CHANGELOG.md

Usage

If there are HTML or JS files on your workspace, the extension automatically starts and looks for CSS class definitions. In case new CSS classes are defined, or new CSS files are added to the workspace, and you also want auto-completion for them, just hit the lightning icon on the status bar. Also, you can execute the command by pressing Ctrl+Shift+P(Cmd+Shift+P for Mac) and then typing "Cache CSS class definitions."

User Settings

The extension supports a few user settings, changes to these settings will be automatically recognized and the caching process will be re-executed.

Folders and Files

You can change the folders and files the extension will consider or exclude during the caching process by setting the following user settings:

  • "html-css-class-completion.includeGlobPattern" (default: "**/*.{css,scss,sass,html}")
  • "html-css-class-completion.excludeGlobPattern" (default: "")
  • "html-css-class-completion.searchRemoteGlobPattern" (default: "")
  • "html-css-class-completion.remoteStyleSheets" (default: [])

Remote Files

  ...
	"html-css-class-completion.remoteStyleSheets": [
		"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
	],
	...

UPDATE: Now it's possible to parse remote stylesheets links from HTML, Smarty, EEX and other HTML-compatible files via meta tags. Just enable searchRemoteGlobPattern and everytime you open workspace, extension will scan and parse those remote files for you.

Example:

{
  ...
  "html-css-class-completion.searchRemoteGlobPattern": "**/*.{svelte,tpl,eex,latte,php,html,twig}",
  ...
}

SCSS Find usage

When we include SCSS files to show usages, IntelliSense can be slow. This is false by default. To enable (you've been warned) set this setting to true and restart (required):

  "html-css-class-completion.enableScssFindUsage": true,

Template usage

When we include Template files to show usages, IntelliSense can be very slow. This is false by default. To enable (you've been warned) set this setting to true and restart (required):

  "html-css-class-completion.enableFindUsage": true,

Emmet

Emmet support comes disabled by default, the reason behind this choice is because it the current implementation simply triggers completion when you type a "." (period) and this behavior might be considered a little annoying, but it might change in the future.

Currently it supports the following languages (those are language identifier): "html", "eex", "latte", "razor", "php", "blade", "vue", "twig", "markdown", "erb", "handlebars", "ejs", "slim", "haml", "typescriptreact", "javascript", "javascriptreact".

  • "html-css-class-completion.enableEmmetSupport" (default: false)

scss-everywhere's People

Contributors

allevaton avatar bypatryk avatar cvharris avatar egamma avatar gencer avatar grunxen avatar m2de avatar m4jing avatar mikekscholz avatar pungggi avatar waqasibrahim avatar zignd avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

ayatkyo deathman92 dylan-erskine did1335 docspring icednet romgerman willstocks mikekscholz

scss-everywhere's Issues

Stopped working in 1.7.1

I downgraded back to 1.5.23 since this extension stopped working in 1.7.1, released yesterday.

With the new version, the lightning icon doesn't appear in the status bar; when opening a workspace, the "cached stylesheets" message DOES briefly appear, though.

I also disabled all other extensions to test.

My settings:

"html-css-class-completion.remoteStyleSheets": [
      "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css",
      "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
    ]

Peek definition and link to class style

Hi,

thanks for huge upgrade since yesterday. I'd like to ask you for some feature. Is it possible to make classes linkable to each scss style? I mean for example in latte:

where is for example span with class label

<span class="label">{label phone}</span>

and what would be great, make a class="label" linkable to style label.scss.

snimek obrazovky 2019-02-13 v 12 03 09

By default auto-completion doesn't work

OS version Windows 7
VSCode version 1.31.0
Extension version 1.2.1

By default auto-completion doesn't work, besides:

  • If I press space it does work and I can type my second class name which is okay
  • If I press ctrl + space it does work but after pressing space and then backspace it doesn't anymore

css

Failed to cache the CSS classes in the workspace for the first time: Failed to cache the class definitions during the iterations over the documents that were found: Failed to parse the documents: Cannot read property 'call' of undefined

Double period insert in a `.slim` file

OS: macOS 10.14.5
VSCode: 1.34.0
Extension: 1.5.14

When I choice suggestion, Double period insert.
I want to insert only one period.
dupulicate_period

Intellisense in class cause, it work fine.
class

Can I fix this by some setting ?

I'm sorry poor English.
Thanks.

Latte & Used locations support?

Could you please add support for Latte template system? Its similar to html or twig).
My config "html-css-class-completion.includeGlobPattern": "**/*.{css,scss,sass,latte,html}", but not working :(

The extension isn't working at all

Issue Type: Bug

The lighening Image isn't showing to indicate that the extention is active. I have uninstalled and installed severally but still not working.

Extension version: 1.5.12
VS Code version: Code 1.31.1 (1b8e8302e405050205e69b59abb3559592bb9e60, 2019-02-12T02:20:54.427Z)
OS version: Windows_NT x64 6.3.9600

System Info
Item Value
CPUs Intel(R) Pentium(R) CPU N3540 @ 2.16GHz (4 x 2167)
GPU Status 2d_canvas: enabled
checker_imaging: disabled_off
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
native_gpu_memory_buffers: disabled_software
rasterization: enabled
surface_synchronization: enabled_on
video_decode: enabled
webgl: enabled
webgl2: enabled
Memory (System) 3.90GB (1.28GB free)
Process Argv
Screen Reader no
VM 0%

[Feature Request] Code assistance in CSS/SCSS files

Dear Gencer, thank you for the excellent work with the html-slim-scss-css-class-completion extension. I was hoping if you could please offer some insight regarding the support for code completion in CSS/SCSS files for class attributes defined in HTML files.

Currently the extension only scans the work-space for class style definitions within CSS/SCSS files.

It does not scan the work-space for class attributes within HTML files. As such, while editing and creating CSS/SCSS files there are no code suggestions offered.

I can see how currently, the code suggestions are helpful in the case of CSS frameworks (such as Bootstrap etc.), when the style-sheets already exist, and one wishes to simply add the available classes to the class attributes in the HTML markup.

It is my understanding, the structure of the HTML document is created first, and only afterwards, are the styles created for the relevant class attributes that exist in the HTML markup. As such, scanning the HTML documents would be very helpful, to allow class name suggestions for use while editing and creating the style-sheets.

I find this to be a severely overlooked feature in Vscode, although it is a common feature which is found in several widely used IDE's such as Netbeans and those by Jetbrains. I was hoping this might be taken into consideration as a feature request since i'm sure many others look forward to this as well.

Thanking you, and best regards

ID selectors are not detected

OS version Windows 7
VSCode version 1.31.0
Extension version 1.2.1

CSS id selectors are not detected and can't be used (auto-completion)

Add configurable html-based language support

I'd like to have class completions within my Django templates (which are basically HTML). I am using another extension for syntax highlight of template parts, but it defines its own language (django-html).

Their docs recommend the following to reenable emmet within the templates:

"emmet.includeLanguages": {
   "django-html": "html"
},

I was hoping you could add something similar, for users to be able to add language identifiers themselves.

html.erb issue?

I have a workspace setting for "html-css-class-completion.includeGlobPattern": "dist/framework.css". that file definitely exists, and the extension seems happy it's indexed everything

image

but no classes ever come up in html.erb files...

Kapture 2019-04-03 at 12 46 18

I'm sure I'm doing something stupid but I can't think what! any ideas? would you expect this to work?

Extension appears to significantly impact VSCode startup time

Hello!

I noticed that my VSCode was launching relatively slowly recently. Upon investigating (F1 -> Startup Performance), it appears that this extension is impacting startup time by around 3s:

Extension Activation Stats

Extension Eager Load Code Call Activate Finish Activate Event
gencer.html-slim-scss-css-class-completion true 1273 2 3740 *

Is there anything I can do about this? Please let me know if there's any other info I can provide 😄

Inconsistent versions

Hi, is it possible to update github version to reflect the one in the market place? My company needs to approve the software, but they can't since the versions are out of sync.

Thanks
Alex

Extension causes NG commands to take an extremely long time to run

I created a new angular 7 CLI application. All was well, it compiled and ran when I used the"ng serve"command from either VS Code's terminal or a Command prompt.

Once the extension was installed (and enabled) running ANY ng commands, i.e. "ng --version", "ng serve" etc takes about 10 minutes to complete.

To replicate create a new Angular app using the command line application, run "ng serve" to compile and run the application before enabling the extension, all should work fine. Enable the extension and run "ng --version" or any other ng command and it will take a very long time to execute.

Extension doesn't detect IDs from css

I have bootstrap 4 remote stylesheet. I set first set this in settings.json
"html-css-class-completion.remoteStyleSheets": [ "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" ]
Although, it seems that some classes isn't working in completion.

Extension causes high cpu load

  • Issue Type: Performance
  • Extension Name: html-slim-scss-css-class-completion
  • Extension Version: 1.5.12
  • OS Version: Windows_NT x64 10.0.17134
  • VSCode version: 1.32.1

Optimalization

After add new class to HTML or CSS plugin run full scan of workspace => my cpu fun is whispering all day.
Pls look at on it and try to make some optimalization.
No need run still new fullscan over the whole project (it should add to new selector or remove from existing cache , i think ...)

Thx!

Failed to cache error popup

Failed to cache the CSS classes in the workspace for the first time: Failed to cache the class definitions during the iterations over the documents that were found: Failed to parse the documents: selectors[className].indexOf is not a function

Small bugs after new release (1.5.3)

At first, speed is fantastic - happiness 👍

I have discovered a few "bugs":

Bugs

  1. Searching in php files does not work (video: http://bit.ly/2UPeYcY)

  2. There is no distinction between id and class (id searching does not work and searching via dot find both), you probably know it, but i dont know if it is in progress or its done and its a bug :-)

  3. Path to file where is located is missing when im looking for a class from another scss file (video: http://bit.ly/2UQETkz)

  4. Im loading scss version of twitter bootstrap in version 3 in main.scss (its a core scss file of project), i never see classes from bootstrap :( (http://bit.ly/2UN2e6C) some classes are probably found (but without path info, see previous point, and some classes are not found - eg: .btn-primary - dont understand this behavior.

  5. When is some class together with other and i want to put from suggestion list i get all of them (video: http://bit.ly/2UQFnXV) (this point has a low priority , maybe makes a sense - i dont know)

Thx mate.

Support for generated classes in SCSS

Would it be possible to support auto-completion of classes generated by SCSS as in this example?

$colors:(
    main: #FAEEBA,
    secondary: #FEAABE
)

@each $colorName, $colorValue in $colors {
  .text-#{$colorName}{
    color: $colorValue;
  }
}

This will generate classes text-main and text-secondary, which the extension would need to cache and auto-complete.

Is this possible?

FEATURE: Automatically detect remote style sheets

As the title suggests, I would like that this extension can suggest classes in a file that is referencing a remote style sheet without requiring me to add it to the html-css-class-completion.remoteStyleSheets property.

Would that be possible? Thanks.

Scan for CSS classes in workplace freezes at 99.xx%

Reported this here: zignd#154

This is still happening
image

Idea: Maybe this is a caching problem because some are still available?
image

Idea 2: Could it help to ignore node_modules?

Log when it froze:

console.ts:134 [Extension Host] Looking for parseable documents...
console.ts:134 [Extension Host] Found all parseable documents.
console.ts:134 [Extension Host] Parsing documents and looking for CSS class definitions...

After window reload (solves it 50% of time):

console.ts:134 [Extension Host] Looking for parseable documents...
console.ts:134 [Extension Host] Found all parseable documents.
console.ts:134 [Extension Host] Parsing documents and looking for CSS class definitions...
console.ts:134 [Extension Host] Summary:
console.ts:134 [Extension Host]% 2641 parseable documents found
console.ts:134 [Extension Host]% 179736 CSS class definitions found
console.ts:134 [Extension Host]% 4538 unique CSS class definitions found
console.ts:134 [Extension Host]% 3 failed attempts to parse. List of the documents:
console.ts:134 [Extension Host]
project/app/node_modules/angular-ui-bootstrap/src/tooltip/docs/demo.html
project/app/bower_components/angulartics/samples/inspectlet.html
project/app/node_modules/angulartics/samples/inspectlet.html

Its more stable than the old plugin but not rocket super duper stable 😄

More info:

HTML-CSS-Class-Completion still installed? Nope, but switched

Project has 100+ SCSS files

improve performance on scss find usages

Primary reason for slow performance is that we also cache usages in SCSS files. If we exclude them it is instant.

I will try to provide an option for this.

Option provided. Related option is enableScssFindUsage. Find more info in README.md

Classes do not appear if the class or id tag is autocompleted with some snippet

For example, if I use the autocomplete of the class tag, it automatically puts me as follows: class = "", with the cursor inside the quotes, but if I start to write inside the quotes the name of the class does not appear, but if I simply move the cursor to the cursor to the right or to any other place and place it back inside the quotation marks and start writing again if the classes appear. Please I hope that this is fixed and that the extension shows the classes even if an autocomplete or snippet is used.

I hope you understood me.

Extension autocompletes weird "class" strings in html, js and css

Extension Version: 1.2.0
OS Version: MacOS Mojave x64 v10.14.2
VSCode version: 1.30.2

First of all thanks for the awesome extension, it is (was?) a must have for me. Unfortunately, I can't use it now because it's keep autosuggesting me some weird classes and even ugly js expressions from out of nowhere.

Tried with all extensions disabled, manually recaching, in html/css/jsx files — issue persists. Disabling the plugin obviously removes the issue.

Here's how it looks like:

screencast 2019-01-09 09-58-59

[Question] Does excludeGlobPattern respect files.exclude?

Hello,
I noticed there's an excludeGlobPattern which is defaulted to node_modules however I'm unclear on how to format this for other folders that need to be excluded. Is it comma separated, space separated, declared as an array in settings.json?

Also, does excludeGlobPattern respect the existing defined files.exclude patterns that have been defined?

Most other exclude or ignoresettings have an "add item" button and add a line per item, which then appears to be stored as an array. But in this case it appears to be a single line (I'm assuming comma separated?)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.