{"id":17460974,"url":"https://github.com/hudochenkov/ecsstractor","last_synced_at":"2025-09-26T09:30:39.150Z","repository":{"id":26333788,"uuid":"29782446","full_name":"hudochenkov/ecsstractor","owner":"hudochenkov","description":"Sublime Text plugin for extracting class names from HTML and generate CSS stylesheet for following work.","archived":false,"fork":false,"pushed_at":"2018-01-16T20:14:04.000Z","size":277,"stargazers_count":63,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-18T08:56:12.674Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://packagecontrol.io/packages/eCSStractor","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hudochenkov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-24T16:16:02.000Z","updated_at":"2023-11-04T07:48:21.000Z","dependencies_parsed_at":"2022-07-17T03:00:31.660Z","dependency_job_id":null,"html_url":"https://github.com/hudochenkov/ecsstractor","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hudochenkov%2Fecsstractor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hudochenkov%2Fecsstractor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hudochenkov%2Fecsstractor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hudochenkov%2Fecsstractor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hudochenkov","download_url":"https://codeload.github.com/hudochenkov/ecsstractor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234300357,"owners_count":18810608,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-18T06:40:58.685Z","updated_at":"2025-09-26T09:30:38.855Z","avatar_url":"https://github.com/hudochenkov.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# eCSStractor\n\nSublime Text plugin for extracting class names from HTML and generate CSS stylesheet for following work.\n\nDefault extracting:\n\n![ecss_normal](https://cloud.githubusercontent.com/assets/654597/5896783/5ac44e42-a54c-11e4-8981-75456ac98f0b.gif)\n\nWith BEM nesting:\n\n![ecss_bem](https://cloud.githubusercontent.com/assets/654597/5896785/60708c5c-a54c-11e4-963f-9e00ede168c3.gif)\n\nWith BEM nesting and class names as comments:\n![ecss_bem_comments](https://user-images.githubusercontent.com/654597/35009441-d1de8982-faff-11e7-8281-7d4e85d4dc5a.gif)\n\n## Usage\n\nOpen any document contain HTML and do one of the following:\n\n* Press `Cmd+Shift+X` on Mac OS X or `Ctrl+Shift+X` on Windows/Linux.\n* Go to **Tools → eCSStractor → Run**\n* Right click and select **eCSStractor → Run**\n\nThen you will see new tab with CSS selectors extracted from document.\n\nPlugin can process either selected text or whole file.\n\nYou can explicit **Run (with BEM Nesting)** or **Run (without BEM Nesting)** regardless `bem_nesting` option from Command Palette, Menu or Context Menu.\n\n## Options\n\nThe 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**.\n\n#### brackets\n\nAdd brackets. Useful for Sass syntax and Stylus.\n\n_Default: **true**_\n\n#### brackets_newline_after\n\nAdd new line after open bracket.\n\n_Default: **true**_\n\n#### attributes\n\nHTML node attributes from which class names should be extracted.\n\n_Default: **[\"class\", \"className\"]**_\n\n#### ignore\n\nList of classnames to ignore. Useful for helper classes, that probably already described. Ex., `clearfix`. See **Settings – Default** for example.\n\n_Default: **empty**_\n\n#### ignore_regex\n\nSimilar to `ignore` option, but use [RegEx](https://docs.python.org/3.4/library/re.html#regular-expression-syntax) to ignore. Ex., `^js-` will ingore all classes started with `js-`. See **Settings – Default** for example.\n\n_Default: **empty**_\n\n#### destination\n\nWhere to put result: new tab (`tab`) or copy to clipboard (`clipboard`)\n\n_Default: **tab**_\n\n#### bem_nesting\n\nBEM Nesting. Generate nested stylesheet for preprocessors rather simple stylesheet. See the difference in the [Examples](#examples) section.\n\n_Default: **false**_\n\n### Options only for BEM Nesting is on\n\n#### indentation\n\nIndentation.\n\n_Default: **\\t**_\n\n#### bem.element_separator\n\nSeparator between block and element names.\n\n_Default: ___\n\n#### bem.modifier_separator\n\nSeparator between block or element and they modifier.\n\n_Default: **--**_\n\n#### preprocessor.parent_symbol\n\nParent symbol. Ex.: `\u0026__element {}`\n\n_Default: **\u0026**_\n\n#### empty_line_before_nested_selector\n\nAdd empty line before nested element/modifier.\n\n_Default: **false**_\n\n#### add_comments\n\nGenerate 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](#examples) section.\n\n_Default: **false**_\n\n#### comment_style\n\nComment style shows `CSS` (`/* */`) or `SCSS` (`//`) style comments. Works with `add_comments` enabled.\n\n_Default: **\"CSS\"**_\n\n## Examples\n\nSource:\n\n```html\n\u003cul class=\"nav nav--main\"\u003e\n    \u003cli class=\"nav__item\"\u003e\u003ca href=\"\" class=\"nav__link\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n    \u003cli class=\"nav__item\"\u003e\u003ca href=\"\" class=\"nav__link\"\u003eShop\u003c/a\u003e\u003c/li\u003e\n    \u003cli class=\"nav__item\"\u003e\u003ca href=\"\" class=\"nav__link nav__link--special\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nRun eCSStractor (BEM Nesting is off):\n\n```css\n.nav {\n}\n.nav--main {\n}\n.nav__item {\n}\n.nav__link {\n}\n.nav__link--special {\n}\n```\n\nRun eCSStractor (BEM Nesting is on):\n\n```scss\n.nav {\n    \u0026--main {\n    }\n    \u0026__item {\n    }\n    \u0026__link {\n        \u0026--special {\n        }\n    }\n}\n```\n\nRun eCSStractor (BEM Nesting and Comments are on):\n\n```css\n.nav {\n    /* .nav--main */\n    \u0026--main {\n    }\n    /* .nav__item */\n    \u0026__item {\n    }\n    /* .nav__link */\n    \u0026__link {\n        /* .nav__link--special */\n        \u0026--special {\n        }\n    }\n}\n```\n\nRun eCSStractor (BEM Nesting and Comments are on and comment style is SCSS):\n\n```scss\n.nav {\n    // .nav--main\n    \u0026--main {\n    }\n    // .nav__item\n    \u0026__item {\n    }\n    // .nav__link\n    \u0026__link {\n        // .nav__link--special\n        \u0026--special {\n        }\n    }\n}\n```\n\n# Installation\n\nMost simple way it's install with [Package Control](https://packagecontrol.io/).\n\nOpen the Command Palette `Cmd+Shift+P` (OS X) or `Ctrl+Shift+P` (Linux/Windows) and select “Package Control: Install Package”, then search for `eCSStractor`.\n\n# Similar tool\n\nI've been inspired by [extractCSS](http://extractcss.com/) online tool. This tool have much more functions, but not very convenient for regular use.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhudochenkov%2Fecsstractor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhudochenkov%2Fecsstractor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhudochenkov%2Fecsstractor/lists"}