dialog-settings - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/dialog-settings.scss

 /**
  * dialog-settings - SASS/SCSS module settings
- * @version v1.0.0
+ * @version v1.1.0
  * (c) 2017 meodai
@@ -8,22 +8,19 @@ * @link https://github.com/meodai/dialog-settings#readme
  */
- /**
- * Usage
+ /// USAGE:
 
-$module-name: 'somerandommodule';
+/// $module-name: 'somerandommodule';
 
-@include settings((
-  gutter         : 1rem,
-  color          : silver,
-  color-contrast : gold
-));
+/// @include settings((
+///  gutter         : 1rem,
+///  color          : silver,
+///  color-contrast : gold
+/// ));
 
-.#{$module-name} {
-  padding: setting('gutter');
-  &__submodule {
-    color: setting(color);
-  }
-}
+/// .#{$module-name} {
+///  padding: setting('gutter');
+///  &__submodule {
+///    color: setting(color);
+///  }
+/// }
 
-*/
-
 $module-name: null !default;
@@ -33,6 +30,8 @@ $module-settings: () !default;
 
-@mixin settings($settings, $cssVariables:$module-cssvariables){
+@mixin settings($settings, $cssVariables: $module-cssvariables){
   @if $cssVariables {
-    @each $key, $value in $settings {
-      --#{$module-name}-#{$key}: $value;
+    :root {
+      @each $key, $value in $settings {
+        --#{$module-name}-#{$key}: $value;
+      }
     }
@@ -39,0 +38,0 @@ }

package.json

 {
   "name": "dialog-settings",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "SASS/SCSS module settings",
   "main": "gulpfile.js",
   "scripts": {
-    "test": "gulp test:sass"
+    "test": "gulp test:sass",
+    "build": "gulp build",
+    "dev": "gulp",
+    "deploy": "gulp build && gh-pages -d demo"
   },
@@ -9,0 +12,0 @@ "repository": {

README.md

@@ -10,4 +10,39 @@ ![dialog(settings)](media/logo.png)
 A simple key value store for module settings, to make modules more portable.
-With the nice side-effect that all settings can be output as native CSS variables.
+With the nice side-effect that all settings can be rendered as native CSS variables. Play with the [demo](http://www.sassmeister.com/gist/230dc13729262d55d92f1efbcd2a69a5).
 
+## Why ⁉️️
+1. Easy way to switch between rendered values and CSS variables.
+2. Better portabily: Only have to rename one string, not tons of variable names as well, when renaming/moving a module.
+3. Warn when variables are missing instead of failing the build. Allows to mock the CSS for a module withought knowing the values for each property.
+
+### Before
+```scss
+$module-name: 'mymodule';
+
+$mymodule-background: $colors-dark;
+$mymodule-color: $colors-contrast;
+$mymodule-margin: 2rem;
+
+.#{$module-name} {
+  color: $mymodule-color;
+  background: $mymodule-background;
+  margin: $mymodule-margin;
+}
+```
+### With dialog(settings)
+```scss
+$module-name: 'mymodule';
+
+@include settings((
+  color: $colors-dark,
+  background: $colors-contrast,
+  margin: 2rem
+));
+
+.#{$module-name} {
+  color: setting(color);
+  background: setting(background);
+  margin: setting(margin);
+}
+```
 ## Installation 💾
@@ -14,0 +49,0 @@

No alert changes

Improved metrics

Total package byte prevSize

88548

1.28%

Number of lines in readme file

89

64.81%

No dependency changes