├── .editorconfig ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── index.js ├── index_dev.js ├── package.json ├── test.js └── test ├── input.css ├── input_beakerIncorrect.css ├── input_beakerPositionDirectionIncorrect.css ├── input_bubbleBeakerNotSpecified.css ├── input_bubbleIncorrect.css └── output.css /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.{json,yml}] 12 | indent_size = 2 13 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "space-before-function-paren": [2, { "named": "never" }], 4 | "no-shadow-restricted-names": [2], 5 | "computed-property-spacing": [2], 6 | "no-empty-character-class": [2], 7 | "no-irregular-whitespace": [2], 8 | "no-unexpected-multiline": [2], 9 | "no-multiple-empty-lines": [2], 10 | "space-return-throw-case": [2], 11 | "no-constant-condition": [2], 12 | "no-extra-boolean-cast": [2], 13 | "no-inner-declarations": [2], 14 | "no-this-before-super": [2], 15 | "no-use-before-define": [2], 16 | "no-array-constructor": [2], 17 | "object-curly-spacing": [2, "always"], 18 | "no-floating-decimal": [2], 19 | "no-warning-comments": [2], 20 | "handle-callback-err": [2], 21 | "no-unneeded-ternary": [2], 22 | "operator-assignment": [2], 23 | "space-before-blocks": [2], 24 | "no-native-reassign": [2], 25 | "no-trailing-spaces": [2], 26 | "operator-linebreak": [2, "after"], 27 | "consistent-return": [2], 28 | "no-duplicate-case": [2], 29 | "no-invalid-regexp": [2], 30 | "no-negated-in-lhs": [2], 31 | "constructor-super": [2], 32 | "no-nested-ternary": [2], 33 | "no-extend-native": [2], 34 | "block-scoped-var": [2], 35 | "no-control-regex": [2], 36 | "no-sparse-arrays": [2], 37 | "no-throw-literal": [2], 38 | "no-return-assign": [2], 39 | "no-const-assign": [2], 40 | "no-class-assign": [2], 41 | "no-extra-parens": [2], 42 | "no-regex-spaces": [2], 43 | "no-implied-eval": [2], 44 | "no-useless-call": [2], 45 | "no-self-compare": [2], 46 | "no-octal-escape": [2], 47 | "no-new-wrappers": [2], 48 | "no-process-exit": [2], 49 | "no-catch-shadow": [2], 50 | "linebreak-style": [2], 51 | "space-infix-ops": [2], 52 | "space-unary-ops": [2], 53 | "no-cond-assign": [2], 54 | "no-func-assign": [2], 55 | "no-unreachable": [2], 56 | "accessor-pairs": [2], 57 | "no-empty-label": [2], 58 | "no-fallthrough": [2], 59 | "no-path-concat": [2], 60 | "no-new-require": [2], 61 | "no-spaced-func": [2], 62 | "no-unused-vars": [2], 63 | "spaced-comment": [2], 64 | "no-delete-var": [2], 65 | "comma-spacing": [2], 66 | "no-extra-semi": [2], 67 | "no-extra-bind": [2], 68 | "arrow-spacing": [2], 69 | "prefer-spread": [2], 70 | "no-new-object": [2], 71 | "no-multi-str": [2], 72 | "semi-spacing": [2], 73 | "no-lonely-if": [2], 74 | "dot-notation": [2], 75 | "dot-location": [2, "property"], 76 | "comma-dangle": [2, "never"], 77 | "no-dupe-args": [2], 78 | "no-dupe-keys": [2], 79 | "no-ex-assign": [2], 80 | "no-obj-calls": [2], 81 | "valid-typeof": [2], 82 | "default-case": [2], 83 | "no-redeclare": [2], 84 | "no-div-regex": [2], 85 | "no-sequences": [2], 86 | "no-label-var": [2], 87 | "comma-style": [2], 88 | "brace-style": [2], 89 | "no-debugger": [2], 90 | "quote-props": [2, "consistent-as-needed"], 91 | "no-iterator": [2], 92 | "no-new-func": [2], 93 | "key-spacing": [2, { "align": "value" }], 94 | "complexity": [2], 95 | "new-parens": [2], 96 | "no-eq-null": [2], 97 | "no-bitwise": [2], 98 | "wrap-iife": [2], 99 | "no-caller": [2], 100 | "use-isnan": [2], 101 | "no-labels": [2], 102 | "no-shadow": [2], 103 | "camelcase": [2], 104 | "eol-last": [2], 105 | "no-octal": [2], 106 | "no-empty": [2], 107 | "no-alert": [2], 108 | "no-proto": [2], 109 | "no-undef": [2], 110 | "no-eval": [2], 111 | "no-with": [2], 112 | "no-void": [2], 113 | "max-len": [2, 80], 114 | "new-cap": [2], 115 | "eqeqeq": [2], 116 | "no-new": [2], 117 | "quotes": [2, "single"], 118 | "indent": [2, 4], 119 | "semi": [2, "always"], 120 | "yoda": [2, "never"] 121 | }, 122 | "ecmaFeatures": { 123 | "modules": true 124 | }, 125 | "env": { 126 | "node": true, 127 | "es6": true 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | 3 | node_modules/ 4 | npm-debug.log 5 | 6 | test/ 7 | .travis.yml 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - stable 5 | - "4" 6 | - "0.12" 7 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | #1.0.12 2 | Added an important note to readme about specifying width and height 3 | 4 | #1.0.1, #1.0.11 - 2016-01-24 5 | Fixed the Git user name which was incorrect before. 6 | 7 | # 0.0.9, 1.0.0 - 2016-01-23 8 | First version of Speech bubble 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2015 ArchanaS 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # postcss-speech-bubble 2 | postcss-speech-bubble creates speech bubbles in just a couple of lines of CSS. 3 | 4 | ## Installation 5 | npm install postcss-speech-bubble 6 | 7 | ## Usage 8 | postcss-speech-bubble offers three rules that can be used to build different kinds of speech bubbles. 9 | 10 | bubble: borderSize borderRadius type color; 11 | * borderSize: border size in px 12 | * borderRadius: border radius on the speech bubble 13 | * type: 14 | solid or hollow 15 | Solid creates a speech bubble that uses the color provided here 16 | as background color. 17 | Hollow uses the color provided in this rule as the border color. 18 | * color: 19 | Background color of the bubble and the beaker if it is solid 20 | border color on bubble and beaker if it is hollow 21 | 22 | bubble-beaker: beakerSize positionOfBeaker; 23 | * beakerSize: size of the speech beaker. Please provide this in px. 24 | * positionOfBeaker: Where the beaker should be for the speech bubble. Below are possiblePosition's options: 25 | * top-right 26 | * top-left 27 | * top-center 28 | * bottom-right 29 | * bottom-left 30 | * bottom-center 31 | * left-top 32 | * left-bottom 33 | * left-middle 34 | * right-top 35 | * right-bottom 36 | * right-middle 37 | 38 | bubble-background: color; 39 | This is necessary if you need to provide a bubble with a border and a background color. 40 | You can define these bubbles by making them hollow and providing the border color and providing a background color through this property. 41 | 42 | #### Important Note: Please provide width and height for these bubbles or let the content specify the width/height. The bubbles will not look right without proper width/height. 43 | 44 | ## Examples 45 | 46 | ### Solid bubble (No border) 47 | ![solid bubble](https://lh3.googleusercontent.com/-AeIItjhWS2c/VqRriS6DYoI/AAAAAAAAOzw/JSMxzDnBag4/s338-Ic42/Screen%252520Shot%2525202016-01-23%252520at%25252010.07.57%252520PM.png) 48 | 49 | .bubble { 50 | bubble-beaker: 12px top-right; 51 | bubble: 0 0 solid lightGrey; 52 | width: 140px; 53 | height: 80px; 54 | } 55 | 56 | ### Hollow bubble 57 | ![hollow bubble](https://lh3.googleusercontent.com/-kvMLnldOwk4/VqRrhyoT5xI/AAAAAAAAOzs/nElrVn57kZE/s386-Ic42/Screen%252520Shot%2525202016-01-23%252520at%25252010.09.20%252520PM.png) 58 | 59 | .bubble { 60 | bubble: 1px 10px hollow black; 61 | bubble-beaker: 10px left-middle; 62 | width: 150px; 63 | height: 100px; 64 | } 65 | 66 | ### Hollow bubble with a background 67 | ![hollow bubble with background](https://lh3.googleusercontent.com/-_WS8rmal0Vs/VqRrhbE9lJI/AAAAAAAAOzk/Z2eg19MSDzA/s282-Ic42/Screen%252520Shot%2525202016-01-23%252520at%25252010.12.48%252520PM.png) 68 | 69 | .bubble { 70 | bubble-beaker: 12px right-middle; 71 | bubble: 3px 0 hollow black; 72 | bubble-background: #E44146; 73 | width: 100px; 74 | height: 120px; 75 | } 76 | 77 | ## [Changelog] (./CHANGELOG.md "Changelog") 78 | ## [License](./LICENSE "License") 79 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); 4 | 5 | var postcss = require('postcss'); 6 | 7 | var getBeakerDeclarationValues = function getBeakerDeclarationValues(rule) { 8 | var bubbleBeakerValues = []; 9 | var position = null; 10 | var bubbleBackColor = null; 11 | 12 | var _iteratorNormalCompletion = true; 13 | var _didIteratorError = false; 14 | var _iteratorError = undefined; 15 | 16 | try { 17 | for (var _iterator = rule.nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { 18 | var node = _step.value; 19 | 20 | switch (node.prop.trim().toLowerCase()) { 21 | case 'bubble-beaker': 22 | bubbleBeakerValues = node.value.split(' '); 23 | rule.removeChild(node); 24 | break; 25 | case 'position': 26 | position = node.value; 27 | break; 28 | case 'bubble-background': 29 | bubbleBackColor = node.value; 30 | rule.removeChild(node); 31 | break; 32 | } 33 | } 34 | } catch (err) { 35 | _didIteratorError = true; 36 | _iteratorError = err; 37 | } finally { 38 | try { 39 | if (!_iteratorNormalCompletion && _iterator.return) { 40 | _iterator.return(); 41 | } 42 | } finally { 43 | if (_didIteratorError) { 44 | throw _iteratorError; 45 | } 46 | } 47 | } 48 | 49 | return { 50 | bubbleBeakerValues: bubbleBeakerValues, 51 | position: position, 52 | bubbleBackColor: bubbleBackColor 53 | }; 54 | }; 55 | 56 | var extractBubbleAndBeakerSpecs = function extractBubbleAndBeakerSpecs(bubbleValues, beakerValues) { 57 | var bubble = {}; 58 | var beaker = {}; 59 | 60 | if (bubbleValues && bubbleValues.length !== 4) { 61 | throw 'Bubble is not correctly specified. Please check the docs\n and provide the right values.'; 62 | } 63 | 64 | if (beakerValues && beakerValues.length !== 2) { 65 | throw 'Bubble beaker is not specified correctly. Please check the docs and\n provide the right values.'; 66 | } 67 | 68 | var _bubbleValues = _slicedToArray(bubbleValues, 4); 69 | 70 | bubble.borderSize = _bubbleValues[0]; 71 | bubble.borderRadius = _bubbleValues[1]; 72 | bubble.type = _bubbleValues[2]; 73 | bubble.color = _bubbleValues[3]; 74 | 75 | if (beakerValues[1].indexOf('-') >= 0) { 76 | beaker.direction = beakerValues ? beakerValues[1].split('-')[0] : null; 77 | beaker.position = beakerValues ? beakerValues[1].split('-')[1] : null; 78 | } else { 79 | throw 'Beaker is not provided correctly. Please check the docs and\n provide the right values.'; 80 | } 81 | 82 | var possibleDirections = ['top', 'bottom', 'left', 'right']; 83 | var possiblePositions = ['top', 'bottom', 'left', 'right', 'center', 'middle']; 84 | 85 | if (possibleDirections.indexOf(beaker.direction) < 0 || possiblePositions.indexOf(beaker.position) < 0) { 86 | throw 'Beaker is not provided correctly. Please specify bubble-beaker:\n . Beaker position should be top-left,\n top-right, bottom-center, left-middle, etc.'; 87 | } 88 | 89 | beaker.size = beakerValues ? beakerValues[0] : null; 90 | 91 | if (beaker.size.indexOf('px') < 0) { 92 | throw 'Expecting a px value for beaker size. Please do not provide other units'; 93 | } 94 | 95 | return { 96 | bubble: bubble, 97 | beaker: beaker 98 | }; 99 | }; 100 | 101 | var addBubble = function addBubble(bubble, beaker, position, rule) { 102 | // Add border size for the bubble 103 | if (parseInt(bubble.borderSize, 10) > 0) { 104 | rule.append('border: ' + bubble.borderSize + ' solid ' + bubble.color); 105 | } 106 | 107 | if (bubble.type.toLowerCase() === 'solid') { 108 | rule.append('background-color: ' + bubble.color); 109 | } 110 | 111 | if (bubble.backColor) { 112 | rule.append('background-color: ' + bubble.backColor); 113 | } 114 | 115 | // Add border radius if any 116 | if (parseInt(bubble.borderRadius, 10) > 0) { 117 | rule.append('border-radius: ' + bubble.borderRadius); 118 | } 119 | 120 | // Adjust the positioning of the bubble based on beaker 121 | if (beaker.size && beaker.direction && parseInt(beaker.size, 10) > 0) { 122 | rule.append('margin-' + beaker.direction + ':' + beaker.size); 123 | } 124 | 125 | // Add position relative to container so the beaker will appear correctly. 126 | if (!position) { 127 | rule.append('position: relative'); 128 | } else if (position !== 'absolute' || position !== 'relative') { 129 | throw 'Position for the bubble should either be absolute or relative.'; 130 | } 131 | }; 132 | 133 | var addBeaker = function addBeaker(bubble, beaker, rule) { 134 | // Add the beaker now 135 | var beforeRule = postcss.rule({ selector: rule.selector + ':before' }); 136 | var afterRule = null; 137 | 138 | if (bubble.type === 'hollow') { 139 | // We need to add another beaker the same background color as the bubble 140 | // to create a caret look instead of triangle. 141 | afterRule = postcss.rule({ selector: rule.selector + ':after' }); 142 | } 143 | 144 | var commonRules = ['content: \'\'', 'position: absolute']; 145 | 146 | var afterColor = bubble.backColor ? bubble.backColor : 'white'; 147 | var transparentTriangle = beaker.size + ' solid transparent'; 148 | var solidTriangle = beaker.size + ' solid ' + bubble.color; 149 | var border = parseInt(bubble.borderSize.split('px')[0], 10) || 1; 150 | border = border > 1 ? border + 1 : 1; 151 | 152 | // First add solid colored beaker 153 | switch (beaker.direction.toLowerCase()) { 154 | case 'top': 155 | beforeRule.append('top: -' + beaker.size); 156 | commonRules.push('border-left: ' + transparentTriangle); 157 | commonRules.push('border-right: ' + transparentTriangle); 158 | beforeRule.append('border-bottom: ' + solidTriangle); 159 | if (afterRule) { 160 | afterRule.append('top: -' + (parseInt(beaker.size.split('px')[0], 10) - border) + 'px'); 161 | afterRule.append('border-bottom: ' + beaker.size + ' solid ' + afterColor); 162 | } 163 | break; 164 | case 'bottom': 165 | beforeRule.append('bottom: -' + beaker.size); 166 | commonRules.push('border-left: ' + transparentTriangle); 167 | commonRules.push('border-right: ' + transparentTriangle); 168 | beforeRule.append('border-top: ' + solidTriangle); 169 | if (afterRule) { 170 | afterRule.append('bottom: -' + (parseInt(beaker.size.split('px')[0], 10) - border) + 'px'); 171 | afterRule.append('border-top: ' + beaker.size + ' solid ' + afterColor); 172 | } 173 | break; 174 | case 'left': 175 | beforeRule.append('left: -' + beaker.size); 176 | commonRules.push('border-top: ' + transparentTriangle); 177 | commonRules.push('border-bottom: ' + transparentTriangle); 178 | beforeRule.append('border-right: ' + solidTriangle); 179 | if (afterRule) { 180 | afterRule.append('left: -' + (parseInt(beaker.size.split('px')[0], 10) - border) + 'px'); 181 | afterRule.append('border-right: ' + beaker.size + ' solid ' + afterColor); 182 | } 183 | break; 184 | case 'right': 185 | beforeRule.append('right: -' + beaker.size); 186 | commonRules.push('border-top: ' + transparentTriangle); 187 | commonRules.push('border-bottom: ' + transparentTriangle); 188 | beforeRule.append('border-left: ' + solidTriangle); 189 | if (afterRule) { 190 | afterRule.append('right: -' + (parseInt(beaker.size.split('px')[0], 10) - border) + 'px'); 191 | afterRule.append('border-left: ' + beaker.size + ' solid ' + afterColor); 192 | } 193 | break; 194 | default: 195 | throw 'Provide correct position for bubble-beaker. Some examples\n are top-right, top-center, left-middle, left-top'; 196 | } 197 | 198 | var beakerPos = parseInt(beaker.size.split('px')[0], 10) * 1.5 + 'px'; 199 | switch (beaker.position.toLowerCase()) { 200 | case 'left': 201 | commonRules.push('left: ' + beakerPos); 202 | break; 203 | case 'right': 204 | commonRules.push('right: ' + beakerPos); 205 | break; 206 | case 'center': 207 | commonRules.push('left: calc(50% - ' + beaker.size + ')'); 208 | commonRules.push('transformX: -50%'); 209 | break; 210 | case 'middle': 211 | commonRules.push('top: calc(50% - ' + beaker.size + ')'); 212 | commonRules.push('transformY: -50%'); 213 | break; 214 | case 'top': 215 | commonRules.push('top: ' + beakerPos); 216 | break; 217 | case 'bottom': 218 | commonRules.push('bottom: ' + beakerPos); 219 | break; 220 | } 221 | 222 | var _iteratorNormalCompletion2 = true; 223 | var _didIteratorError2 = false; 224 | var _iteratorError2 = undefined; 225 | 226 | try { 227 | for (var _iterator2 = commonRules[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { 228 | var _rule = _step2.value; 229 | 230 | beforeRule.append(_rule); 231 | if (afterRule) afterRule.append(_rule); 232 | } 233 | } catch (err) { 234 | _didIteratorError2 = true; 235 | _iteratorError2 = err; 236 | } finally { 237 | try { 238 | if (!_iteratorNormalCompletion2 && _iterator2.return) { 239 | _iterator2.return(); 240 | } 241 | } finally { 242 | if (_didIteratorError2) { 243 | throw _iteratorError2; 244 | } 245 | } 246 | } 247 | 248 | rule.parent.nodes.push(beforeRule); 249 | if (afterRule) rule.parent.nodes.push(afterRule); 250 | }; 251 | 252 | module.exports = postcss.plugin('postcss-bubble', function (opts) { 253 | opts = opts || {}; 254 | 255 | return function (css) { 256 | css.walkDecls(function (decl, i) { 257 | var rule = decl.parent; 258 | var value = decl.prop; 259 | 260 | if (decl.prop === 'bubble') { 261 | // Get bubble beaker if specified 262 | var bubble = {}; 263 | var beaker = {}; 264 | 265 | var obj = getBeakerDeclarationValues(rule); 266 | var bubbleBeakerValues = obj.bubbleBeakerValues; 267 | var position = obj.position; 268 | var bubbleBackColor = obj.bubbleBackColor; 269 | 270 | // Consolidate all the values to construct 271 | var bubbleValues = decl.value.split(' '); 272 | 273 | var specs = extractBubbleAndBeakerSpecs(bubbleValues, bubbleBeakerValues); 274 | bubble = specs.bubble; 275 | bubble.backColor = bubbleBackColor; 276 | beaker = specs.beaker; 277 | 278 | addBubble(bubble, beaker, position, rule); 279 | addBeaker(bubble, beaker, rule); 280 | 281 | rule.removeChild(decl); 282 | } 283 | }); 284 | }; 285 | }); 286 | -------------------------------------------------------------------------------- /index_dev.js: -------------------------------------------------------------------------------- 1 | const postcss = require('postcss'); 2 | 3 | const getBeakerDeclarationValues = (rule) => { 4 | let bubbleBeakerValues = []; 5 | let position = null; 6 | let bubbleBackColor = null; 7 | 8 | for (let node of rule.nodes) { 9 | switch (node.prop.trim().toLowerCase()) { 10 | case 'bubble-beaker': 11 | bubbleBeakerValues = node.value.split(' '); 12 | rule.removeChild(node); 13 | break; 14 | case 'position': 15 | position = node.value; 16 | break; 17 | case 'bubble-background': 18 | bubbleBackColor = node.value; 19 | rule.removeChild(node); 20 | break; 21 | } 22 | } 23 | return { 24 | bubbleBeakerValues, 25 | position, 26 | bubbleBackColor 27 | }; 28 | }; 29 | 30 | const extractBubbleAndBeakerSpecs = (bubbleValues, beakerValues) => { 31 | let bubble = {}; 32 | let beaker = {}; 33 | 34 | if (bubbleValues && bubbleValues.length !== 4) { 35 | throw `Bubble is not correctly specified. Please check the docs 36 | and provide the right values.`; 37 | } 38 | 39 | if (beakerValues && beakerValues.length !== 2) { 40 | throw `Bubble beaker is not specified correctly. Please check the docs and 41 | provide the right values.`; 42 | } 43 | 44 | [bubble.borderSize, bubble.borderRadius, bubble.type, bubble.color] = bubbleValues; 45 | 46 | if (beakerValues[1].indexOf('-') >= 0) { 47 | beaker.direction = beakerValues ? (beakerValues[1].split('-'))[0] : null; 48 | beaker.position = beakerValues ? (beakerValues[1].split('-'))[1] : null; 49 | } else { 50 | throw `Beaker is not provided correctly. Please check the docs and 51 | provide the right values.`; 52 | } 53 | 54 | let possibleDirections = ['top', 'bottom', 'left', 'right']; 55 | let possiblePositions = ['top', 'bottom', 'left', 'right', 'center', 'middle']; 56 | 57 | if (possibleDirections.indexOf(beaker.direction) < 0 || 58 | possiblePositions.indexOf(beaker.position) < 0) { 59 | throw `Beaker is not provided correctly. Please specify bubble-beaker: 60 | . Beaker position should be top-left, 61 | top-right, bottom-center, left-middle, etc.`; 62 | } 63 | 64 | beaker.size = beakerValues ? beakerValues[0] : null; 65 | 66 | if (beaker.size.indexOf('px') < 0) { 67 | throw 'Expecting a px value for beaker size. Please do not provide other units'; 68 | } 69 | 70 | return { 71 | bubble, 72 | beaker 73 | }; 74 | }; 75 | 76 | const addBubble = (bubble, beaker, position, rule) => { 77 | // Add border size for the bubble 78 | if (parseInt(bubble.borderSize, 10) > 0) { 79 | rule.append('border: ' + bubble.borderSize + ' solid ' + bubble.color); 80 | } 81 | 82 | if (bubble.type.toLowerCase() === 'solid') { 83 | rule.append('background-color: ' + bubble.color); 84 | } 85 | 86 | if (bubble.backColor) { 87 | rule.append('background-color: ' + bubble.backColor); 88 | } 89 | 90 | // Add border radius if any 91 | if (parseInt(bubble.borderRadius, 10) > 0) { 92 | rule.append('border-radius: ' + bubble.borderRadius); 93 | } 94 | 95 | // Adjust the positioning of the bubble based on beaker 96 | if (beaker.size && beaker.direction 97 | && parseInt(beaker.size, 10) > 0) { 98 | rule.append('margin-' + beaker.direction + ':' + beaker.size); 99 | } 100 | 101 | // Add position relative to container so the beaker will appear correctly. 102 | if (!position) { 103 | rule.append('position: relative'); 104 | } else if (position !== 'absolute' || position !== 'relative') { 105 | throw 'Position for the bubble should either be absolute or relative.'; 106 | } 107 | }; 108 | 109 | const addBeaker = (bubble, beaker, rule) => { 110 | // Add the beaker now 111 | let beforeRule = postcss.rule({selector: rule.selector + ':before'}); 112 | let afterRule = null; 113 | 114 | if (bubble.type === 'hollow') { 115 | // We need to add another beaker the same background color as the bubble 116 | // to create a caret look instead of triangle. 117 | afterRule = postcss.rule({selector: rule.selector + ':after'}); 118 | } 119 | 120 | var commonRules = [ 121 | 'content: \'\'', 122 | 'position: absolute' 123 | ]; 124 | 125 | const afterColor = bubble.backColor ? bubble.backColor : 'white'; 126 | const transparentTriangle = beaker.size + ' solid transparent'; 127 | const solidTriangle = beaker.size + ' solid ' + bubble.color; 128 | let border = parseInt(bubble.borderSize.split('px')[0], 10) || 1; 129 | border = border > 1 ? border + 1 : 1; 130 | 131 | 132 | // First add solid colored beaker 133 | switch(beaker.direction.toLowerCase()) { 134 | case 'top': 135 | beforeRule.append('top: -' + beaker.size); 136 | commonRules.push('border-left: ' + transparentTriangle); 137 | commonRules.push('border-right: ' + transparentTriangle); 138 | beforeRule.append('border-bottom: ' + solidTriangle); 139 | if (afterRule) { 140 | afterRule.append('top: -' + (parseInt(beaker.size.split('px')[0], 10) - border) + 'px'); 141 | afterRule.append('border-bottom: ' + beaker.size + ' solid ' + afterColor); 142 | } 143 | break; 144 | case 'bottom': 145 | beforeRule.append('bottom: -' + beaker.size); 146 | commonRules.push('border-left: ' + transparentTriangle); 147 | commonRules.push('border-right: ' + transparentTriangle); 148 | beforeRule.append('border-top: ' + solidTriangle); 149 | if (afterRule) { 150 | afterRule.append('bottom: -' + (parseInt(beaker.size.split('px')[0], 10) - border) + 'px'); 151 | afterRule.append('border-top: ' + beaker.size + ' solid ' + afterColor); 152 | } 153 | break; 154 | case 'left': 155 | beforeRule.append('left: -' + beaker.size); 156 | commonRules.push('border-top: ' + transparentTriangle); 157 | commonRules.push('border-bottom: ' + transparentTriangle); 158 | beforeRule.append('border-right: ' + solidTriangle); 159 | if (afterRule) { 160 | afterRule.append('left: -' + (parseInt(beaker.size.split('px')[0], 10) - border) + 'px'); 161 | afterRule.append('border-right: ' + beaker.size + ' solid ' + afterColor); 162 | } 163 | break; 164 | case 'right': 165 | beforeRule.append('right: -' + beaker.size); 166 | commonRules.push('border-top: ' + transparentTriangle); 167 | commonRules.push('border-bottom: ' + transparentTriangle); 168 | beforeRule.append('border-left: ' + solidTriangle); 169 | if (afterRule) { 170 | afterRule.append('right: -' + (parseInt(beaker.size.split('px')[0], 10) - border) + 'px'); 171 | afterRule.append('border-left: ' + beaker.size + ' solid ' + afterColor); 172 | } 173 | break; 174 | default: 175 | throw `Provide correct position for bubble-beaker. Some examples 176 | are top-right, top-center, left-middle, left-top`; 177 | } 178 | 179 | const beakerPos = parseInt(beaker.size.split('px')[0], 10) * 1.5 + 'px'; 180 | switch(beaker.position.toLowerCase()) { 181 | case 'left': 182 | commonRules.push('left: ' + beakerPos); 183 | break; 184 | case 'right': 185 | commonRules.push('right: ' + beakerPos); 186 | break; 187 | case 'center': 188 | commonRules.push('left: calc(50% - ' + beaker.size + ')'); 189 | commonRules.push('transformX: -50%'); 190 | break; 191 | case 'middle': 192 | commonRules.push('top: calc(50% - ' + beaker.size + ')'); 193 | commonRules.push('transformY: -50%'); 194 | break; 195 | case 'top': 196 | commonRules.push('top: ' + beakerPos); 197 | break; 198 | case 'bottom': 199 | commonRules.push('bottom: ' + beakerPos); 200 | break; 201 | } 202 | 203 | for (let rule of commonRules) { 204 | beforeRule.append(rule); 205 | if(afterRule) afterRule.append(rule); 206 | } 207 | 208 | rule.parent.nodes.push(beforeRule); 209 | if (afterRule) rule.parent.nodes.push(afterRule); 210 | }; 211 | 212 | module.exports = postcss.plugin('postcss-bubble', function (opts) { 213 | opts = opts || {}; 214 | 215 | return function (css) { 216 | css.walkDecls(function (decl, i) { 217 | let rule = decl.parent; 218 | let value = decl.prop; 219 | 220 | if (decl.prop === 'bubble') { 221 | // Get bubble beaker if specified 222 | let bubble = {}; 223 | let beaker = {}; 224 | 225 | const obj = getBeakerDeclarationValues(rule); 226 | const bubbleBeakerValues = obj.bubbleBeakerValues; 227 | const position = obj.position; 228 | const bubbleBackColor = obj.bubbleBackColor; 229 | 230 | // Consolidate all the values to construct 231 | const bubbleValues = decl.value.split(' '); 232 | 233 | const specs = extractBubbleAndBeakerSpecs(bubbleValues, bubbleBeakerValues); 234 | bubble = specs.bubble; 235 | bubble.backColor = bubbleBackColor; 236 | beaker = specs.beaker; 237 | 238 | addBubble(bubble, beaker, position, rule); 239 | addBeaker(bubble, beaker, rule); 240 | 241 | rule.removeChild(decl); 242 | } 243 | 244 | }); 245 | }; 246 | }); 247 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-speech-bubble", 3 | "version": "1.0.12", 4 | "description": "PostCSS plugin creates speech bubbles with just 1-2 lines of CSS", 5 | "keywords": [ 6 | "postcss", 7 | "css", 8 | "postcss-plugin", 9 | "speech", 10 | "bubbles" 11 | ], 12 | "author": "ArchanaS ", 13 | "license": "MIT", 14 | "repository": "archana-s/postcss-speech-bubble", 15 | "bugs": { 16 | "url": "https://github.com/archana-s/postcss-speech-bubble/issues" 17 | }, 18 | "homepage": "https://github.com/archana-s/postcss-speech-bubble", 19 | "dependencies": { 20 | "ava": "^0.20.0", 21 | "postcss": "^5.0.13" 22 | }, 23 | "devDependencies": { 24 | "eslint": "^1.10.3" 25 | }, 26 | "scripts": { 27 | "test": "ava", 28 | "babelify": "babel --presets es2015 index_dev.js --out-file index.js" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | import postcss from 'postcss'; 2 | import test from 'ava'; 3 | import fs from 'fs'; 4 | import bubble from './'; 5 | 6 | require.extensions['.css'] = function (module, filename) { 7 | module.exports = fs.readFileSync(filename, 'utf8'); 8 | }; 9 | 10 | var inputCSS = require('./test/input.css'); 11 | var outputCSS = require('./test/output.css'); 12 | 13 | var inputBubbleNotCorrect = require('./test/input_bubbleIncorrect.css'); 14 | var inputBeakerNotSpecified = require('./test/input_bubbleBeakerNotSpecified.css'); 15 | var inputBeakerNotSpecifiedCorrectly = require('./test/input_beakerIncorrect.css'); 16 | var inputBeakerPositionDirectionIncorrect = require('./test/input_beakerPositionDirectionIncorrect.css'); 17 | 18 | function run(t, input, output, opts = { }) { 19 | return postcss([ bubble(opts) ]).process(input) 20 | .then( result => { 21 | if (opts.shouldThrowError) { 22 | t.fail(); 23 | } 24 | t.deepEqual(result.css, output); 25 | t.deepEqual(result.warnings().length, opts.error || 0); 26 | }) 27 | .catch( () => { 28 | if (opts.shouldThrowError) { 29 | t.pass(); 30 | } 31 | }); 32 | } 33 | 34 | test('converts bubble values to CSS', t => { 35 | return run(t, inputCSS.toString(), outputCSS.toString(), { }); 36 | }); 37 | 38 | test('throws exception when bubble is not specified correctly', t => { 39 | return run(t, inputBubbleNotCorrect, '', { shouldThrowError: true }); 40 | }); 41 | 42 | test('throws exception when bubble-beaker is not specified', t => { 43 | return run(t, inputBeakerNotSpecified, '', { shouldThrowError: true }); 44 | }); 45 | 46 | test('throws exception when bubble-beaker is not specified correctly', t => { 47 | return run(t, inputBeakerNotSpecifiedCorrectly, '', 48 | { shouldThrowError: true }); 49 | }); 50 | 51 | test('throws exception when bubble-beaker position/direction is not specified correctly', t => { 52 | return run(t, inputBeakerPositionDirectionIncorrect, '', 53 | { shouldThrowError: true }); 54 | }); 55 | -------------------------------------------------------------------------------- /test/input.css: -------------------------------------------------------------------------------- 1 | .bubble { 2 | bubble-beaker: 10px top-right; 3 | bubble: 0 0 solid orange; 4 | width: 140px; 5 | height: 80px; 6 | } 7 | 8 | .bubble-1 { 9 | bubble: 1px 10px hollow black; 10 | bubble-beaker: 10px left-top; 11 | width: 150px; 12 | height: 100px; 13 | bubble-background: orange; 14 | } 15 | -------------------------------------------------------------------------------- /test/input_beakerIncorrect.css: -------------------------------------------------------------------------------- 1 | .bubble { 2 | bubble-beaker: top-right; 3 | bubble: 0 0 solid orange; 4 | width: 140px; 5 | height: 80px; 6 | } 7 | -------------------------------------------------------------------------------- /test/input_beakerPositionDirectionIncorrect.css: -------------------------------------------------------------------------------- 1 | .bubble { 2 | bubble-beaker: 10px top-grey; 3 | bubble: 0 0 solid orange; 4 | width: 140px; 5 | height: 80px; 6 | } 7 | 8 | .bubble-1 { 9 | bubble: 1px 10px hollow black; 10 | bubble-beaker: 10px left-top; 11 | width: 150px; 12 | height: 100px; 13 | bubble-background: orange; 14 | } 15 | -------------------------------------------------------------------------------- /test/input_bubbleBeakerNotSpecified.css: -------------------------------------------------------------------------------- 1 | .bubble { 2 | bubble: 0 0 solid orange; 3 | width: 140px; 4 | height: 80px; 5 | } 6 | -------------------------------------------------------------------------------- /test/input_bubbleIncorrect.css: -------------------------------------------------------------------------------- 1 | .bubble { 2 | bubble-beaker: 10px top-right; 3 | bubble: 0 solid orange; 4 | width: 140px; 5 | height: 80px; 6 | } 7 | -------------------------------------------------------------------------------- /test/output.css: -------------------------------------------------------------------------------- 1 | .bubble { 2 | width: 140px; 3 | height: 80px; 4 | background-color: orange; 5 | margin-top: 10px; 6 | position: relative; 7 | } 8 | 9 | .bubble-1 { 10 | width: 150px; 11 | height: 100px; 12 | border: 1px solid black; 13 | background-color: orange; 14 | border-radius: 10px; 15 | margin-left: 10px; 16 | position: relative; 17 | }.bubble:before { 18 | top: -10px; 19 | border-bottom: 10px solid orange; 20 | content: ''; 21 | position: absolute; 22 | border-left: 10px solid transparent; 23 | border-right: 10px solid transparent; 24 | right: 15px 25 | }.bubble-1:before { 26 | left: -10px; 27 | border-right: 10px solid black; 28 | content: ''; 29 | position: absolute; 30 | border-top: 10px solid transparent; 31 | border-bottom: 10px solid transparent; 32 | top: 15px 33 | }.bubble-1:after { 34 | left: -9px; 35 | border-right: 10px solid orange; 36 | content: ''; 37 | position: absolute; 38 | border-top: 10px solid transparent; 39 | border-bottom: 10px solid transparent; 40 | top: 15px 41 | } 42 | --------------------------------------------------------------------------------