update elements and fix some bugs

lib/src/prism/plugins/previewer-gradient/prism-previewer-gradient.js

+(function() {
+
+        if (
+                typeof self !== 'undefined' && !self.Prism ||
+                typeof global !== 'undefined' && !global.Prism
+        ) {
+                return;
+        }
+
+        var languages = {
+                'css': true,
+                'less': true,
+                'sass': [
+                        {
+                                lang: 'sass',
+                                before: 'punctuation',
+                                inside: 'inside',
+                                root: Prism.languages.sass && Prism.languages.sass['variable-line']
+                        },
+                        {
+                                lang: 'sass',
+                                before: 'punctuation',
+                                inside: 'inside',
+                                root: Prism.languages.sass && Prism.languages.sass['property-line']
+                        }
+                ],
+                'scss': true,
+                'stylus': [
+                        {
+                                lang: 'stylus',
+                                before: 'func',
+                                inside: 'rest',
+                                root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside
+                        },
+                        {
+                                lang: 'stylus',
+                                before: 'func',
+                                inside: 'rest',
+                                root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside
+                        }
+                ]
+        };
+
+        Prism.hooks.add('before-highlight', function (env) {
+                if (env.language && languages[env.language] && !languages[env.language].initialized) {
+                        var lang = languages[env.language];
+                        if (Prism.util.type(lang) !== 'Array') {
+                                lang = [lang];
+                        }
+                        lang.forEach(function(lang) {
+                                var before, inside, root, skip;
+                                if (lang === true) {
+                                        // Insert before color previewer if it exists
+                                        before = Prism.plugins.Previewer && Prism.plugins.Previewer.byType['color'] ? 'color' : 'important';
+                                        inside = env.language;
+                                        lang = env.language;
+                                } else {
+                                        before = lang.before || 'important';
+                                        inside = lang.inside || lang.lang;
+                                        root = lang.root || Prism.languages;
+                                        skip = lang.skip;
+                                        lang = env.language;
+                                }
+
+                                if (!skip && Prism.languages[lang]) {
+                                        Prism.languages.insertBefore(inside, before, {
+                                                'gradient': {
+                                                        pattern: /(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:rgb|hsl)a?\(.+?\)|[^\)])+\)/gi,
+                                                        inside: {
+                                                                'function': /[\w-]+(?=\()/,
+                                                                'punctuation': /[(),]/
+                                                        }
+                                                }
+                                        }, root);
+                                        env.grammar = Prism.languages[lang];
+
+                                        languages[env.language] = {initialized: true};
+                                }
+                        });
+                }
+        });
+
+        // Stores already processed gradients so that we don't
+        // make the conversion every time the previewer is shown
+        var cache = {};
+
+        /**
+         * Returns a W3C-valid linear gradient
+         * @param {string} prefix Vendor prefix if any ("-moz-", "-webkit-", etc.)
+         * @param {string} func Gradient function name ("linear-gradient")
+         * @param {string[]} values Array of the gradient function parameters (["0deg", "red 0%", "blue 100%"])
+         */
+        var convertToW3CLinearGradient = function(prefix, func, values) {
+                // Default value for angle
+                var angle = '180deg';
+
+                if (/^(?:-?\d*\.?\d+(?:deg|rad)|to\b|top|right|bottom|left)/.test(values[0])) {
+                        angle = values.shift();
+                        if (angle.indexOf('to ') < 0) {
+                                // Angle uses old keywords
+                                // W3C syntax uses "to" + opposite keywords
+                                if (angle.indexOf('top') >= 0) {
+                                        if (angle.indexOf('left') >= 0) {
+                                                angle = 'to bottom right';
+                                        } else if (angle.indexOf('right') >= 0) {
+                                                angle = 'to bottom left';
+                                        } else {
+                                                angle = 'to bottom';
+                                        }
+                                } else if (angle.indexOf('bottom') >= 0) {
+                                        if (angle.indexOf('left') >= 0) {
+                                                angle = 'to top right';
+                                        } else if (angle.indexOf('right') >= 0) {
+                                                angle = 'to top left';
+                                        } else {
+                                                angle = 'to top';
+                                        }
+                                } else if (angle.indexOf('left') >= 0) {
+                                        angle = 'to right';
+                                } else if (angle.indexOf('right') >= 0) {
+                                        angle = 'to left';
+                                } else if (prefix) {
+                                        // Angle is shifted by 90deg in prefixed gradients
+                                        if (angle.indexOf('deg') >= 0) {
+                                                angle = (90 - parseFloat(angle)) + 'deg';
+                                        } else if (angle.indexOf('rad') >= 0) {
+                                                angle = (Math.PI / 2 - parseFloat(angle)) + 'rad';
+                                        }
+                                }
+                        }
+                }
+
+                return func + '(' + angle + ',' + values.join(',') + ')';
+        };
+
+        /**
+         * Returns a W3C-valid radial gradient
+         * @param {string} prefix Vendor prefix if any ("-moz-", "-webkit-", etc.)
+         * @param {string} func Gradient function name ("linear-gradient")
+         * @param {string[]} values Array of the gradient function parameters (["0deg", "red 0%", "blue 100%"])
+         */
+        var convertToW3CRadialGradient = function(prefix, func, values) {
+                if (values[0].indexOf('at') < 0) {
+                        // Looks like old syntax
+
+                        // Default values
+                        var position = 'center';
+                        var shape = 'ellipse';
+                        var size = 'farthest-corner';
+
+                        if (/\bcenter|top|right|bottom|left\b|^\d+/.test(values[0])) {
+                                // Found a position
+                                // Remove angle value, if any
+                                position = values.shift().replace(/\s*-?\d+(?:rad|deg)\s*/, '');
+                        }
+                        if (/\bcircle|ellipse|closest|farthest|contain|cover\b/.test(values[0])) {
+                                // Found a shape and/or size
+                                var shapeSizeParts = values.shift().split(/\s+/);
+                                if (shapeSizeParts[0] && (shapeSizeParts[0] === 'circle' || shapeSizeParts[0] === 'ellipse')) {
+                                        shape = shapeSizeParts.shift();
+                                }
+                                if (shapeSizeParts[0]) {
+                                        size = shapeSizeParts.shift();
+                                }
+
+                                // Old keywords are converted to their synonyms
+                                if (size === 'cover') {
+                                        size = 'farthest-corner';
+                                } else if (size === 'contain') {
+                                        size = 'clothest-side';
+                                }
+                        }
+
+                        return func + '(' + shape + ' ' + size + ' at ' + position + ',' + values.join(',') + ')';
+                }
+                return func + '(' + values.join(',') + ')';
+        };
+
+        /**
+         * Converts a gradient to a W3C-valid one
+         * Does not support old webkit syntax (-webkit-gradient(linear...) and -webkit-gradient(radial...))
+         * @param {string} gradient The CSS gradient
+         */
+        var convertToW3CGradient = function(gradient) {
+                if (cache[gradient]) {
+                        return cache[gradient];
+                }
+                var parts = gradient.match(/^(\b|\B-[a-z]{1,10}-)((?:repeating-)?(?:linear|radial)-gradient)/);
+                // "", "-moz-", etc.
+                var prefix = parts && parts[1];
+                // "linear-gradient", "radial-gradient", etc.
+                var func = parts && parts[2];
+
+                var values = gradient.replace(/^(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\(|\)$/g, '').split(/\s*,\s*/);
+
+                if (func.indexOf('linear') >= 0) {
+                        return cache[gradient] = convertToW3CLinearGradient(prefix, func, values);
+                } else if (func.indexOf('radial') >= 0) {
+                        return cache[gradient] = convertToW3CRadialGradient(prefix, func, values);
+                }
+                return cache[gradient] = func + '(' + values.join(',') + ')';
+        };
+
+
+
+        if (Prism.plugins.Previewer) {
+                new Prism.plugins.Previewer('gradient', function(value) {
+                        this.firstChild.style.backgroundImage = '';
+                        this.firstChild.style.backgroundImage = convertToW3CGradient(value);
+                        return !!this.firstChild.style.backgroundImage;
+                }, '*', function () {
+                        this._elt.innerHTML = '<div></div>';
+                });
+        }
+
+}());