postcss-utilities - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0

CHANGELOG.md

 # Change Log
 
+# v0.7.0
+
+- Fix `Container#remove` warning for clearfix utility
+- Unify format of alert and error messages
+- Add options to set the selectors for `no-hover` and `no-js` utilities
+- Add options to use alternative techniques for `text-hide` and `center` utilities [#10](https://github.com/ismamz/postcss-utilities/issues/10)
+- Add option `ie8` to use compatible method for `clearfix`
+- Add "Quick usage" on README.md
+
 # v0.6.1
@@ -4,0 +13,0 @@

index.js

@@ -84,2 +84,5 @@ var postcss = require('postcss');
     opts = opts || {};
+    var noHoverSelector = opts.noHoverSelector || '.no-hover';
+    var noJsSelector = opts.noJsSelector || '.no-js';
+    var ie8 = opts.ie8 || false;
 
@@ -115,4 +118,3 @@ return function (css, result) {
                     result.warn('Aspect Ratio utility requires 1 parameter:' +
-                                ' [ratio]' +
-                                ' Two integers separates by ":". Ex: 16:9');
+                                ' [<int>:<int>]');
                 }
@@ -126,3 +128,3 @@ aspectRatio(util, args);
                     result.warn('Border Color utility requires at least 1 ' +
-                            'parameter. [colors separated by spaces]');
+                            'parameter: [colors separated by spaces]');
                 }
@@ -147,3 +149,3 @@ break;
                     result.warn('Border Style utility requires at least 1 ' +
-                            'parameter. [border styles separated by spaces]');
+                            'parameter: [border styles separated by spaces]');
                 }
@@ -156,7 +158,7 @@ break;
                     result.warn('Border Width utility requires at least 1 ' +
-                            'parameter. [size values separated by spaces]');
+                            'parameter: [size values separated by spaces]');
                 }
                 break;
             case 'center':
-                center(util, args);
+                center(util, args, opts);
                 break;
@@ -169,3 +171,3 @@ case 'center-block':
                     result.warn('Circle utility requires 2 parameters:' +
-                                ' [radius], [color].');
+                                ' [radius], [color]');
                 }
@@ -175,11 +177,12 @@ circle(util, args);
             case 'clearfix':
-                clearfix(util);
+                if (ie8) {
+                    clearfixIE8(util);
+                } else {
+                    clearfix(util);
+                }
                 break;
-            case 'clearfix-ie8':
-                clearfixIE8(util);
-                break;
             case 'hd':
                 if (args.length > 1 && args.length !== 2) {
                     result.warn('HD Breakpoint utility requires 1 ' +
-                                'parameters: [min-resolution].');
+                                'parameter: [min-resolution]');
                 }
@@ -194,3 +197,3 @@ hdBreakpoint(util, args, postcss);
                     result.warn('Horizontal Rule utility requires 2 ' +
-                                'parameters: [color], [vertical-margin].');
+                                'parameters: [color], [vertical-margin]');
                 }
@@ -204,10 +207,10 @@ horizontalRule(util, args);
                     result.warn('Margin utility requires at least 1 ' +
-                            'parameter. [size values separated by spaces]');
+                            'parameter: [size values separated by spaces]');
                 }
                 break;
             case 'no-hover':
-                noHover(util, postcss);
+                noHover(util, postcss, noHoverSelector);
                 break;
             case 'no-js':
-                noJs(util, postcss);
+                noJs(util, postcss, noJsSelector);
                 break;
@@ -219,3 +222,3 @@ case 'padding':
                     result.warn('Padding utility requires at least 1 ' +
-                            'parameter. [size values separated by spaces]');
+                            'parameter: [size values separated by spaces]');
                 }
@@ -228,3 +231,3 @@ break;
                     result.warn('Position utility requires at least 1 ' +
-                            'parameter. [lengths values separated by spaces]');
+                            'parameter: [lengths values separated by spaces]');
                 }
@@ -251,7 +254,7 @@ break;
                     result.warn('Invalid number of parameters for Sticky ' +
-                                'Footer utility:  read the docs.');
+                                'Footer utility');
                 }
                 break;
             case 'text-hide':
-                textHide(util, args);
+                textHide(util, args, opts);
                 break;
@@ -264,3 +267,3 @@ case 'text-stroke':
                     result.warn('Triangle utility requires 2 parameters:' +
-                                ' [size], [color], [orientation].');
+                                ' [size], [color], [orientation]');
                 }
@@ -273,3 +276,3 @@ triangle(util, args);
                         result.warn('Truncate Multiline utility requires ' +
-                                    '2 parameters: [lines], [line-height].');
+                                    '2 parameters: [lines], [line-height]');
                     }
@@ -284,3 +287,3 @@ truncateMultiline(util, args);
                     result.warn('Word Wrap utility requires 1 ' +
-                                'parameters: [wrap].');
+                                'parameters: [wrap]');
                 }
@@ -287,0 +290,0 @@ wordWrap(util, args);

lib/center.js

 /**
  * Center
  */
-module.exports = function (decl) {
-    decl.replaceWith({
-        prop: 'position',
-        value: 'absolute',
-        source: decl.source
-    }, {
-        prop: 'top',
-        value: '50%',
-        source: decl.source
-    }, {
-        prop: 'left',
-        value: '50%',
-        source: decl.source
-    }, {
-        prop: 'transform',
-        value: 'translate(-50%, -50%)',
-        source: decl.source
-    });
+module.exports = function (decl, opts) {
+    var centerMethod = opts.centerMethod || 'transform';
+
+    if (centerMethod === 'flexbox') {
+        decl.replaceWith({
+            prop: 'display',
+            value: 'flex',
+            source: decl.source
+        }, {
+            prop: 'align-items',
+            value: 'center',
+            source: decl.source
+        }, {
+            prop: 'justify-content',
+            value: 'center',
+            source: decl.source
+        });
+    } else {
+        decl.replaceWith({
+            prop: 'position',
+            value: 'absolute',
+            source: decl.source
+        }, {
+            prop: 'top',
+            value: '50%',
+            source: decl.source
+        }, {
+            prop: 'left',
+            value: '50%',
+            source: decl.source
+        }, {
+            prop: 'transform',
+            value: 'translate(-50%, -50%)',
+            source: decl.source
+        });
+    }
 };

lib/clearfix-ie8.js

@@ -8,3 +8,3 @@ /**
 
-    father.remove(current);
+    father.removeChild(current);
     father.cloneBefore(father);
@@ -11,0 +11,0 @@ father.cloneBefore(father);

lib/no-hover.js

 /**
  * No Hover
  */
-module.exports = function (decl, postcss) {
-    var prefix = '.no-hover';
-
+module.exports = function (decl, postcss, noHoverSelector) {
     decl.each(function (rule) {
@@ -11,3 +9,3 @@ var ruleSelectors = rule.selectors;
         ruleSelectors = ruleSelectors.map(function (ruleSelector) {
-            return prefix + ' ' + ruleSelector;
+            return noHoverSelector + ' ' + ruleSelector;
         }).join(',\n');
@@ -14,0 +12,0 @@

lib/no-js.js

 /**
  * No JS
  */
-module.exports = function (decl, postcss) {
-    var prefix = '.no-js';
-
+module.exports = function (decl, postcss, noJsSelector) {
     decl.each(function (rule) {
@@ -11,3 +9,3 @@ var ruleSelectors = rule.selectors;
         ruleSelectors = ruleSelectors.map(function (ruleSelector) {
-            return prefix + ' ' + ruleSelector;
+            return noJsSelector + ' ' + ruleSelector;
         }).join(',\n');
@@ -14,0 +12,0 @@

lib/text-hide.js

 /**
  * Text Hide
  */
-module.exports = function (decl, args) {
-    if (args[1] === '2') {
+module.exports = function (decl, args, opts) {
+    var textHideMethod = opts.textHideMethod || 'indent';
+
+    if (textHideMethod === 'font') {
         decl.replaceWith({
-            prop: 'overflow',
-            value: 'hidden',
-            source: decl.source
-        }, {
-            prop: 'text-indent',
-            value: '101%',
-            source: decl.source
-        }, {
-            prop: 'white-space',
-            value: 'nowrap',
-            source: decl.source
-        });
-    } else {
-        decl.replaceWith({
             prop: 'font',
@@ -41,3 +29,17 @@ value: '0/0 a',
         });
+    } else {
+        decl.replaceWith({
+            prop: 'overflow',
+            value: 'hidden',
+            source: decl.source
+        }, {
+            prop: 'text-indent',
+            value: '101%',
+            source: decl.source
+        }, {
+            prop: 'white-space',
+            value: 'nowrap',
+            source: decl.source
+        });
     }
 };

package.json

 {
   "name": "postcss-utilities",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "PostCSS plugin to add a collection of mixins, shortcuts, helpers and tools for your CSS",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -5,3 +5,3 @@ # PostCSS Utility Library [![Build Status][ci-img]][ci]
     <a href="https://ismamz.github.io/postcss-utilities">
-        <img src="https://github.com/ismamz/postcss-utilities/blob/master/media/logo.png" alt="PostCSS Utility Library">
+        <img src="https://github.com/ismamz/postcss-utilities/blob/master/media/logo.png" alt="PostCSS Utility Library" width="200">
     </a>
@@ -14,6 +14,4 @@ </p>
 
-Let's face it. You don't have time to write your own mixins, helpers or shortcuts for your next project. Let [postcss-utilities](http://github.io/ismamz/postcss-utilities) help you instead.
+[postcss-utilities](https://ismamz.github.io/postcss-utilities/) is a [PostCSS] plugin that includes the most commonly used mixins, shortcuts and helpers. It's as easy as specifying `@util utility-name` in your stylesheet, and postcss-utilities will handle the rest for you.
 
-postcss-utilities is a [PostCSS] plugin that includes the most commonly used mixins, shortcuts and helpers. It's as easy as specifying `@util utility-name` in your stylesheet, and postcss-utilities will handle the rest for you.
-
 <h4 align="center"><a href="https://ismamz.github.io/postcss-utilities">Check out the documentation to get started using postcss-utilities</a></h4>
@@ -25,3 +23,3 @@
 
-PostCSS has a lot of plugins and some of them use non-standar CSS properties to work as mixins or helpers. This is not a best way for a PostCSS plugin, because developers will not understand what is the source of this property.
+PostCSS has a lot of plugins and some of them use non-standard CSS properties to work as mixins or helpers. This is not a best way for a PostCSS plugin, because developers will not understand what is the source of this property.
 
@@ -32,4 +30,8 @@ > "This plugin saves us from many tiny plugins with unknown properties" _‒[@ai](https://github.com/ai) proposal [postcss/issues/645](https://github.com/postcss/postcss/issues/645)_
 
+There are lot of Sass Mixins Libraries ([over 65!](http://www.cssauthor.com/sass-mixins-library/)), but postcss-utilities makes the difference. All mixins and helpers are built with JavaScript and you can add to your workflow with ease, as simple as adding [autoprefixer](https://github.com/postcss/autoprefixer) or many others useful [PostCSS plugins](https://github.com/postcss/postcss/blob/master/docs/plugins.md).
+
+You can forget about copy mixins from project to project and focus on write your project specific mixins and use this plugin for the most generic helpers.
+
 - You don’t need the extra files in your css codebase for mixins.
-- You don’t need mixins for vendor prefixing (use [autoprefixer plugin](https://github.com/postcss/autoprefixer))
+- You don’t need mixins for vendor prefixing (use [autoprefixer](https://github.com/postcss/autoprefixer) plugin)
 - You can use postcss-utilities with LESS, SASS, vanilla CSS or whatever you choice.
@@ -78,8 +80,12 @@
 
-.box-16-9 {
-    background-color: #ccc;
-    margin-bottom: 20px;
-    @util aspect-ratio(16:9);
+.rounded-top {
+    @util border-top-radius(4px);
 }
 
+@util no-hover {
+    .box {
+        background-color: #666;
+    }
+}
+
 ```
@@ -96,13 +102,11 @@
 
-.box-16-9 {
-    background-color: #ccc;
-    margin-bottom: 20px;
-    position: relative;
-    display: block;
-    height: 0;
-    padding: 0;
-    overflow: hidden;
-    padding-bottom: 56.25%;
+.rounded-top {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
 }
 
+.no-hover .box {
+    background-color: #666;
+}
+
 ```
@@ -116,4 +120,26 @@
 
+### Quick usage
+
+Using [PostCSS CLI](https://github.com/postcss/postcss-cli) you can do the following:
+
+First, install `postcss-cli` and the plugin on your project folder:
+
+```
+$ npm install postcss-cli postcss-utilities --save-dev
+```
+
+And finally add this script to your `package.json`:
+
+```json
+"scripts": {
+    "postcss": "postcss input.css -u postcss-utilities -o output.css -w"
+}
+```
+
+After this you can run `npm run postcss` and transform your `input.css` into `output.css`. Note that `-w` is for observe file system changes and recompile as source files change.
+
+### For tasks runners and others enviroments
+
 ```js
-postcss([ require('postcss-utilities') ])
+postcss([ require('postcss-utilities')({ /* options*/ }) ])
 ```
@@ -123,2 +149,43 @@
 
+
+## Options
+
+##### noHoverSelector
+
+Type: `string`<br>
+Default: `.no-hover`
+
+To use with [`no-hover` utility](https://ismamz.github.io/postcss-utilities/docs#no-hover)
+
+##### noJsSelector
+
+Type: `string`<br>
+Default: `.no-js`
+
+To use with [`no-js` utility](https://ismamz.github.io/postcss-utilities/docs#no-js)
+
+##### ie8
+
+Type: `boolean`<br>
+Default: `false`
+
+Set `true` to use `clearfix` method IE8 compatible
+
+##### centerMethod
+
+Type: `string`<br>
+Default: `transform`
+Values: `['transform'|'flexbox']`
+
+To use with [`center` utility](https://ismamz.github.io/postcss-utilities/docs#center)
+
+##### textHideMethod
+
+Type: `string`<br>
+Default: `indent`
+Values: `['indent'|'font']`
+
+To use with [`text-hide` utility](https://ismamz.github.io/postcss-utilities/docs#text-hide)
+
+
 ## Contributing
@@ -125,0 +192,0 @@

No alert changes

Improved metrics

Total package byte prevSize

81182

increased by4.57%

Number of package files

88

increased by7.32%

Lines of code

2598

increased by2.32%

Number of lines in readme file

194

increased by52.76%

No dependency changes