csstyle - npm Package Compare versions

Comparing version 1.3.2 to 1.4.0

bower.json

 {
   "name": "csstyle",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "homepage": "http://www.csstyle.io",
@@ -5,0 +5,0 @@ "authors": [

csstyle.js

@@ -11,65 +11,83 @@ // csstyle for postcss
 
-module.exports = function csstyle(css){
-  css.eachRule(function(node){
-    var output = '';
-    var selectors = node.selector.split(' ').map(getAbstraction);
-    selectors.forEach(function(selector, index){
-      var previous = selectors[index - 1] || {};
-      var spacing = '';
-      // regular spacing before and after non-csstyle selectors
-      if(selector.type === 'other' || previous.type === 'other'){
-        spacing = ' ';
-      }
-      // special case for parts children of option
-      if(selector.type === 'part' && previous.type === 'option'){
-        var component = _.findLast(selectors, {type: 'component'});
-        spacing = ' ';
-        output += spacing + component.prefix + component.name + selector.prefix + selector.name;  
-        return;
-      }
+module.exports = function (opts){
+  // symbols are configurable
+  opts = opts || {};
+  opts.optionSymbol = opts.optionSymbol || '\\--';
+  opts.partSymbol = opts.partSymbol || '__';
+  opts.tweakSymbol = opts.tweakSymbol || '\\+';
+  opts.locationSymbol = opts.locationSymbol || '\\@';
+  opts.rootId = opts.rootId || 'csstyle';
+  
+  return function csstyle(css){
+    css.eachRule(function(node){
+      var output = '';
+      var selectors = node.selector.split(' ').map(getAbstraction);
+      selectors.forEach(function(selector, index){
+        var previous = selectors[index - 1] || {};
+        var spacing = '';
+        // regular spacing before and after non-csstyle selectors
+        if(selector.type === 'other' || previous.type === 'other'){
+          spacing = ' ';
+        }
+        // special case for parts children of option
+        if(selector.type === 'part' && previous.type === 'option'){
+          var component = _.findLast(selectors, {type: 'component'});
+          spacing = ' ';
+          output += spacing + component.prefix + component.name + selector.prefix + selector.name;  
+          return;
+        }
+        
+        output += spacing + selector.prefix + selector.name;
+      });
       
-      output += spacing + selector.prefix + selector.name;
+      node.selector = output;
     });
     
-    node.selector = output;
-  });
-  
-  return css;
-}
-
-/**
-* Find the matching csstyle abstractions if any.
-* Return non-csstyle selectors untouched as type 'other'.
-*/
-function getAbstraction(selector){
-  var types = { 
-    component: '.',
-    part: '__', 
-    option: '.\\--',
-    tweak: '#csstyle .\\+',
-    location: '#csstyle .\\@'
+    return css;
   };
   
-  var res = Object.keys(types).map(function(type){
-    var regexp = new RegExp('('+type+'\\(([^)]*)\\))');
-    // var match = selector.match(/(component\(([^)]*)\))/);
+  /**
+  * Find the matching csstyle abstractions if any.
+  * Return non-csstyle selectors untouched as type 'other'.
+  */
+  function getAbstraction(selector){
+    var types = { 
+      component: '.',
+      part: opts.partSymbol, 
+      option: '.' + opts.optionSymbol,
+      tweak: '#' + opts.rootId + ' .' + opts.tweakSymbol,
+      location: '#' + opts.rootId + ' .' + opts.locationSymbol
+    };
+    
+    var res = Object.keys(types).map(function(type){
+      var regexp = new RegExp('('+type+'\\(([^)]*)\\))');
+      // var match = selector.match(/(component\(([^)]*)\))/);
+      return {
+        type: type,
+        match: selector.match(regexp)
+      };
+    })
+    // get first match
+    .filter(function(potential){
+      return potential.match;
+    })[0]; 
+    
+    if (!res){ 
+      return { type: 'other', name: selector, prefix: '' };
+    }
+    
     return {
-      type: type,
-      match: selector.match(regexp)
-    }
-  })
-  // get first match
-  .filter(function(potential){
-    return potential.match;
-  })[0]; 
-  
-  if (!res){ 
-    return { type: 'other', name: selector, prefix: '' };
+      type: res.type,
+      name: res.match[2],
+      prefix: types[res.type]
+    };
   }
   
-  return {
-    type: res.type,
-    name: res.match[2],
-    prefix: types[res.type]
-  }
-}
+};
+
+/**
+ * support calling with no options
+ */
+ module.exports.postcss = function (css) {
+     module.exports()(css);
+ };

Gruntfile.js

 module.exports = function(grunt) {
   grunt.initConfig({
-    
+    release: {
+      options: {
+        additionalFiles: ['bower.json']
+      }
+  }  
   });
@@ -5,0 +9,0 @@

package.json

 {
   "name": "csstyle",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "clean, simple styling for styling the web.",
@@ -5,0 +5,0 @@ "directories": {

README.md

@@ -40,2 +40,43 @@ # [csstyle](http://csstyle.io)
 
+## Customizing Styling Conventions
+csstyle lets you change the style conventions to whatever suits your style.
+
+### Default Symbols
+- `options`: `\--`
+- `parts`: `__`
+- `tweaks`: `\+`
+- `locations`: `\@`
+- `rootId`: `csstyle`
+
+### With SASS
+Override the defaults using SASS variables.
+- `options`: `$csstyle-option-symbol`
+- `parts`: `$csstyle-part-symbol`
+- `tweaks`: `$csstyle-tweak-symbol`
+- `locations`: `$csstyle-location-symbol`
+- `rootId`: `$csstyle-root-id`
+
+Example: 
+```scss
+  $csstyle-part-symbol: '\\/';
+  $csstyle-root-id: 'app';
+```
+
+### With Postcss
+Override the defaults by calling the cssytle function with an options object.
+- `options`: `optionSymbol`
+- `parts`: `partSymbol`
+- `tweaks`: `tweakSymbol`
+- `locations`: `locationSymbol`
+- `rootId`: `rootId`
+
+Example: 
+
+```js
+  require('../csstyle')({optionSymbol: '\\-', partSymbol: '\\/', rootId: 'app'})
+```
+
+**IMPORTANT NOTE** All characters besides `_` need to be escaped! However, if you are using dashes, only _the first one_ needs to be escaped. Use two backslashes to properly escape in SASS. For example to use a forward slash to separate parts, set $csstyle-part-symbol to `\\/`.
+
+
 ## FAQ
@@ -69,14 +110,2 @@
 
-### Can I configure the styling convention (SASS)?
-There are a few settings you can change. You can set these to whatever suits your style.
-
- - The style to denote `options` by changing the `$csstyle-option-symbol` variable. The default is `\--`.
- - The style to denote `parts` by changing the `$csstyle-part-symbol` variable. The default is `__`.
- - The style to denote `tweaks` by changing the `$csstyle-tweak-symbol` variable. The default is `\+`.
- - The style to denote `locations` by changing the `$csstyle-location-symbol` variable. The default is `\@`.
-
-**All characters besides `_` need to be escaped!** However, if you are using dashes, only _the first one_ needs to be escaped. Use two backslashes to properly escape in SASS. For example to use a forward slash to separate parts, set $csstyle-part-symbol to `\\/`.
-
-In adition to that, you can also change your app's root `id` on the html or body element by changing the `$csstyle-root-id` variable. The default is `csstyle`.
-
 ## License
@@ -83,0 +112,0 @@ MIT

No alert changes

Improved metrics

Total package byte prevSize

271618

increased by0.33%

Lines of code

125

increased by19.05%

Number of lines in readme file

114

increased by34.12%

No dependency changes