eCSStractor
Sublime Text plugin for extracting class names from HTML and generate CSS stylesheet for following work.
Details
Installs
- Total 18K
- Win 15K
- Mac 2K
- Linux 1K
Jul 27 | Jul 26 | Jul 25 | Jul 24 | Jul 23 | Jul 22 | Jul 21 | Jul 20 | Jul 19 | Jul 18 | Jul 17 | Jul 16 | Jul 15 | Jul 14 | Jul 13 | Jul 12 | Jul 11 | Jul 10 | Jul 9 | Jul 8 | Jul 7 | Jul 6 | Jul 5 | Jul 4 | Jul 3 | Jul 2 | Jul 1 | Jun 30 | Jun 29 | Jun 28 | Jun 27 | Jun 26 | Jun 25 | Jun 24 | Jun 23 | Jun 22 | Jun 21 | Jun 20 | Jun 19 | Jun 18 | Jun 17 | Jun 16 | Jun 15 | Jun 14 | Jun 13 | Jun 12 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 0 | 0 | 0 | 1 | 0 | 0 | 2 | 4 | 2 | 0 | 3 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 2 | 2 | 1 | 0 | 1 | 0 | 0 | 1 | 0 | 0 | 0 | 1 | 0 | 2 | 1 | 1 | 1 | 0 | 1 | 2 | 0 | 0 | 0 | 9 | 1 |
Mac | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
Linux | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 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:
With BEM nesting:
With BEM nesting and class names as comments:
Usage
Open any document contain HTML and do one of the following:
- Press
Cmd+Shift+X
on Mac OS X orCtrl+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.