support custom symbols for components

this also lets teams easily namespace everything in a project

csstyle.js

@@ -11,6 +11,7 @@ var _ = require('lodash');
 module.exports = function (opts){
   // symbols are configurable
   opts = opts || {};
+  opts.componentSymbol = opts.componentSymbol || '';
   opts.optionSymbol = opts.optionSymbol || '\\--';
   opts.partSymbol = opts.partSymbol || '__';
   opts.tweakSymbol = opts.tweakSymbol || '\\+';
@@ -68,7 +69,7 @@ module.exports = function (opts){
   */
   function getAbstraction(selector){
     var types = { 
-      component: '.',
+      component: '.' + opts.componentSymbol,
       part: opts.partSymbol, 
       option: '.' + opts.optionSymbol,
       tweak: '#' + opts.rootId + ' .' + opts.tweakSymbol,

csstyle.scss

@@ -5,6 +5,7 @@
 // https://twitter.com/geddski
 // https://github.com/geddski
 
+$csstyle-component-symbol: '' !default;
 $csstyle-option-symbol: '\\--' !default;
 $csstyle-part-symbol: '__' !default;
 $csstyle-tweak-symbol: '\\+' !default;
@@ -28,7 +29,7 @@ $csstyle-root-id: 'csstyle' !default;
 
 // components
 @mixin component($names...){
-  #{_build_selector(".", $names)}{
+  #{_build_selector("." + $csstyle-component-symbol, $names)}{
     @content
   }
 }

spec/csstyle-spec.js

@@ -183,3 +183,13 @@ describe("regular css", function() {
   });
 })
 
+describe("custom symbols", function(){
+  it("allows projects to customize their styling conventions", function(){
+    [
+      getSelector('spec/scss/fixtures/custom-symbols.css')
+    ]
+    .forEach(function(selector){
+      expect(selector.value).toBe(".\\$tweet");
+    })
+  });
+});

spec/scss/fixtures/custom-symbols.scss

@@ -0,0 +1,9 @@
+@import '../../../csstyle';
+$csstyle-component-symbol: '\\$';
+
+@include component(tweet){
+  background: #fff;
+}
+
+// reset symbols for the rest of the tests
+$csstyle-component-symbol: '';