/**
 * A regex to match css `:host` selector.
 * @type {RegExp}
 * @private
 */
const HOST_REGEX = /:host(\(([^({)]+(\([^)]*\))?)+\))?/g;
/**
 * CSSKeyframesRule class.
 * @type {function}
 * @private
 */
const KFRule = self.CSSKeyframesRule ||
    self.WebKitCSSKeyframesRule ||
    self.MozCSSKeyframesRule;

/**
 * Add a scope to all selectors.
 * @private
 *
 * @param {CSSStyleSheet} sheet The css sheet to scope.
 * @param {String} scope The scope selector.
 */
function scoped(sheet, scope) {
    let rules = sheet.cssRules || sheet.rules;
    if (sheet.insertRule) {
        let reg = new RegExp(`${scope}([\\s.[:]|$)`);
        for (let i = 0, len = rules.length; i < len; i++) {
            let rule = rules[i];
            if (!(rule instanceof KFRule)) {
                try {
                    let body = rule.cssText;
                    if (rule.selectorText) {
                        let selector = rule.cssText.split('{').shift().split(',')
                            .map((rule) => {
                                rule = rule.trim();
                                if (rule.match(reg)) {
                                    return rule;
                                }
                                return `${scope} ${rule}`;
                            })
                            .join(', ');
                        body = rule.cssText.replace(rule.selectorText, selector);
                        // Safari does not use "..." for single word content
                        if (rule.style && rule.style.content && !rule.style.content.match(/^([\w_-]+\(|['"])/)) {
                            body = body.replace(`content: ${rule.style.content}`, `content: "${rule.style.content}"`);
                        }
                    } else if (rule.cssRules || rule.rules) {
                        scoped(rule, scope);
                        body = rule.cssText;
                    }
                    sheet.deleteRule(i);
                    sheet.insertRule(body, i);
                } catch (ex) {
                    //
                }
            }
        }
    }
    return rules;
}

/**
 * Convert a shadowDOM css string into a normal scoped css.
 * @private
 *
 * @param {HTMLStyleElement} style The style element.
 * @param {String} css The css string to convert.
 * @param {String} is The component name for scoping.
 */
export function convertShadowCSS(style, css, is) {
    let scope = `.${is}`;
    style.textContent = css.replace(HOST_REGEX, (fullMatch, mod) =>
        `${scope}${mod ? mod.slice(1, -1) : ''}`
    );
    style.textContent = [].map.call(
        scoped(style.sheet, scope),
        (rule) => rule.cssText
    ).join('');
}

@@ -131,16 +131,137 @@
 %5C))?/g;%0A
+/**%0A * A regex to match content rule.%0A * @type %7BRegExp%7D%0A * @private%0A */%0Aconst CONTENT_REGEX = /content:%5Cs*(%5B%5Cw_-%5D*);/g;%0A%0A
 /**%0A * C
@@ -279,24 +279,24 @@
 Rule class.%0A
-
  * @type %7Bfu
@@ -1488,321 +1488,128 @@
 Text
-.replace(rule.selectorText, selector);%0A                        // Safari does not use %22...%22 for single word content%0A                        if (rule.style && rule.style.content && !rule.style.content.match(/%5E(%5B%5Cw_-%5D+%5C(%7C%5B'%22%5D)/)) %7B%0A                            body = body.replace(%60content: $%7Brule.style.content%7D%60, %60
+%0A                            .replace(rule.selectorText, selector)%0A                            .replace(CONTENT_REGEX, '
 cont
@@ -1619,58 +1619,14 @@
 : %22$
-%7Brule.style.content%7D%22%60);%0A                        %7D
+1%22;');
 %0A   
@@ -1997,21 +1997,130 @@
  return 
-rules
+%5B%5D.map.call(%0A        rules,%0A        (rule) =%3E rule.cssText.replace(CONTENT_REGEX, 'content: %22$1%22;')%0A    ).join('')
 ;%0A%7D%0A%0A/**
@@ -2461,16 +2461,25 @@
 nt = css
+%0A        
 .replace
@@ -2519,16 +2519,20 @@
         
+    
 %60$%7Bscope
@@ -2564,16 +2564,20 @@
  : ''%7D%60%0A
+    
     );%0A 
@@ -2598,37 +2598,16 @@
 ontent =
- %5B%5D.map.call(%0A       
  scoped(
@@ -2629,55 +2629,8 @@
 ope)
-,%0A        (rule) =%3E rule.cssText%0A    ).join('')
 ;%0A%7D%0A

update style text after shadow transpiling #22