csstyle - npm Package Compare versions

Comparing version 1.1.0 to 1.3.0

bower.json

+{
+  "name": "csstyle",
+  "version": "1.3.0",
+  "homepage": "http://www.csstyle.io",
+  "authors": [
+    "Dave Geddes <[e-mail]>"
+  ],
+  "description": "clean, simple styling for styling the web.",
+  "main": "csstyle.scss",
+  "keywords": [
+    "css",
+    "sass",
+    "scss",
+    "web",
+    "components",
+    "styling",
+    "mixins",
+    "method",
+    "approach"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "node_modules",
+    "spec",
+    "site"
+  ]
+}

bugreport.css

+.joe {
+  color: #00f;
+  sel: '.joe';
+  outerSel: '&';
+}
+.joe .bob {
+  color: #008000;
+  sel: '.bob';
+  outerSel: '&';
+}

CONTRIBUTING.md

+# Contributing
+
+Please create an issue before contributing and reference the issue in your PR's commit message. Also, make sure that any new/changed functionality is tested and all the tests pass.
+
+## Running the Unit Tests
+
+Required: node and ruby
+
+`$ gem install sass`
+
+`$ npm install -g jasmine-node`
+
+`$ npm test`

csstyle.js

+// csstyle v1.3.0 for postcss
+// Clean, Simple Styling for the Web
+// http://www.csstyle.io
+// This is the postcss version (https://github.com/postcss/postcss)
+// Copyright (c) 2014 Dave Geddes
+// https://twitter.com/geddski
+// https://github.com/geddski
+
+var _ = require('lodash');
+
+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;
+      }
+      
+      output += spacing + selector.prefix + selector.name;
+    });
+    
+    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 .\\@'
+  };
+  
+  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: res.type,
+    name: res.match[2],
+    prefix: types[res.type]
+  }
+}

csstyle.scss

@@ -1,2 +0,2 @@
-// csstyle v1.1.0
+// csstyle v1.3.0 for sass
 // Clean, Simple Styling for the Web
@@ -8,2 +8,4 @@ // http://www.csstyle.io
 
+$csstyle-part-symbol: '__' !default;
+
 // components
@@ -26,3 +28,3 @@ @mixin component($name){
 @mixin whenComponentOption($option){
-  $index: str-index(#{&}, "__") - 1;
+  $index: str-index(#{&}, $csstyle-part-symbol) - 1;
   $component: str-slice(#{&}, 0, $index);
@@ -45,3 +47,3 @@
     // check if nested in another part
-    $partIndex: str-index(#{&}, "__");
+    $partIndex: str-index(#{&}, $csstyle-part-symbol);
     $partIndex: 0 !default;
@@ -56,3 +58,3 @@ $partIndex: $partIndex - 1;
       @if ($partIndex > 0){
-        &__#{$name}{
+        &#{$csstyle-part-symbol}#{$name}{
           @content;
@@ -62,3 +64,3 @@ }
       @else{
-        & #{$component}__#{$name}{
+        & #{$component}#{$csstyle-part-symbol}#{$name}{
           @content;
@@ -69,3 +71,3 @@ }
     @else {
-      &__#{$name}{
+      &#{$csstyle-part-symbol}#{$name}{
         @content
@@ -84,3 +86,2 @@ }
 
-
 // locations
@@ -87,0 +88,0 @@ // override components, parts, options, and tweaks

package.json

 {
   "name": "csstyle",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "clean, simple styling for styling the web.",
@@ -8,6 +8,13 @@ "directories": {
   },
-  "dependencies": {},
+  "dependencies": {
+    "lodash": "^3.2.0"
+  },
   "devDependencies": {
-    "specificity": "~0.1.4",
-    "shelljs": "~0.3.0"
+    "fs-extra": "^0.16.3",
+    "glob": "^4.3.5",
+    "postcss": "^4.0.4",
+    "postcss-nested": "^0.2.1",
+    "postcss-simple-vars": "^0.2.3",
+    "shelljs": "~0.3.0",
+    "specificity": "~0.1.4"
   },
@@ -14,0 +21,0 @@ "scripts": {

README.md

@@ -8,5 +8,6 @@ # [csstyle](http://csstyle.io)
 
+You can use csstyle with either [Sass](http://sass-lang.com/) or [postcss](https://github.com/postcss/postcss).
 
 ## Getting Started
-1. make sure you have the latest stable SASS (3.4).
+1. Setup your project with either Sass or Postcss. If you're using Sass make sure you have the latest stable SASS (3.4).
 
@@ -16,15 +17,54 @@ 2. Add `id="csstyle"` to your html or body element. This is necessary so that components with their
 
-3. Download the csstyle mixins and `@import` them into your sass file.
+3. Download csstyle from npm:
 
+    ```
+    npm install csstyle --save
+    ```
+
+    or from bower:
+    ```
+    bower install csstyle --save
+    ```
+    
+4. If you're using Sass, import into your stylesheets:
+```scss
+@import 'csstyle';
 ```
-npm install csstyle
+
+If you're using postcss, add csstyle as a plugin:
+```js
+postcss([require('postcss-nested'), require('../csstyle')]);
 ```
+Be sure to include postcss-nested and csstyle in that order. 
 
-Now you can start creating components with options & parts, adding in tweaks and locations as needed.
+Now you're set and can start creating components with options & parts, adding in tweaks and locations as needed. Enjoy!
 
+## FAQ
 
-## Running the Unit Tests
-`npm install -g jasmine-node` 
-`npm test`
+### Can I use this with Libsass?
+People using webpack or similar often want to load Sass via libsass. 
+Unfortunately libsass is quite behind the ruby Sass and some things are [still missingl](https://sass-compatibility.github.io/)
+before it will work with csstyle. As a workaround while we wait for libsass you
+can load your Sass files with the [ruby Sass loader](https://github.com/ddelbondio/ruby-sass-loader) and it will work just fine, it just
+won't be as fast as libsass.
 
+### How do parts react to component states like hover?
+In Sass you can append a `&` to a selector or pseudo-selector to have it applied to the parent context. So for example to have a `part` react when the `component` gets hovered:
+
+```scss
+@include component(capacitor){
+  background: red;
+  
+  @include part(flux){
+    background: orange;
+    :hover & {
+      background: blue;
+    }
+  }
+}
+```
+
+### Can I configure the styling convention?
+You can configure which symbol is used to denote `parts` by changing the `$csstyle-part-symbol` variable. The default is `__` but you can set it to `-` or whatever suits your style.
+
 ## License
@@ -34,3 +74,2 @@ MIT
 ## TODO
-- ship mixins as gem
-- support stylus, rework, and less once API is solid
+- make postcss version configurable too

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

252029

1.38%

Number of package files

74

7.25%

Lines of code

101

Infinity%

Number of lines in readme file

73

121.21%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dependency count

1

Infinity%

Dev dependency count

7

250%

Dependency changes

• + Added

  lodash@^3.2.0

• + Added

  lodash@3.10.1
  (transitive)