* Added setting for SCSS-style grouping (&__element) and possibility to

* change the grouping token (&)
* Added possibility to set output tokens before/after declarations
* (enables SASS-like indented style output)
* Removed classless elements from the output (caused more confusion than
* good)
* JSX support (dumb, just looking for className attribute as a fallback
* for class)
* Refactored a bit

Author: ardcore

CHANGELOG.md

@@ -1,2 +1,8 @@
+## 0.2.2 - More configuration
+* Added setting for SCSS-style grouping (&__element) and possibility to change the grouping token (&)
+* Added possibility to set output tokens before/after declarations (enables SASS-like indented style output)
+* Removed classless elements from the output (caused more confusion than good)
+* JSX support (dumb, just looking for className attribute as a fallback for class)
+
 ## 0.1.0 - First Release
 * Initial version

README.md

@@ -2,29 +2,103 @@
 
 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 (turned on by default)
- - Indents with 2 spaces
- - Made primarily to simplify working with BEM methodology
+ - Supports CSS, SCSS, Sass, LESS and possibly other syntaxes
+ - BEM support (actually, more like a *BE* support for now. Modifiers support will be added if needed)
+ - Configurable nesting, grouping and formatting
+ - "Supports" JSX (recognizes the `className` attribute)
+ - Is *forgiving* (meaning it should work even with invalid HTML code)
 
 # demo
 
 ![atom html to css](http://dracul.kill.pl/~ard/htmltocss.gif)
 
+# settings
+
+## BEM grouping
+key: `html-to-css.bem-group`, type: `boolean`, default: `false`
+
+Should BEM-style declarations be grouped and nested in a SCSS-style?
+
+When *true*:
+
+    <section class="introduction">
+      <h1 class="introduction__header"></h1>
+      <p class="introduction__text"></p>
+    </section>
+
+&darr;
+
+    .introduction {
+
+    	&__header {
+
+    	}
+
+    	&__text {
+
+    	}
+
+    }
+
+When *false*, the same HTML code becomes:
+
+    .introduction {
+
+    }
+
+    .introduction__header {
+
+    }
+
+    .introduction__text {
+
+    }
+
+## BEM separator token
+key: `html-to-css.bem-separator`, type: `string`, default: `__`
+
+Character(s) used as a BLOCK*__*ELEMENT separator in BEM.
+
+## rulelist open token
+key: `html-to-css.rulelist-open`, type: `string`, default: ` {\n\n`
+
+Character(s) to output when opening rulelists (including whitespaces)
+
+## rulelist close token
+key: `html-to-css.rulelist-close`, type: `string`, default: `}\n\n`
+
+Character(s) to output when opening rulelists (including whitespaces)
+
+You can change them to fine-tune the output format to your own liking. Just remove `{` and `}` to support SASS-like indented syntax.
+
+## Grouping character
+key: `html-to-css.grouping-character`, type: `string`, default: `&`
+
+Character(s) to be used in output when referring to the parent element while nesting declarations SCSS-style.
+
 # key bindings
 
-To avoid conflicts and promote peace, this package doesn't register any keys by default. Do it
-yourself, or just paste in `~/.atom/keymap.cson` the following lines:
+To 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`:
 
     'atom-text-editor':
       'alt-x': 'html-to-css:generate'
 
-It'll try to register `alt-x` key shortcut.
+It'll try to register <kbd>alt</kbd>+<kbd>x</kbd> key shortcut.
+
+# indentation
+
+`\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.
+
+# parsing
+
+due to the forgiving nature of the excellent [htmlparser2](https://github.com/fb55/htmlparser2) used under the hood, this plugin is able to deal with:
+ * incomplete selections (wouldn't it be faster if you could select opening tags only? well, you can)
+ * not-really-valid-HTML-code (JSX, anyone?)
+ * general mess (really. you can hit <kbd>cmd</kbd>+<kbd>a</kbd> in this markdown file and it'll still parse the few HTML lines from the code sample)
 
 # TODO
 
- - extend it with different transformers/formatters as settings.
+ - ~extend it with different transformers/formatters as settings.~
 
  Contributions welcomed.

lib/formatter.js

@@ -1,11 +1,22 @@
+'use babel';
+
+function applyWhitespace(str) {
+  return str.replace(/\\n/g, "\n").replace(/\\t/g, "\t");
+}
+
 function saveElement(css, el) {
-  css = css + "." + el.name + " {\n\n";
+  const RULELIST_OPEN = applyWhitespace(atom.config.get('html-to-css.rulelist-open'));
+  const RULELIST_CLOSE = applyWhitespace(atom.config.get('html-to-css.rulelist-close'));
+  const GROUPING_CHAR = applyWhitespace(atom.config.get('html-to-css.grouping-character'));
+
+  css = css + `.${el.name}${RULELIST_OPEN}`;
   if (el.children && el.children.length) {
     el.children.map((ch) => {
-      css = css + "\t" + ch + " {\n\n\t}\n";
+      const name = ch.name.replace(el.name, GROUPING_CHAR);
+      css = css + `\t${name}${RULELIST_OPEN}\t${RULELIST_CLOSE}`;
     });
   }
-  css = css + "}\n\n";
+  css = css + RULELIST_CLOSE;
   return css;
 }
 

lib/grouper.js

@@ -0,0 +1,26 @@
+'use babel';
+
+import partial from 'partial-any';
+
+const isBlock = (separator, str) => str.indexOf(separator) === -1;
+
+function notInTheTree(needle, pile) {
+  return needle.name !== pile.name && pile.children.every(partial(notInTheTree, needle));
+}
+
+exports.group = function(json) {
+  const _isBlock = partial(isBlock, atom.config.get('html-to-css.bem-separator'));
+  let list = json
+    .filter((candidate) => _isBlock(candidate.name))
+    .map((block) => {
+      block.children = block.children.concat(json
+        .filter((candidate) => !_isBlock(candidate.name))
+        .filter((element) => element.name.startsWith(block.name)))
+        return block;
+    });
+
+  return list.concat(json
+    .filter((el) => {
+      return list.every(partial(notInTheTree, el));
+    }));
+}

lib/html-to-css.js

@@ -4,15 +4,42 @@ import htmlparser from 'htmlparser2';
 import { CompositeDisposable } from 'atom';
 import { transform } from './transformer';
 import { format } from './formatter';
+import { group } from './grouper';
 
 export default {
 
   config: {
-    "nest-classless": {
+    "bem-group": {
+      "title": "BEM grouping",
       "type": "boolean",
-      "default": true,
-      "description": "Nest first-child classless elements (.someClass { p {} }})"
-    }
+      "default": false,
+      "description": "Nest & group BEM components (.block { &__element })"
+    },
+    "bem-separator": {
+      "title": "BEM separator token",
+      "type": "string",
+      "default": "__",
+      "description": "Character(s) to separate BEM block from element (BLOCK__ELEMENT)"
+    },
+    "rulelist-open": {
+      "title": "Rulelist open token",
+      "type": "string",
+      "default": " {\\n\\n",
+      "description": "Character(s) to output when opening rulelists (including whitespaces)"
+    },
+    "rulelist-close": {
+      "title": "Rulelist close token",
+      "type": "string",
+      "default": "}\\n\\n",
+      "description": "Character(s) to output when closing rulelists (including whitespaces)"
+    },
+    "grouping-character": {
+      "title": "Grouping token",
+      "type": "string",
+      "default": "&",
+      "description": "Character(s) to output when grouping nested definitions"
+    },
+
   },
 
   subscriptions: null,
@@ -36,7 +63,10 @@ export default {
     const editor = pane.getActiveEditor();
     const text = editor.getSelectedText();
     const htmlJson = htmlparser.parseDOM(text);
-    const preparedJson = transform(htmlJson);
+    let preparedJson = transform(htmlJson);
+    if (atom.config.get('html-to-css.bem-group')) {
+      preparedJson = group(preparedJson);
+    }
     const css = format(preparedJson);
     if (css) {
       atom.clipboard.write(css);

lib/transformer.js

@@ -1,38 +1,28 @@
+'use babel';
+
+import partial from 'partial-any';
+
 function parseArray(arr, tree) {
-  return arr.map((el) => {
-    parseNode(tree, el);
-  });
+  return arr.map(partial(parseNode, tree));
 }
 
 function splitClasses(classNames) {
   return classNames.split(" ");
 }
 
-function storeElement(store, className, obj) {
-
+function storeElement(store, className) {
   const ret = {
-    name: className
+    name: className,
+    children: []
   };
-
-  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.attribs.class || node.attribs.classname) {
+      const classes = splitClasses(node.attribs.class || node.attribs.classname);
+      classes.map(partial(storeElement, store));
     }
     if (node.children.length) {
       return parseArray(node.children, store);

package.json

@@ -19,6 +19,7 @@
     "atom": ">=1.0.0 <2.0.0"
   },
   "dependencies": {
-    "htmlparser2": "^3.9.0"
+    "htmlparser2": "^3.9.0",
+    "partial-any": "0.0.2"
   }
 }