Merge pull request #108 from yahoo/refactor

Descendent selectors, pseudo selectors, and overhaul of configuration format

bin/atomizer

@@ -13,47 +13,52 @@ process.title = 'atomizer';
 var path = require('path');
 var fs = require('fs');
 var chalk = require('chalk');
-var atomizer = require('../src/atomizer');
-var utils = require('../src/lib/utils');
+var Atomizer = require('../src/atomizer');
 var _ = require('lodash');
 var content = '';
 var config = {}; 
-var parsedConfig = {};
-var recursive = false;
+var classnames = [];
 
 var params = require('minimist')(process.argv.slice(2), { 
-    "boolean": ['rtl', 'help', 'verbose', 'R' ],
+    "boolean": ['rtl', 'help', 'verbose', 'R'],
     "string": ['n']
 });
 
-function parseFiles (files, dir) {
+var atomizer = new Atomizer({ verbose: !!params.verbose });
+
+function parseFiles (files, recursive, dir) {
     var classNames = [];
 
     for (var i=0, iLen=files.length; i < iLen; i++) {
-        classNames = _.union(classNames, parseFile(files[i], dir));
+        classNames = _.union(classNames, parseFile(files[i], recursive, dir));
     }
 
     return classNames;
 }
 
-function parseFile (file, dir) {
+function parseFile (file, recursive, dir) {
     var classNames = [],
         fileContents,
-        filepath = dir ? path.resolve(dir, file) : path.resolve(file),
-        relative = path.relative(process.cwd(), filepath),
+        filepath,
+        relative,
+        stat;
+
+    if (file) {
+        filepath = dir ? path.resolve(dir, file) : path.resolve(file);
+        relative = path.relative(process.cwd(), filepath);
         stat = fs.statSync(filepath);
 
-    if (stat.isFile()) {
-        console.warn('Parsing file ' + chalk.cyan(relative) + ' for Atomic CSS classes');
-        fileContents = fs.readFileSync(filepath, {encoding: 'utf-8'});
-        classNames = atomizer.parse(fileContents);
-    } else if (stat.isDirectory()) {
-        if (!dir || dir && recursive) {
-            console.warn('Inspecting directory ' + chalk.cyan(path.relative(process.cwd(), filepath)));
-            classNames = parseFiles(fs.readdirSync(filepath), filepath);
+        if (stat.isFile()) {
+            console.warn('Parsing file ' + chalk.cyan(relative) + ' for Atomic CSS classes');
+            fileContents = fs.readFileSync(filepath, {encoding: 'utf-8'});
+            classNames = atomizer.findClassNames(fileContents);
+        } else if (stat.isDirectory()) {
+            if (!dir || dir && recursive) {
+                console.warn('Inspecting directory ' + chalk.cyan(path.relative(process.cwd(), filepath)));
+                classNames = parseFiles(fs.readdirSync(filepath), filepath);
+            }
         }
     }
-
     return classNames;
 }
 
@@ -94,16 +99,14 @@ if (configFile) {
 // Generate config from parsed src files
 var filesToParse = params._ || [];
 if (filesToParse.length) {
-    // Recursive parsing?
-    recursive = !!params.R;
-    parsedConfig = atomizer.getConfig(parseFiles(filesToParse), config, !!params.verbose);
+    classnames = parseFiles(filesToParse, !!params.R);
 }
 
-// Merge the static config with the generated config
-config = _.merge(parsedConfig, config, utils.handleMergeArrays);
+// Finalize the config
+config = atomizer.getConfig(classnames, config);
 
 // Create the CSS
-content = atomizer.createCSS(config, options);
+content = atomizer.getCss(config, options);
 
 // Output the CSS
 var outfile = params.o || params.outfile;

examples/basic-config.js

@@ -1,13 +1,42 @@
 module.exports = {
-    // pattern
-    'display': {
-        'b': true
+    'custom': {
+        uh: '79px',
+        primary: '#f6a1e1',
+        l: '$START',
+        r: '$END'
     },
-
-    // pattern
-    'border-top': {
-        custom: [
-            {suffix: '1', values: ['1px solid #ccc']}
-        ]
-    }
+    breakPoints: {
+        'sm': '@media(min-width:500px)',
+        'md': '@media(min-width:900px)',
+        'lg': '@media(min-width:1200px)'
+    },
+    'classNames': [
+        // normal
+        'Td-u',
+        'Td-u:h',
+        'Td-u--sm',
+        // custom
+        'foo>W-uh',
+        'H-uh',
+        'C-primary',
+        // rtl
+        'Fl-start',
+        'Fl-end',
+        'Fl-l',
+        'Fl-r',
+        // more lengthy then the previous one
+        'W-1/12',
+        'W-2/12',
+        'W-3/12',
+        'W-4/12',
+        'W-5/12',
+        'W-6/12',
+        'W-7/12',
+        'W-8/12',
+        'W-9/12',
+        'W-10/12',
+        'W-11/12',
+        'W-12/12',
+        'W-1/12--sm'
+    ]
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "atomizer",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-beta.2",
   "description": "A tool for creating Atomic CSS, a collection of single purpose styling units for maximum reuse",
   "main": "./lib/atomic.js",
   "contributors": [
@@ -31,16 +31,17 @@
     "absurd": "~0.3.34",
     "minimist": "~1.1.0",
     "chalk": "~1.0.0",
-    "lodash": "~3.5.0"
+    "lodash": "~3.5.0",
+    "xregexp": "^2.0.0"
   },
   "devDependencies": {
-    "mocha": "~2.2.0",
     "chai": "~2.1.0",
-    "sinon": "~1.13.0",
-    "sinon-chai": "~2.7.0",
+    "coveralls": "~2.11.2",
     "istanbul": "~0.3.5",
     "jshint": "~2.6.0",
-    "coveralls": "~2.11.2"
+    "mocha": "~2.2.0",
+    "sinon": "~1.13.0",
+    "sinon-chai": "~2.7.0"
   },
   "repository": {
     "type": "git",

src/atomizer-ts.js

@@ -0,0 +1,61 @@
+/**
+ * Future refactor with Atomizer with type declarations.
+ * Not using TypeScript until 1.5 officially comes out,
+ * so we can write as close to ES6 as possible (including modules).
+ * For now, we just declare the interfance and class to serve as
+ * our implementation contract.
+ */
+var Atomizer = (function () {
+    function Atomizer(rules, options) {
+        this.rules = rules;
+        this.verbose = options && options.verbose || false;
+    }
+    Atomizer.prototype.findClassNames = function (src) {
+        return [];
+    };
+    Atomizer.prototype.getCss = function (classNames, config, options) {
+        return;
+    };
+    Atomizer.prototype.parseClassNames = function (classNames, config) {
+        return {};
+    };
+    Atomizer.prototype.getCssFromParseTree = function (parseTree) {
+        return '';
+    };
+    Atomizer.grammar = {
+        'DESC': '[^\\s]+_',
+        'DIRECT': '[^\\s]+>',
+        'PROP': '(W-|H-|...)',
+        'SIGN': '(?:neg)?',
+        'NUMBER': '[0-9]+(?:\\.[0-9]+)?',
+        'UNIT': '(?:[a-zA-Z%]+)?',
+        'HEX': '[0-9a-f]{3}(?:[0-9a-f]{3})?',
+        'CUSTOM': '[a-zA-Z0-9%\\.]+\\b',
+        'MOD': '--[a-z]+'
+    };
+    Atomizer.regex = new RegExp([
+        '\\b(',
+        '(?:',
+        Atomizer.grammar['DESC'],
+        '|',
+        Atomizer.grammar['DIRECT'],
+        ')?',
+        Atomizer.grammar['PROP'],
+        '(?:',
+        Atomizer.grammar['SIGN'],
+        Atomizer.grammar['NUMBER'],
+        Atomizer.grammar['UNIT'],
+        '|',
+        Atomizer.grammar['HEX'],
+        '|',
+        Atomizer.grammar['CUSTOM'],
+        ')',
+        '(?:',
+        Atomizer.grammar['MOD'],
+        ')?',
+        ')'
+    ].join(''));
+    return Atomizer;
+})();
+// 1.5
+// export Atomizer;