kvxymatt / class-extractor Goto Github PK

8.0 1.0 2.0 66 KB

TypeScript 100.00%

class-extractor's Introduction

class-extractor README

Extracts CSS classes from a selection of markup and formats it into a useable list to paste into your CSS/LESS/SASS/whatever. Uses htmlparser2 so should be reasonably good at finding the right stuff.

Install

ext install class-extractor

Usage

Class Extractor adds two commands, Extract CSS classes from HTML and Extract LESS/SCSS BEM classes from HTML. Select some HTML markup, run either command (I recommend mapping your preferred option to something like Ctrl + Alt + X) and the CSS classes are added to your clipboard in the order they appear with no duplicates. The output format by default is [className] { }, however this is configurable in the settings. The LESS/SCSS BEM option will automatically indent.

It's recommended to edit your output format in the JSON settings editor as the VS Code interface doesn't render newlines and will escape backslash characters.

Requirements

Uses the ncp package, may require external dependencies in Linux and macOS.

Development

Fork and clone repository
```
git clone
```
Install dependencies
```
npm install
```
Make changes
Install vsce
```
npm install -g vsce
```
Build
```
vsce package
```
Install on vscode
- Plugins
- Install from VSIX

Future Plans

Proper unit testing & code restructure to allow proper unit testing
Indentation in class structure to match existing markup. Makes BEM work a little better
Automatically indent based on file or workspace preferences
Get indentation working better with incorrect BEM structure
Option for BEM sorting but without nesting classes

Release Notes

1.1.1

Fixed default output format

1.1.0

Rewrote BEM option and allowed for custom output templating

1.0.4

Added BEM option for indented languages like LESS and SCSS thanks to @LuisReinoso

1.0.3

Added some install and usage documentation and fixed dependency vulnerabilities

1.0.1

Many minor fixes. Tags with no attributes, empty classes and things other than tags (script blocks, comments etc...) will now be properly ignored

1.0.0

Initial release

Thanks

Special thanks to ardcore for this Atom plugin from which this extension draws its origins.

class-extractor's People

Contributors

Stargazers

Watchers

Forkers

luisreinoso bekahmcdonald

class-extractor's Issues

Leading dot are added

Hello,
Since the last update the plugin add leading useless dot. Sometie just 1 sometime 2.

See my PHP / HTML Code:

<div class="c-bannerAddress">
  <h3 class="c-bannerAddress__title">Liste des services</h3>
  <div class="c-bannerAddress__media">
    <img class=""
         src="<?= url('assets/img/static/services.png'); ?>"
         srcset="<?= url('assets/img/static/[email protected]'); ?> 2x"
         width="130"
         height="168"
         loading="lazy"
         role="presentation"
         alt="">
  </div>
  <a class="c-bannerAddress__link e-button primary radius" href="#">Consulter la liste</a>
</div>

Sass / Less extract:

..c-bannerAddress {
.	&__title { }
.	&__media { }
.	&__link { }
}
..e-button { }
..primary { }
..radius { }

CSS Extract:

..c-bannerAddress { }
..c-bannerAddress__title { }
..c-bannerAddress__media { }
..c-bannerAddress__link { }
..e-button { }
..primary { }
..radius { }

Carriage return + blank line after the open brace

Hello,
Firstly, thanks for this extension it's so helpful !

It would be nice to put a carriage return after the open brace {, and a blank line. So instead having this:

.c-thumb__cover { }
.c-thumb__header { }
.c-thumb__content { }

We got:

.c-thumb__cover {

}
.c-thumb__header {

}
.c-thumb__content {

}

In that way we're ready to put some styles here.

Thanks!

Some troubles with SCSS extraction.

SCSS have some wrong extraction mechanism, example:
I have HTML code:

<div class="about">
    <div class="about__body">
        <div class="about__header">
            <div class="about__title title">ABOUT
                <div class="about__title subtitle">TEXT</div>
            </div>
            <div class="about__row">
                    <div class="about__column">
                        <div class="item-about">
                            <div class="item-about__icon"><img src="URL IMG" alt="" srcset=""></div>
                            <div class="item-about__title">TITLE NAME</div>
                            <div class="item-about__text">TEXT</div>
                         </div>
                    </div>
            </div>                
        </div>
    </div>
</div>

When SCSS extract:
.about{&__body{}&__header{}&__title{}&__text{}&__row{}&__column{}}.title{}.subtitle{}.item-about{&__icon{}.title{}&__text{}}

How it look in separate lines (can we have this as an option instead of all code in one line?):

.about{
    &__body{}
    &__header{}
    &__title{}
    &__text{}
    &__row{}
    &__column{}
}

.item-about{
    &__icon{}
    &__title{}
    &__text{}
}

.title{}

.subtitle{}

.item-about{
    &__icon{}
.title{}  <-- this is wrong
    &__text{}
}

As you can see, because i had .title before, it create another .title instead of &__title.
Same goes for any line if it have more than 1 class.
CSS example from same HTML:

.about { }
.about__body { }
.about__header { }
.about__title { }
.title { }
.subtitle { }
.about__text { }
.about__row { }
.about__column { }
.item-about { }
.item-about__icon { }
.item-about__title { }
.item-about__text { }