initial commit

Author: ardcore

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+npm-debug.log
+node_modules

CHANGELOG.md

@@ -0,0 +1,2 @@
+## 0.1.0 - First Release
+* Initial version

LICENSE.md

@@ -0,0 +1,20 @@
+Copyright (c) 2016 <Your name here>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,16 @@
+# atom html-to-css package
+
+Generates CSS boilerplate based on the selected HTML.
+
+Early & opinionated version:
+ - Only cares about classes, ignores id's/other possible selectors
+ - Outputs flat CSS structure
+ - ... with optional classless first-child element nesting
+ - Indents with 2 spaces
+ - Made primarily to simplify working with BEM methodology
+
+# demo
+
+![atom html to css](http://dracul.kill.pl/~ard/htmltocss.gif)
+
+Future: I'll extend it with different transformers/formatters as settings. Contributions welcomed.

lib/formatter.js

@@ -0,0 +1,15 @@
+function saveElement(css, el) {
+ css = css + "." + el.name + " {\n\n";
+ if (el.children && el.children.length) {
+ el.children.map((ch) => {
+ css = css + "\t" + ch + " {\n\n\t}\n";
+ });
+ }
+ css = css + "}\n\n";
+ return css;
+}
+
+exports.format = function(json) {
+ const css = "";
+ return json.reduce(saveElement, css);
+}

lib/html-to-css.js

@@ -0,0 +1,48 @@
+'use babel';
+
+import htmlparser from 'htmlparser2';
+import { CompositeDisposable } from 'atom';
+import { transform } from './transformer';
+import { format } from './formatter';
+
+export default {
+
+ config: {
+ "nest-classless": {
+ "type": "boolean",
+ "default": true,
+ "description": "Nest first-child classless elements (.someClass { p {} }})"
+ }
+ },
+
+ subscriptions: null,
+
+ activate(state) {
+ this.subscriptions = new CompositeDisposable();
+ this.subscriptions.add(atom.commands.add('atom-workspace', {
+ 'html-to-css:generate': () => this.generate()
+ }));
+ },
+
+ deactivate() {
+ this.subscriptions.dispose();
+ },
+
+ serialize() {
+ },
+
+ generate() {
+ const pane = atom.workspace.getActivePane();
+ const editor = pane.getActiveEditor();
+ const text = editor.getSelectedText();
+ const htmlJson = htmlparser.parseDOM(text);
+ const preparedJson = transform(htmlJson);
+ const css = format(preparedJson);
+ if (css) {
+ atom.clipboard.write(css);
+ atom.notifications.addSuccess('CSS boilerplate copied to clipboard.');
+ } else {
+ atom.notifications.addError('Parsing failed');
+ }
+ }
+};

lib/transformer.js

@@ -0,0 +1,48 @@
+function parseArray(arr, tree) {
+ return arr.map((el) => {
+ parseNode(tree, el);
+ });
+}
+
+function splitClasses(classNames) {
+ return classNames.split(" ");
+}
+
+function storeElement(store, className, obj) {
+
+ const ret = {
+ name: className
+ };
+
+ let val = false;
+ if (obj.children && atom.config.get('html-to-css.nest-classless')) {
+ val = obj.children.filter((el) => {
+ return el.type === 'tag' && !el.attribs.class
+ }).reduce((acc, cur) => {
+ return [cur.name, ...acc];
+ }, []);
+ ret.children = [ ...new Set(val) ];
+ }
+ if (!store.find((el) => el.name === ret.name)) store.push(ret);
+}
+
+function parseNode(store, node) {
+ if (node.type !== 'tag') return;
+ if (node.attribs.class) {
+ const classes = splitClasses(node.attribs.class);
+ classes.map((className) => {
+ storeElement(store, className, node);
+ });
+ }
+ if (node.children.length) {
+ return parseArray(node.children, store);
+ } else {
+ return store;
+ }
+}
+
+exports.transform = function(json) {
+ const store = [];
+ parseArray(json, store);
+ return store;
+}

menus/html-to-css.json

@@ -0,0 +1,26 @@
+{
+ "context-menu": {
+ "atom-text-editor": [
+ {
+ "label": "HTML-to-CSS: Generate",
+ "command": "html-to-css:generate"
+ }
+ ]
+ },
+ "menu": [
+ {
+ "label": "Packages",
+ "submenu": [
+ {
+ "label": "html-to-css",
+ "submenu": [
+ {
+ "label": "Generate",
+ "command": "html-to-css:generate"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+}

package.json

@@ -0,0 +1,19 @@
+{
+ "name": "html-to-css",
+ "main": "./lib/html-to-css",
+ "version": "0.0.0",
+ "description": "A short description of your package",
+ "keywords": [],
+ "author": "Szymon Pilkowski <szymon.pilkowski@gmail.com>",
+ "activationCommands": {
+ "atom-workspace": "html-to-css:generate"
+ },
+ "repository": "https://github.com/ardcore/atom-html-to-css",
+ "license": "MIT",
+ "engines": {
+ "atom": ">=1.0.0 <2.0.0"
+ },
+ "dependencies": {
+ "htmlparser2": "^3.9.0"
+ }
+}