ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

e​CSStractor

by hudochenkov ST2/ST3

Sublime Text plugin for extracting class names from HTML and generate CSS stylesheet for following work.

Details

Installs

  • Total 3K
  • Win 2K
  • OS X 779
  • Linux 261
Jun 23 Jun 22 Jun 21 Jun 20 Jun 19 Jun 18 Jun 17 Jun 16 Jun 15 Jun 14 Jun 13 Jun 12 Jun 11 Jun 10 Jun 9 Jun 8 Jun 7 Jun 6 Jun 5 Jun 4 Jun 3 Jun 2 Jun 1 May 31 May 30 May 29 May 28 May 27 May 26 May 25 May 24 May 23 May 22 May 21 May 20 May 19 May 18 May 17 May 16 May 15 May 14 May 13 May 12 May 11 May 10 May 9
Windows 0 3 3 2 5 1 3 0 0 4 9 1 4 2 3 1 0 1 1 2 1 1 0 1 0 3 4 2 5 1 3 4 3 6 3 1 1 2 1 2 3 2 3 3 0 4
OS X 0 0 0 2 1 2 1 2 0 0 0 0 1 1 2 1 0 0 0 2 0 0 2 1 0 0 0 0 0 0 0 0 0 2 0 3 0 2 0 1 3 1 0 0 2 0
Linux 0 0 1 0 0 0 1 0 1 0 0 2 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0

Readme

Source
raw.​githubusercontent.​com

eCSStractor

Sublime Text plugin for extracting class names from HTML and generate CSS stylesheet for following work.

Default extracting:

ecss_normal

With BEM nesting:

ecss_bem

With BEM nesting and class names as comments: ecss_bem_comments

Usage

Open any document contain HTML and do one of the following:

  • Press Cmd+Shift+X on Mac OS X or Ctrl+Shift+X on Windows/Linux.
  • Go to Tools → eCSStractor → Run
  • Right click and select eCSStractor → Run

Then you will see new tab with CSS selectors extracted from document.

Plugin can process either selected text or whole file.

You can explicit Run (with BEM Nesting) or Run (without BEM Nesting) regardless bem_nesting option from Command Palette, Menu or Context Menu.

Options

The default settings can be viewed by accessing the Preferences → Package Settings → eCSStractor → Settings – Default menu entry. To ensure settings are not lost when the package is upgraded, make sure all edits are saved to Settings – User.

brackets

Add brackets. Useful for Sass syntax and Stylus.

Default: true

brackets_newline_after

Add new line after open bracket.

Default: true

attributes

HTML node attributes from which class names should be extracted.

Default: [“class”, “className”]

ignore

List of classnames to ignore. Useful for helper classes, that probably already described. Ex., clearfix. See Settings – Default for example.

Default: empty

ignore_regex

Similar to ignore option, but use RegEx to ignore. Ex., ^js- will ingore all classes started with js-. See Settings – Default for example.

Default: empty

destination

Where to put result: new tab (tab) or copy to clipboard (clipboard)

Default: tab

bem_nesting

BEM Nesting. Generate nested stylesheet for preprocessors rather simple stylesheet. See the difference in the Examples section.

Default: false

Options only for BEM Nesting is on

indentation

Indentation.

Default: \t

bem.element_separator

Separator between block and element names.

Default: __

bem.modifier_separator

Separator between block or element and they modifier.

Default:

preprocessor.parent_symbol

Parent symbol. Ex.: &__element {}

Default: &

empty_line_before_nested_selector

Add empty line before nested element/modifier.

Default: false

add_comments

Generate full class names as a comments before nested BEM elements and modifiers. This is useful for finding selectors by class names. See the difference in the Examples section.

Default: false

comment_style

Comment style shows CSS (/* */) or SCSS (//) style comments. Works with add_comments enabled.

Default: “CSS”

Examples

Source:

<ul class="nav nav--main">
    <li class="nav__item"><a href="" class="nav__link">Home</a></li>
    <li class="nav__item"><a href="" class="nav__link">Shop</a></li>
    <li class="nav__item"><a href="" class="nav__link nav__link--special">About</a></li>
</ul>

Run eCSStractor (BEM Nesting is off):

.nav {
}
.nav--main {
}
.nav__item {
}
.nav__link {
}
.nav__link--special {
}

Run eCSStractor (BEM Nesting is on):

.nav {
    &--main {
    }
    &__item {
    }
    &__link {
        &--special {
        }
    }
}

Run eCSStractor (BEM Nesting and Comments are on):

.nav {
    /* .nav--main */
    &--main {
    }
    /* .nav__item */
    &__item {
    }
    /* .nav__link */
    &__link {
        /* .nav__link--special */
        &--special {
        }
    }
}

Run eCSStractor (BEM Nesting and Comments are on and comment style is SCSS):

.nav {
    // .nav--main
    &--main {
    }
    // .nav__item
    &__item {
    }
    // .nav__link
    &__link {
        // .nav__link--special
        &--special {
        }
    }
}

Installation

Most simple way it's install with Package Control.

Open the Command Palette Cmd+Shift+P (OS X) or Ctrl+Shift+P (Linux/Windows) and select “Package Control: Install Package”, then search for eCSStractor.

Similar tool

I've been inspired by extractCSS online tool. This tool have much more functions, but not very convenient for regular use.