@duetds/components
Version:
This package includes Duet Core Components and related tools.
383 lines (382 loc) • 15.5 kB
JavaScript
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*
* This file is a port of shadowCSS from webcomponents.js to TypeScript.
* https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
* https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
*/
var safeSelector = function (selector) {
var placeholders = [];
var index = 0;
var content;
// Replaces attribute selectors with placeholders.
// The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
selector = selector.replace(/(\[[^\]]*\])/g, function (_, keep) {
var replaceBy = "__ph-" + index + "__";
placeholders.push(keep);
index++;
return replaceBy;
});
// Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
// WS and "+" would otherwise be interpreted as selector separators.
content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, function (_, pseudo, exp) {
var replaceBy = "__ph-" + index + "__";
placeholders.push(exp);
index++;
return pseudo + replaceBy;
});
var ss = {
content: content,
placeholders: placeholders,
};
return ss;
};
var restoreSafeSelector = function (placeholders, content) {
return content.replace(/__ph-(\d+)__/g, function (_, index) { return placeholders[+index]; });
};
var _polyfillHost = '-shadowcsshost';
var _polyfillSlotted = '-shadowcssslotted';
// note: :host-context pre-processed to -shadowcsshostcontext.
var _polyfillHostContext = '-shadowcsscontext';
var _parenSuffix = ')(?:\\((' +
'(?:\\([^)(]*\\)|[^)(]*)+?' +
')\\))?([^,{]*)';
var _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');
var _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');
var _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');
var _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
var _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
var _shadowDOMSelectorsRe = [
/::shadow/g,
/::content/g
];
var _selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$';
var _polyfillHostRe = /-shadowcsshost/gim;
var _colonHostRe = /:host/gim;
var _colonSlottedRe = /::slotted/gim;
var _colonHostContextRe = /:host-context/gim;
var _commentRe = /\/\*\s*[\s\S]*?\*\//g;
var stripComments = function (input) {
return input.replace(_commentRe, '');
};
var _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
var extractCommentsWithHash = function (input) {
return input.match(_commentWithHashRe) || [];
};
var _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
var _curlyRe = /([{}])/g;
var OPEN_CURLY = '{';
var CLOSE_CURLY = '}';
var BLOCK_PLACEHOLDER = '%BLOCK%';
var processRules = function (input, ruleCallback) {
var inputWithEscapedBlocks = escapeBlocks(input);
var nextBlockIndex = 0;
return inputWithEscapedBlocks.escapedString.replace(_ruleRe, function () {
var m = [];
for (var _i = 0; _i < arguments.length; _i++) {
m[_i] = arguments[_i];
}
var selector = m[2];
var content = '';
var suffix = m[4];
var contentPrefix = '';
if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
contentPrefix = '{';
}
var cssRule = {
selector: selector,
content: content
};
var rule = ruleCallback(cssRule);
return "" + m[1] + rule.selector + m[3] + contentPrefix + rule.content + suffix;
});
};
var escapeBlocks = function (input) {
var inputParts = input.split(_curlyRe);
var resultParts = [];
var escapedBlocks = [];
var bracketCount = 0;
var currentBlockParts = [];
for (var partIndex = 0; partIndex < inputParts.length; partIndex++) {
var part = inputParts[partIndex];
if (part === CLOSE_CURLY) {
bracketCount--;
}
if (bracketCount > 0) {
currentBlockParts.push(part);
}
else {
if (currentBlockParts.length > 0) {
escapedBlocks.push(currentBlockParts.join(''));
resultParts.push(BLOCK_PLACEHOLDER);
currentBlockParts = [];
}
resultParts.push(part);
}
if (part === OPEN_CURLY) {
bracketCount++;
}
}
if (currentBlockParts.length > 0) {
escapedBlocks.push(currentBlockParts.join(''));
resultParts.push(BLOCK_PLACEHOLDER);
}
var strEscapedBlocks = {
escapedString: resultParts.join(''),
blocks: escapedBlocks
};
return strEscapedBlocks;
};
var insertPolyfillHostInCssText = function (selector) {
selector = selector
.replace(_colonHostContextRe, _polyfillHostContext)
.replace(_colonHostRe, _polyfillHost)
.replace(_colonSlottedRe, _polyfillSlotted);
return selector;
};
var convertColonRule = function (cssText, regExp, partReplacer) {
// m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule
return cssText.replace(regExp, function () {
var m = [];
for (var _i = 0; _i < arguments.length; _i++) {
m[_i] = arguments[_i];
}
if (m[2]) {
var parts = m[2].split(',');
var r = [];
for (var i = 0; i < parts.length; i++) {
var p = parts[i].trim();
if (!p)
break;
r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
}
return r.join(',');
}
else {
return _polyfillHostNoCombinator + m[3];
}
});
};
var colonHostPartReplacer = function (host, part, suffix) {
return host + part.replace(_polyfillHost, '') + suffix;
};
var convertColonHost = function (cssText) {
return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
};
var colonHostContextPartReplacer = function (host, part, suffix) {
if (part.indexOf(_polyfillHost) > -1) {
return colonHostPartReplacer(host, part, suffix);
}
else {
return host + part + suffix + ', ' + part + ' ' + host + suffix;
}
};
var convertColonSlotted = function (cssText, slotAttr) {
var regExp = _cssColonSlottedRe;
return cssText.replace(regExp, function () {
var m = [];
for (var _i = 0; _i < arguments.length; _i++) {
m[_i] = arguments[_i];
}
if (m[2]) {
var compound = m[2].trim();
var suffix = m[3];
var sel = '.' + slotAttr + ' > ' + compound + suffix;
return sel;
}
else {
return _polyfillHostNoCombinator + m[3];
}
});
};
var convertColonHostContext = function (cssText) {
return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
};
var convertShadowDOMSelectors = function (cssText) {
return _shadowDOMSelectorsRe.reduce(function (result, pattern) { return result.replace(pattern, ' '); }, cssText);
};
var makeScopeMatcher = function (scopeSelector) {
var lre = /\[/g;
var rre = /\]/g;
scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
};
var selectorNeedsScoping = function (selector, scopeSelector) {
var re = makeScopeMatcher(scopeSelector);
return !re.test(selector);
};
var applySimpleSelectorScope = function (selector, scopeSelector, hostSelector) {
// In Android browser, the lastIndex is not reset when the regex is used in String.replace()
_polyfillHostRe.lastIndex = 0;
if (_polyfillHostRe.test(selector)) {
var replaceBy_1 = "." + hostSelector;
return selector
.replace(_polyfillHostNoCombinatorRe, function (_, selector) {
return selector.replace(/([^:]*)(:*)(.*)/, function (_, before, colon, after) {
return before + replaceBy_1 + colon + after;
});
})
.replace(_polyfillHostRe, replaceBy_1 + ' ');
}
return scopeSelector + ' ' + selector;
};
var applyStrictSelectorScope = function (selector, scopeSelector, hostSelector) {
var isRe = /\[is=([^\]]*)\]/g;
scopeSelector = scopeSelector.replace(isRe, function (_) {
var parts = [];
for (var _i = 1; _i < arguments.length; _i++) {
parts[_i - 1] = arguments[_i];
}
return parts[0];
});
var className = '.' + scopeSelector;
var _scopeSelectorPart = function (p) {
var scopedP = p.trim();
if (!scopedP) {
return '';
}
if (p.indexOf(_polyfillHostNoCombinator) > -1) {
scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);
}
else {
// remove :host since it should be unnecessary
var t = p.replace(_polyfillHostRe, '');
if (t.length > 0) {
var matches = t.match(/([^:]*)(:*)(.*)/);
if (matches) {
scopedP = matches[1] + className + matches[2] + matches[3];
}
}
}
return scopedP;
};
var safeContent = safeSelector(selector);
selector = safeContent.content;
var scopedSelector = '';
var startIndex = 0;
var res;
var sep = /( |>|\+|~(?!=))\s*/g;
// If a selector appears before :host it should not be shimmed as it
// matches on ancestor elements and not on elements in the host's shadow
// `:host-context(div)` is transformed to
// `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`
// the `div` is not part of the component in the 2nd selectors and should not be scoped.
// Historically `component-tag:host` was matching the component so we also want to preserve
// this behavior to avoid breaking legacy apps (it should not match).
// The behavior should be:
// - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)
// - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a
// `:host-context(tag)`)
var hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
// Only scope parts after the first `-shadowcsshost-no-combinator` when it is present
var shouldScope = !hasHost;
while ((res = sep.exec(selector)) !== null) {
var separator = res[1];
var part_1 = selector.slice(startIndex, res.index).trim();
shouldScope = shouldScope || part_1.indexOf(_polyfillHostNoCombinator) > -1;
var scopedPart = shouldScope ? _scopeSelectorPart(part_1) : part_1;
scopedSelector += scopedPart + " " + separator + " ";
startIndex = sep.lastIndex;
}
var part = selector.substring(startIndex);
shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
// replace the placeholders with their original values
return restoreSafeSelector(safeContent.placeholders, scopedSelector);
};
var scopeSelector = function (selector, scopeSelectorText, hostSelector, slotSelector) {
return selector.split(',')
.map(function (shallowPart) {
if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {
return shallowPart.trim();
}
if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {
return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
}
else {
return shallowPart.trim();
}
})
.join(', ');
};
var scopeSelectors = function (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) {
return processRules(cssText, function (rule) {
var selector = rule.selector;
var content = rule.content;
if (rule.selector[0] !== '@') {
selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
}
else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
rule.selector.startsWith('@page') || rule.selector.startsWith('@document')) {
content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);
}
var cssRule = {
selector: selector.replace(/\s{2,}/g, ' ').trim(),
content: content
};
return cssRule;
});
};
var scopeCssText = function (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) {
cssText = insertPolyfillHostInCssText(cssText);
cssText = convertColonHost(cssText);
cssText = convertColonHostContext(cssText);
cssText = convertColonSlotted(cssText, slotScopeId);
cssText = convertShadowDOMSelectors(cssText);
if (scopeId) {
cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId);
}
cssText = cssText.replace(/-shadowcsshost-no-combinator/g, "." + hostScopeId);
cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, ' $1 ');
return cssText.trim();
};
var scopeCss = function (cssText, scopeId, commentOriginalSelector) {
var hostScopeId = scopeId + '-h';
var slotScopeId = scopeId + '-s';
var commentsWithHash = extractCommentsWithHash(cssText);
cssText = stripComments(cssText);
var orgSelectors = [];
if (commentOriginalSelector) {
var processCommentedSelector_1 = function (rule) {
var placeholder = "/*!@___" + orgSelectors.length + "___*/";
var comment = "/*!@" + rule.selector + "*/";
orgSelectors.push({ placeholder: placeholder, comment: comment });
rule.selector = placeholder + rule.selector;
return rule;
};
cssText = processRules(cssText, function (rule) {
if (rule.selector[0] !== '@') {
return processCommentedSelector_1(rule);
}
else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
rule.selector.startsWith('@page') || rule.selector.startsWith('@document')) {
rule.content = processRules(rule.content, processCommentedSelector_1);
return rule;
}
return rule;
});
}
var scopedCssText = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId);
cssText = __spreadArrays([scopedCssText], commentsWithHash).join('\n');
if (commentOriginalSelector) {
orgSelectors.forEach(function (_a) {
var placeholder = _a.placeholder, comment = _a.comment;
cssText = cssText.replace(placeholder, comment);
});
}
return cssText;
};
export { scopeCss };