Add text-stroke

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+# v0.4.1
+
+- Add text-stroke utility
+
 # v0.4.0
 
 - Change `append` to `replaceWith` method (keep the same atRule position for new declarations)

README.md

@@ -56,6 +56,7 @@ PostCSS has a lot of plugins and some of them use non-standar CSS properties to
 - [size](https://ismamz.github.io/postcss-utilities/docs#size)
 - [sticky-footer](https://ismamz.github.io/postcss-utilities/docs#sticky-footer)
 - [text-hide](https://ismamz.github.io/postcss-utilities/docs#text-hide)
+- [text-stroke](https://ismamz.github.io/postcss-utilities/docs#text-stroke)
 - [triangle](https://ismamz.github.io/postcss-utilities/docs#triangle)
 - [truncate](https://ismamz.github.io/postcss-utilities/docs#truncate)
 - [word-break](https://ismamz.github.io/postcss-utilities/docs#word-break)

index.js

@@ -29,6 +29,7 @@ var size               = require('./lib/size');
 var stickyFooter       = require('./lib/sticky-footer');
 var stickyFooterFluid  = require('./lib/sticky-footer-fluid');
 var textHide           = require('./lib/text-hide');
+var textStroke           = require('./lib/text-stroke');
 var triangle           = require('./lib/triangle');
 var truncate           = require('./lib/truncate');
 var truncateMultiline  = require('./lib/truncate-multiline');
@@ -62,6 +63,7 @@ var names = [
     'size',
     'sticky-footer',
     'text-hide',
+    'text-stroke',
     'triangle',
     'truncate',
     'word-wrap'
@@ -249,6 +251,9 @@ module.exports = postcss.plugin('postcss-utilities', function (opts) {
             case 'text-hide':
                 textHide(util, args);
                 break;
+            case 'text-stroke':
+                textStroke(util, args);
+                break;
             case 'triangle':
                 if (args.length > 1 && args.length !== 4) {
                     result.warn('Triangle utility requires 2 parameters:' +

lib/hd-breakpoint.js

@@ -2,29 +2,23 @@
  * HD Breakpoint
  * @link https://git.io/voIp7
  */
-function unit(x) {
-    return x.match(/[a-zA-Z]+/g)[0];
-}
-
-function value(x) {
-    return x.match(/[0-9&.]+/g)[0];
-}
+var helpers = require('./helpers');
 
 module.exports = function (decl, args, postcss) {
     var minResDppx = 1.25;
     var minResDpi = minResDppx * 96; // 1dppx == 96dpi
 
     if (args[1]) {
-        if (unit(args[1]) === 'dppx') {
-            minResDppx = value(args[1]);
-            minResDpi = value(args[1]) * 96;
+        if (helpers.unit(args[1]) === 'dppx') {
+            minResDppx = helpers.value(args[1]);
+            minResDpi = helpers.value(args[1]) * 96;
         }
     }
 
     if (args[1]) {
-        if (unit(args[1]) === 'dpi') {
-            minResDpi = value(args[1]);
-            minResDppx = value(args[1]) / 96;
+        if (helpers.unit(args[1]) === 'dpi') {
+            minResDpi = helpers.value(args[1]);
+            minResDppx = helpers.value(args[1]) / 96;
         }
     }
 

lib/helpers.js

@@ -0,0 +1,21 @@
+/**
+ * Helpers
+ */
+
+/**
+ * Get unit from a string like: '12px' => 'px'
+ * @param  {string} x
+ * @return {string}
+ */
+module.exports.unit = function (x) {
+    return x.match(/[a-zA-Z]+/g)[0];
+};
+
+/**
+ * Get value from a string like: '12px' => 12
+ * @param  {string} x
+ * @return {number}
+ */
+module.exports.value = function (x) {
+    return x.match(/[0-9&.]+/g)[0];
+};

lib/text-stroke.js

@@ -0,0 +1,40 @@
+/**
+ * Text Stroke
+ */
+var helpers = require('./helpers');
+
+module.exports = function (decl, args) {
+    var size = args[1] || '1px';
+    var color = args[2] || '#000';
+    var smooth = false;
+    var textShadow = '';
+
+    if (args[3] === 'smooth') {
+        smooth = true;
+    }
+
+    var unit = helpers.unit(size);
+    if (unit === undefined) {
+        throw decl.error('Undefined unit value');
+    }
+    var value = helpers.value(size); // si no existe => error
+
+    for (var w = value * -1; w <= value; w++) {
+        for (var h = value * -1; h <= value; h++) {
+            if (smooth) {
+                textShadow += `${w}${unit} ${h}${unit} 1${unit} ${color},`;
+            } else {
+                textShadow += `${w}${unit} ${h}${unit} 0 ${color},`;
+            }
+        }
+    }
+
+    textShadow = textShadow.slice(0, -1);
+    textShadow = textShadow.replace(/0px/g, 0);
+
+    decl.replaceWith({
+        prop: 'text-shadow',
+        value: textShadow,
+        source: decl.source
+    });
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-utilities",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "PostCSS plugin to add a collection of mixins, shortcuts, helpers and tools for your CSS",
   "keywords": [
     "postcss",

test.js

@@ -184,3 +184,9 @@ test('position', t => {
     var output = fs.readFileSync('test/position.expect.css', 'utf8');
     return run(t, input, output, { });
 });
+
+test('text-stroke', t => {
+    var input = fs.readFileSync('test/text-stroke.css', 'utf8');
+    var output = fs.readFileSync('test/text-stroke.expect.css', 'utf8');
+    return run(t, input, output, { });
+});

test/text-stroke.css

@@ -0,0 +1,7 @@
+.stroke {
+    @util text-stroke(1px, #d50200);
+}
+
+.stroke_3_smooth {
+    @util text-stroke(3px #ececec smooth);
+}