Dynamic styling - Removed need for CSS file

demo/assets/css/style.css

@@ -386,64 +386,15 @@ small { text-shadow: 0 1px 0 #fff }
 
 :-moz-placeholder { color: #aaa }
 
-/* Base styles */
-
-.flex-text-wrap {
-    position: relative;
-    *zoom: 1;
-}
-
-textarea,
-.flex-text-wrap {
-    outline: 0;
-    margin: 0;
-    border: none;
-    padding: 0;
-    *padding-bottom: 0!important;
-}
-
-.flex-text-wrap textarea,
-.flex-text-wrap pre {
-    *white-space: pre;
-    *word-wrap: break-word;
-    white-space: pre-wrap;
-    width: 100%;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-.flex-text-wrap textarea {
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    resize: none;
-    /* IE7 box-sizing fudge factor */
-    *height: 94%;
-    *width: 94%;
-}
-
-.flex-text-wrap pre {
-    display: block;
-    visibility: hidden;
-}
-
 /* Custom styles */
 
-.flex-text-wrap,
-textarea { margin-bottom: 25px }
-
-textarea,
-.flex-text-wrap pre {
+textarea {
     /* Ensure typography, padding, border-width & min-height are identical across textarea & pre */
     line-height: 1.7;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 100%;
-    padding: 22px 25px 0;
+    padding: 25px;
+	margin-bottom: 25px;
     min-height: 125px;
     border: 1px solid #c6c8ce;
     width: 100%;

jquery.flexText.js

@@ -5,24 +5,71 @@
  * Usage example: $('textarea').flexText()
  * Info: https://github.com/alexdunphy/flexible-textareas
  */
-;(function ($) {
+
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], factory);
+    } else if (typeof exports === 'object') {
+        module.exports = factory(require('jquery'));
+    } else {
+        factory(jQuery);
+    }
+}(function ($) {
 
     // Constructor
     function FT(elem) {
         this.$textarea = $(elem);
 
         this._init();
     }
+
+    var cssGlobWrapper = {
+            position: 'relative',
+            padding: '0',
+            outline: '0'
+        },
+        cssGlobPre = {
+            margin: '0',
+            border: '0',
+            outline: '0',
+            width: '100%',
+            visibility: 'hidden',
+            'white-space': 'pre-wrap',
+            'box-sizing': 'border-box'            
+        },
+        cssGlobTextArea = {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            resize: 'none',
+            margin: '0',
+            'box-sizing': 'border-box'
+        };
 
     FT.prototype = {
         _init: function () {
-            var _this = this;
+            var _this = this,
+                cssPre = this.$textarea.css([
+                    'border','outline','padding',
+                    'font','letter-spacing','word-spacing',
+                    'text-align','text-decoration',
+                    'text-indent','text-transform'
+                ]),
+                cssWrapper = this.$textarea.css(['margin']);
 
+            cssWrapper['min-height'] = this.$textarea.outerHeight();
+
             // Insert wrapper elem & pre/span for textarea mirroring
-            this.$textarea.wrap('<div class="flex-text-wrap" />').before('<pre><span /><br /><br /></pre>');
+            this.$textarea.wrap('<div />').before('<pre aria-hidden="true" role="presentation"><span /><br /></pre>');
 
             this.$span = this.$textarea.prev().find('span');
 
+            this.$textarea.parent().css(cssGlobWrapper).css(cssWrapper);
+            this.$textarea.prev().css(cssGlobPre).css(cssPre);
+            this.$textarea.css(cssGlobTextArea);
+
             // Add input event listeners
             // * input for modern browsers
             // * propertychange for IE 7 & 8
@@ -61,4 +108,4 @@
         });
     };
 
-})(jQuery);
+}));