{"id":20236525,"url":"https://github.com/ardcore/atom-html-to-css","last_synced_at":"2025-04-10T19:05:35.326Z","repository":{"id":139696975,"uuid":"57419193","full_name":"ardcore/atom-html-to-css","owner":"ardcore","description":"atom.io plugin: generate css from html structure","archived":false,"fork":false,"pushed_at":"2017-07-09T19:58:55.000Z","size":12,"stargazers_count":21,"open_issues_count":4,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T16:46:38.282Z","etag":null,"topics":["atom-html","atom-package","frontend-webdevelopment","javascript"],"latest_commit_sha":null,"homepage":"https://atom.io/packages/html-to-css","language":"JavaScript","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/ardcore.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-04-29T23:43:29.000Z","updated_at":"2023-04-15T21:37:30.000Z","dependencies_parsed_at":"2024-11-14T08:22:22.435Z","dependency_job_id":null,"html_url":"https://github.com/ardcore/atom-html-to-css","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ardcore%2Fatom-html-to-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ardcore%2Fatom-html-to-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ardcore%2Fatom-html-to-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ardcore%2Fatom-html-to-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ardcore","download_url":"https://codeload.github.com/ardcore/atom-html-to-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248279195,"owners_count":21077406,"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":["atom-html","atom-package","frontend-webdevelopment","javascript"],"created_at":"2024-11-14T08:21:29.289Z","updated_at":"2025-04-10T19:05:35.315Z","avatar_url":"https://github.com/ardcore.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# atom html-to-css package\n\nGenerates CSS boilerplate based on the selected HTML.\n\n - Only cares about classes, ignores id's/other possible selectors\n - Supports CSS, SCSS, Sass, LESS and possibly other syntaxes\n - BEM support (actually, more like a *BE* support for now. Modifiers support will be added if needed)\n - Configurable nesting, grouping and formatting\n - \"Supports\" JSX (recognizes the `className` attribute)\n - Is *forgiving* (meaning it should work even with invalid HTML code)\n\n# demo\n\n![atom html to css](http://dracul.kill.pl/~ard/htmltocss.gif)\n\n# settings\n\n## BEM grouping\nkey: `html-to-css.bem-group`, type: `boolean`, default: `false`\n\nShould BEM-style declarations be grouped and nested in a SCSS-style?\n\nWhen *true*:\n\n    \u003csection class=\"introduction\"\u003e\n      \u003ch1 class=\"introduction__header\"\u003e\u003c/h1\u003e\n      \u003cp class=\"introduction__text\"\u003e\u003c/p\u003e\n    \u003c/section\u003e\n\n\u0026darr;\n\n    .introduction {\n\n    \t\u0026__header {\n\n    \t}\n\n    \t\u0026__text {\n\n    \t}\n\n    }\n\nWhen *false*, the same HTML code becomes:\n\n    .introduction {\n\n    }\n\n    .introduction__header {\n\n    }\n\n    .introduction__text {\n\n    }\n\n## BEM separator token\nkey: `html-to-css.bem-separator`, type: `string`, default: `__`\n\nCharacter(s) used as a BLOCK*__*ELEMENT separator in BEM.\n\n## rulelist open token\nkey: `html-to-css.rulelist-open`, type: `string`, default: ` {\\n\\n`\n\nCharacter(s) to output when opening rulelists (including whitespaces)\n\n## rulelist close token\nkey: `html-to-css.rulelist-close`, type: `string`, default: `}\\n\\n`\n\nCharacter(s) to output when opening rulelists (including whitespaces)\n\nYou can change them to fine-tune the output format to your own liking. Just remove `{` and `}` to support SASS-like indented syntax.\n\n## Grouping character\nkey: `html-to-css.grouping-character`, type: `string`, default: `\u0026`\n\nCharacter(s) to be used in output when referring to the parent element while nesting declarations SCSS-style.\n\n# key bindings\n\nTo avoid conflicts and promote peace, this package doesn't register any keys by default. Do it yourself, or just paste the following lines in `~/.atom/keymap.cson`:\n\n    'atom-text-editor':\n      'alt-x': 'html-to-css:generate'\n\nIt'll try to register \u003ckbd\u003ealt\u003c/kbd\u003e+\u003ckbd\u003ex\u003c/kbd\u003e key shortcut.\n\n# indentation\n\n`\\t` is used to indent, but Atom seems to be clever enough to convert it to your default style when pasting. Let me know if it's not doing that.\n\n# parsing\n\ndue to the forgiving nature of the excellent [htmlparser2](https://github.com/fb55/htmlparser2) used under the hood, this plugin is able to deal with:\n * incomplete selections (wouldn't it be faster if you could select opening tags only? well, you can)\n * not-really-valid-HTML-code (JSX, anyone?)\n * general mess (really. you can hit \u003ckbd\u003ecmd\u003c/kbd\u003e+\u003ckbd\u003ea\u003c/kbd\u003e in this markdown file and it'll still parse the few HTML lines from the code sample)\n\n# TODO\n\n - ~extend it with different transformers/formatters as settings.~\n\n Contributions welcomed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fardcore%2Fatom-html-to-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fardcore%2Fatom-html-to-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fardcore%2Fatom-html-to-css/lists"}