@nativescript/core
Version:
A JavaScript library providing an easy to use api for interacting with iOS and Android platform APIs.
1,026 lines • 40.8 kB
JavaScript
import { unsetValue, _evaluateCssVariableExpression, _evaluateCssCalcExpression, isCssVariable, isCssVariableExpression, isCssCalcExpression } from '../core/properties';
import { StyleSheetSelectorScope, SelectorsMatch, fromAstNode, MEDIA_QUERY_SEPARATOR, matchMediaQueryString } from './css-selector';
import { Trace } from '../../trace';
import { File, knownFolders, path } from '../../file-system';
import { Application } from '../../application';
import { profile } from '../../profiling';
let keyframeAnimationModule;
function ensureKeyframeAnimationModule() {
if (!keyframeAnimationModule) {
keyframeAnimationModule = require('../animation/keyframe-animation');
}
}
import { sanitizeModuleName } from '../../utils/common';
import { resolveModuleName } from '../../module-name-resolver';
import { cleanupImportantFlags } from './css-utils';
let cssAnimationParserModule;
function ensureCssAnimationParserModule() {
if (!cssAnimationParserModule) {
cssAnimationParserModule = require('./css-animation-parser');
}
}
let parser = 'css-tree';
try {
const appConfig = require('~/package.json');
if (appConfig) {
if (appConfig.cssParser === 'rework') {
parser = 'rework';
}
else if (appConfig.cssParser === 'nativescript') {
parser = 'nativescript';
}
}
}
catch (e) {
//
}
let mergedApplicationCssSelectors = [];
let applicationCssSelectors = [];
const applicationAdditionalSelectors = [];
let mergedApplicationCssKeyframes = [];
let applicationCssKeyframes = [];
const applicationAdditionalKeyframes = [];
let applicationCssSelectorVersion = 0;
const tagToScopeTag = new Map();
let currentScopeTag = null;
const animationsSymbol = Symbol('animations');
const kebabCasePattern = /-([a-z])/g;
const pattern = /('|")(.*?)\1/;
/**
* Evaluate css-variable and css-calc expressions
*/
function evaluateCssExpressions(view, property, value) {
const newValue = _evaluateCssVariableExpression(view, property, value);
if (newValue === 'unset') {
return unsetValue;
}
value = newValue;
try {
value = _evaluateCssCalcExpression(value);
}
catch (e) {
Trace.write(`Failed to evaluate css-calc for property [${property}] for expression [${value}] to ${view}. ${e.stack}`, Trace.categories.Error, Trace.messageType.error);
return unsetValue;
}
return value;
}
export function mergeCssSelectors() {
mergedApplicationCssSelectors = applicationCssSelectors.slice();
mergedApplicationCssSelectors.push(...applicationAdditionalSelectors);
}
export function mergeCssKeyframes() {
mergedApplicationCssKeyframes = applicationCssKeyframes.slice();
mergedApplicationCssKeyframes.push(...applicationAdditionalKeyframes);
}
class CSSSource {
constructor(_ast, _url, _file, _source) {
this._ast = _ast;
this._url = _url;
this._file = _file;
this._source = _source;
this._selectors = [];
this._keyframes = [];
this.parse();
}
static fromDetect(cssOrAst, fileName) {
if (typeof cssOrAst === 'string') {
// raw-loader
return CSSSource.fromSource(cssOrAst, fileName);
}
else if (typeof cssOrAst === 'object') {
if (cssOrAst.default) {
cssOrAst = cssOrAst.default;
}
if (cssOrAst.type === 'stylesheet' && cssOrAst.stylesheet && cssOrAst.stylesheet.rules) {
// css-loader
return CSSSource.fromAST(cssOrAst, fileName);
}
}
// css2json-loader
return CSSSource.fromSource(cssOrAst.toString(), fileName);
}
static fromURI(uri) {
// webpack modules require all file paths to be relative to /app folder
const appRelativeUri = CSSSource.pathRelativeToApp(uri);
const sanitizedModuleName = sanitizeModuleName(appRelativeUri);
const resolvedModuleName = resolveModuleName(sanitizedModuleName, 'css');
try {
const cssOrAst = global.loadModule(resolvedModuleName, true);
if (cssOrAst) {
return CSSSource.fromDetect(cssOrAst, resolvedModuleName);
}
}
catch (e) {
if (Trace.isEnabled()) {
Trace.write(`Could not load CSS from ${uri}: ${e}`, Trace.categories.Error, Trace.messageType.warn);
}
}
return CSSSource.fromFile(appRelativeUri);
}
static pathRelativeToApp(uri) {
if (!uri.startsWith('/')) {
return uri;
}
const appPath = knownFolders.currentApp().path;
if (!uri.startsWith(appPath)) {
Trace.write(`${uri} does not start with ${appPath}`, Trace.categories.Error, Trace.messageType.error);
return uri;
}
const relativeUri = `.${uri.substring(appPath.length)}`;
return relativeUri;
}
static fromFile(url) {
// .scss, .sass, etc. css files in vanilla app are usually compiled to .css so we will try to load a compiled file first.
const cssFileUrl = url.replace(/\..\w+$/, '.css');
if (cssFileUrl !== url) {
const cssFile = CSSSource.resolveCSSPathFromURL(cssFileUrl);
if (cssFile) {
return new CSSSource(undefined, url, cssFile, undefined);
}
}
const file = CSSSource.resolveCSSPathFromURL(url);
return new CSSSource(undefined, url, file, undefined);
}
static fromFileImport(url, importSource) {
const file = CSSSource.resolveCSSPathFromURL(url, importSource);
return new CSSSource(undefined, url, file, undefined);
}
static resolveCSSPathFromURL(url, importSource) {
const app = knownFolders.currentApp().path;
const file = resolveFileNameFromUrl(url, app, File.exists, importSource);
return file;
}
static fromSource(source, url) {
return new CSSSource(undefined, url, undefined, source);
}
static fromAST(ast, url) {
return new CSSSource(ast, url, undefined, undefined);
}
get selectors() {
return this._selectors;
}
get keyframes() {
return this._keyframes;
}
get source() {
return this._source;
}
load() {
const file = File.fromPath(this._file);
this._source = file.readTextSync();
}
parse() {
try {
if (!this._ast) {
if (!this._source && this._file) {
this.load();
}
// [object Object] check guards against empty app.css file
if (this._source && this.source !== '[object Object]') {
this.parseCSSAst();
}
}
if (this._ast) {
this.createSelectorsAndKeyframes();
}
else {
this._selectors = [];
}
}
catch (e) {
if (Trace.isEnabled()) {
Trace.write('Css styling failed: ' + e, Trace.categories.Style, Trace.messageType.error);
}
this._selectors = [];
}
}
parseCSSAst() {
if (this._source) {
if (__CSS_PARSER__ === 'css-tree') {
const cssTreeParse = require('../../css/css-tree-parser').cssTreeParse;
this._ast = cssTreeParse(this._source, this._file);
}
else if (__CSS_PARSER__ === 'nativescript') {
const CSS3Parser = require('../../css/CSS3Parser').CSS3Parser;
const CSSNativeScript = require('../../css/CSSNativeScript').CSSNativeScript;
const cssparser = new CSS3Parser(this._source);
const stylesheet = cssparser.parseAStylesheet();
const cssNS = new CSSNativeScript();
this._ast = cssNS.parseStylesheet(stylesheet);
}
else if (__CSS_PARSER__ === 'rework') {
const parseCss = require('../../css').parse;
this._ast = parseCss(this._source, { source: this._file });
}
}
}
createSelectorsAndKeyframes() {
if (this._ast) {
const nodes = this._ast.stylesheet.rules;
const rulesets = [];
const keyframes = [];
// When css2json-loader is enabled, imports are handled there and removed from AST rules
populateRulesFromImports(nodes, rulesets, keyframes);
_populateRules(nodes, rulesets, keyframes);
if (rulesets && rulesets.length) {
ensureCssAnimationParserModule();
rulesets.forEach((rule) => {
rule[animationsSymbol] = cssAnimationParserModule.CssAnimationParser.keyframeAnimationsFromCSSDeclarations(rule.declarations);
});
}
this._selectors = rulesets;
this._keyframes = keyframes;
}
}
toString() {
return this._file || this._url || '(in-memory)';
}
}
__decorate([
profile,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], CSSSource.prototype, "load", null);
__decorate([
profile,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], CSSSource.prototype, "parse", null);
__decorate([
profile,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], CSSSource.prototype, "parseCSSAst", null);
__decorate([
profile,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], CSSSource.prototype, "createSelectorsAndKeyframes", null);
__decorate([
profile,
__metadata("design:type", Function),
__metadata("design:paramtypes", [String, String]),
__metadata("design:returntype", String)
], CSSSource, "resolveCSSPathFromURL", null);
function populateRulesFromImports(nodes, rulesets, keyframes) {
const imports = nodes.filter((r) => r.type === 'import');
if (!imports.length) {
return;
}
const urlFromImportObject = (importObject) => {
const importItem = importObject['import'];
const urlMatch = importItem && importItem.match(pattern);
return urlMatch && urlMatch[2];
};
const sourceFromImportObject = (importObject) => importObject['position'] && importObject['position']['source'];
const toUrlSourcePair = (importObject) => ({
url: urlFromImportObject(importObject),
source: sourceFromImportObject(importObject),
});
const getCssFile = ({ url, source }) => (source ? CSSSource.fromFileImport(url, source) : CSSSource.fromURI(url));
const cssFiles = imports
.map(toUrlSourcePair)
.filter(({ url }) => !!url)
.map(getCssFile);
for (const cssFile of cssFiles) {
if (cssFile) {
rulesets.push(...cssFile.selectors);
keyframes.push(...cssFile.keyframes);
}
}
}
export function _populateRules(nodes, rulesets, keyframes, mediaQueryString) {
for (const node of nodes) {
if (isKeyframe(node)) {
const keyframeRule = {
name: node.name,
keyframes: node.keyframes,
mediaQueryString: mediaQueryString,
};
keyframes.push(keyframeRule);
}
else if (isMedia(node)) {
// Media query is composite in the case of nested media queries
const compositeMediaQuery = mediaQueryString ? mediaQueryString + MEDIA_QUERY_SEPARATOR + node.media : node.media;
_populateRules(node.rules, rulesets, keyframes, compositeMediaQuery);
}
else if (isRule(node)) {
const ruleset = fromAstNode(node);
ruleset.mediaQueryString = mediaQueryString;
rulesets.push(ruleset);
}
}
}
export function removeTaggedAdditionalCSS(tag) {
let selectorsChanged = false;
let keyframesChanged = false;
let updated = false;
for (let i = 0; i < applicationAdditionalSelectors.length; i++) {
if (applicationAdditionalSelectors[i].tag === tag) {
applicationAdditionalSelectors.splice(i, 1);
i--;
selectorsChanged = true;
}
}
for (let i = 0; i < applicationAdditionalKeyframes.length; i++) {
if (applicationAdditionalKeyframes[i].tag === tag) {
applicationAdditionalKeyframes.splice(i, 1);
i--;
keyframesChanged = true;
}
}
if (selectorsChanged) {
mergeCssSelectors();
updated = true;
}
if (keyframesChanged) {
mergeCssKeyframes();
updated = true;
}
if (updated) {
applicationCssSelectorVersion++;
}
return updated;
}
export function addTaggedAdditionalCSS(cssText, tag) {
const { selectors, keyframes } = CSSSource.fromDetect(cssText, undefined);
const tagScope = currentScopeTag || (tag && tagToScopeTag.has(tag) && tagToScopeTag.get(tag)) || null;
if (tagScope && tag) {
tagToScopeTag.set(tag, tagScope);
}
let selectorsChanged = false;
let keyframesChanged = false;
let updated = false;
if (selectors && selectors.length) {
selectorsChanged = true;
if (tag != null || tagScope != null) {
for (let i = 0, length = selectors.length; i < length; i++) {
selectors[i].tag = tag;
selectors[i].scopedTag = tagScope;
}
}
applicationAdditionalSelectors.push(...selectors);
mergeCssSelectors();
updated = true;
}
if (keyframes && keyframes.length) {
keyframesChanged = true;
if (tag != null || tagScope != null) {
for (let i = 0, length = keyframes.length; i < length; i++) {
keyframes[i].tag = tag;
keyframes[i].scopedTag = tagScope;
}
}
applicationAdditionalKeyframes.push(...keyframes);
mergeCssKeyframes();
updated = true;
}
if (updated) {
applicationCssSelectorVersion++;
}
return updated;
}
const onCssChanged = profile('"style-scope".onCssChanged', (args) => {
if (args.cssText) {
const { selectors, keyframes } = CSSSource.fromSource(args.cssText, args.cssFile);
let updated = false;
if (selectors) {
applicationAdditionalSelectors.push(...selectors);
mergeCssSelectors();
updated = true;
}
if (keyframes) {
applicationAdditionalKeyframes.push(...keyframes);
mergeCssKeyframes();
updated = true;
}
if (updated) {
applicationCssSelectorVersion++;
}
}
else if (args.cssFile) {
loadCss(args.cssFile, null, null);
}
});
function onLiveSync(args) {
loadCss(Application.getCssFileName(), null, null);
}
const loadCss = profile(`"style-scope".loadCss`, (cssModule) => {
if (!cssModule) {
return;
}
// safely remove "./" as global CSS should be resolved relative to app folder
if (cssModule.startsWith('./')) {
cssModule = cssModule.substring(2);
}
const { selectors, keyframes } = CSSSource.fromURI(cssModule);
let updated = false;
// Check for existing application css selectors too in case the app is undergoing a live-sync
if (selectors.length > 0 || applicationCssSelectors.length > 0) {
applicationCssSelectors = selectors;
mergeCssSelectors();
updated = true;
}
// Check for existing application css keyframes too in case the app is undergoing a live-sync
if (keyframes.length > 0 || applicationCssKeyframes.length > 0) {
applicationCssKeyframes = keyframes;
mergeCssKeyframes();
updated = true;
}
if (updated) {
applicationCssSelectorVersion++;
}
});
global.NativeScriptGlobals.events.on('cssChanged', onCssChanged);
global.NativeScriptGlobals.events.on('livesync', onLiveSync);
// Call to this method is injected in the application in:
// - no-snapshot - code injected in app.ts by [bundle-config-loader](https://github.com/NativeScript/nativescript-dev-webpack/blob/9b1e34d8ef838006c9b575285c42d2304f5f02b5/bundle-config-loader.ts#L85-L92)
// - with-snapshot - code injected in snapshot bundle by [NativeScriptSnapshotPlugin](https://github.com/NativeScript/nativescript-dev-webpack/blob/48b26f412fd70c19dc0b9c7763e08e9505a0ae11/plugins/NativeScriptSnapshotPlugin/index.js#L48-L56)
// Having the app.css loaded in snapshot provides significant boost in startup (when using the ns-theme ~150 ms). However, because app.css is resolved at build-time,
// when the snapshot is created - there is no way to use file qualifiers or change the name of on app.css
export const loadAppCSS = profile('"style-scope".loadAppCSS', (args) => {
loadCss(args.cssFile, null, null);
global.NativeScriptGlobals.events.off('loadAppCss', loadAppCSS);
});
if (Application.hasLaunched()) {
loadAppCSS({
eventName: 'loadAppCss',
object: Application,
cssFile: Application.getCssFileName(),
}, null, null);
}
else {
global.NativeScriptGlobals.events.on('loadAppCss', loadAppCSS);
}
export class CssState {
constructor(viewRef) {
this.viewRef = viewRef;
this._appliedPropertyValues = CssState.emptyPropertyBag;
this._onDynamicStateChangeHandler = () => this.updateDynamicState();
}
/**
* Called when a change had occurred that may invalidate the statically matching selectors (class, id, ancestor selectors).
* As a result, at some point in time, the selectors matched have to be requerried from the style scope and applied to the view.
*/
onChange() {
const view = this.viewRef.get();
if (view && view.isLoaded) {
this.unsubscribeFromDynamicUpdates();
this.updateMatch();
this.subscribeForDynamicUpdates();
this.updateDynamicState();
}
else {
this._matchInvalid = true;
}
}
isSelectorsLatestVersionApplied() {
const view = this.viewRef.get();
if (!view) {
Trace.write(`isSelectorsLatestVersionApplied returns default value "false" because "this.viewRef" cleared.`, Trace.categories.Style, Trace.messageType.warn);
return false;
}
return this.viewRef.get()._styleScope.getSelectorsVersion() === this._appliedSelectorsVersion;
}
onLoaded() {
if (this._matchInvalid) {
this.updateMatch();
}
this.subscribeForDynamicUpdates();
this.updateDynamicState();
}
onUnloaded() {
this.unsubscribeFromDynamicUpdates();
this.stopKeyframeAnimations();
}
updateMatch() {
const view = this.viewRef.get();
if (view && view._styleScope) {
this._match = view._styleScope.matchSelectors(view) ?? CssState.emptyMatch;
this._appliedSelectorsVersion = view._styleScope.getSelectorsVersion();
}
else {
this._match = CssState.emptyMatch;
}
this._matchInvalid = false;
}
updateDynamicState() {
const view = this.viewRef.get();
if (!view) {
Trace.write(`updateDynamicState not executed to view because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
return;
}
const matchingSelectors = this._match.selectors.filter((sel) => (sel.dynamic ? sel.match(view) : true));
// Ideally we should return here if there are no matching selectors, however
// if there are property removals, returning here would not remove them
// this is seen in STYLE test in automated.
// if (!matchingSelectors || matchingSelectors.length === 0) {
// return;
// }
view._batchUpdate(() => {
this.stopKeyframeAnimations();
this.setPropertyValues(matchingSelectors);
this.playKeyframeAnimations(matchingSelectors);
});
}
playKeyframeAnimations(matchingSelectors) {
const animations = [];
matchingSelectors.forEach((selector) => {
const ruleAnimations = selector.ruleset?.[animationsSymbol];
if (ruleAnimations) {
ensureKeyframeAnimationModule();
for (const animationInfo of ruleAnimations) {
const animation = keyframeAnimationModule.KeyframeAnimation.keyframeAnimationFromInfo(animationInfo);
if (animation) {
animations.push(animation);
}
}
}
});
if ((this._playsKeyframeAnimations = animations.length > 0)) {
const view = this.viewRef.get();
if (!view) {
Trace.write(`KeyframeAnimations cannot play because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
return;
}
animations.map((animation) => animation.play(view));
Object.freeze(animations);
this._appliedAnimations = animations;
}
}
stopKeyframeAnimations() {
if (!this._playsKeyframeAnimations) {
return;
}
this._appliedAnimations.filter((animation) => animation.isPlaying).forEach((animation) => animation.cancel());
this._appliedAnimations = CssState.emptyAnimationArray;
const view = this.viewRef.get();
if (view) {
view.style['keyframe:rotate'] = unsetValue;
view.style['keyframe:rotateX'] = unsetValue;
view.style['keyframe:rotateY'] = unsetValue;
view.style['keyframe:scaleX'] = unsetValue;
view.style['keyframe:scaleY'] = unsetValue;
view.style['keyframe:translateX'] = unsetValue;
view.style['keyframe:translateY'] = unsetValue;
view.style['keyframe:backgroundColor'] = unsetValue;
view.style['keyframe:opacity'] = unsetValue;
}
else {
Trace.write(`KeyframeAnimations cannot be stopped because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
}
this._playsKeyframeAnimations = false;
}
/**
* Calculate the difference between the previously applied property values,
* and the new set of property values that have to be applied for the provided selectors.
* Apply the values and ensure each property setter is called at most once to avoid excessive change notifications.
* @param matchingSelectors
*/
setPropertyValues(matchingSelectors) {
const view = this.viewRef.get();
if (!view) {
Trace.write(`${matchingSelectors} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
return;
}
const newPropertyValues = new view.style.PropertyBag();
matchingSelectors.forEach((selector) => selector.ruleset.declarations.forEach((declaration) => (newPropertyValues[declaration.property] = declaration.value)));
const oldProperties = this._appliedPropertyValues;
// Update values for the scope's css-variables
view.style.resetScopedCssVariables();
const valuesToApply = {};
const cssExpsProperties = {};
const replacementFunc = (g) => g[1].toUpperCase();
for (const property in newPropertyValues) {
const value = cleanupImportantFlags(newPropertyValues[property], property);
const isCssExp = isCssVariableExpression(value) || isCssCalcExpression(value);
if (isCssExp) {
// we handle css exp separately because css vars must be evaluated first
cssExpsProperties[property] = value;
continue;
}
delete oldProperties[property];
if (property in oldProperties && oldProperties[property] === value) {
// Skip unchanged values
continue;
}
if (isCssVariable(property)) {
view.style.setScopedCssVariable(property, value);
delete newPropertyValues[property];
continue;
}
valuesToApply[property] = value;
}
//we need to parse CSS vars first before evaluating css expressions
for (const property in cssExpsProperties) {
delete oldProperties[property];
const value = evaluateCssExpressions(view, property, cssExpsProperties[property]);
if (property in oldProperties && oldProperties[property] === value) {
// Skip unchanged values
continue;
}
if (value === unsetValue) {
delete newPropertyValues[property];
}
if (isCssVariable(property)) {
view.style.setScopedCssVariable(property, value);
delete newPropertyValues[property];
}
valuesToApply[property] = value;
}
// Unset removed values
for (const property in oldProperties) {
if (property in view.style) {
view.style[`css:${property}`] = unsetValue;
}
else {
const camelCasedProperty = property.replace(kebabCasePattern, replacementFunc);
view[camelCasedProperty] = unsetValue;
}
}
// Set new values to the style
for (const property in valuesToApply) {
const value = valuesToApply[property];
try {
if (property in view.style) {
view.style[`css:${property}`] = value;
}
else {
const camelCasedProperty = property.replace(kebabCasePattern, replacementFunc);
view[camelCasedProperty] = value;
}
}
catch (e) {
Trace.write(`Failed to apply property [${property}] with value [${value}] to ${view}. ${e.stack}`, Trace.categories.Error, Trace.messageType.error);
}
}
this._appliedPropertyValues = newPropertyValues;
}
subscribeForDynamicUpdates() {
const changeMap = this._match.changeMap;
changeMap.forEach((changes, view) => {
if (changes.attributes) {
changes.attributes.forEach((attribute) => {
view.addEventListener(attribute + 'Change', this._onDynamicStateChangeHandler);
});
}
if (changes.pseudoClasses) {
changes.pseudoClasses.forEach((pseudoClass) => {
const eventName = ':' + pseudoClass;
view.addEventListener(':' + pseudoClass, this._onDynamicStateChangeHandler);
if (view[eventName]) {
view[eventName](+1);
}
});
}
});
this._appliedChangeMap = changeMap;
}
unsubscribeFromDynamicUpdates() {
this._appliedChangeMap.forEach((changes, view) => {
if (changes.attributes) {
changes.attributes.forEach((attribute) => {
view.removeEventListener(attribute + 'Change', this._onDynamicStateChangeHandler);
});
}
if (changes.pseudoClasses) {
changes.pseudoClasses.forEach((pseudoClass) => {
const eventName = ':' + pseudoClass;
view.removeEventListener(eventName, this._onDynamicStateChangeHandler);
if (view[eventName]) {
view[eventName](-1);
}
});
}
});
this._appliedChangeMap = CssState.emptyChangeMap;
}
toString() {
const view = this.viewRef.get();
if (!view) {
Trace.write(`toString() of CssState cannot execute correctly because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
return '';
}
return `${view}._cssState`;
}
}
CssState.emptyChangeMap = Object.freeze(new Map());
CssState.emptyPropertyBag = {};
CssState.emptyAnimationArray = Object.freeze([]);
CssState.emptyMatch = {
selectors: [],
changeMap: new Map(),
addAttribute: () => { },
addPseudoClass: () => { },
properties: null,
};
__decorate([
profile,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], CssState.prototype, "updateMatch", null);
__decorate([
profile,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], CssState.prototype, "updateDynamicState", null);
CssState.prototype._appliedChangeMap = CssState.emptyChangeMap;
CssState.prototype._appliedAnimations = CssState.emptyAnimationArray;
CssState.prototype._matchInvalid = true;
export class StyleScope {
constructor() {
this._css = '';
this._localCssSelectors = [];
this._localCssKeyframes = [];
this._localCssSelectorVersion = 0;
this._localCssSelectorsAppliedVersion = 0;
this._applicationCssSelectorsAppliedVersion = 0;
this._cssFiles = [];
}
get css() {
return this._css;
}
set css(value) {
this.setCss(value);
}
addCss(cssString, cssFileName) {
this.appendCss(cssString, cssFileName);
}
addCssFile(cssFileName) {
this.appendCss(null, cssFileName);
}
changeCssFile(cssFileName) {
if (!cssFileName) {
return;
}
this._cssFiles.push(cssFileName);
currentScopeTag = cssFileName;
const cssFile = CSSSource.fromURI(cssFileName);
currentScopeTag = null;
this._css = cssFile.source;
this._localCssSelectors = cssFile.selectors;
this._localCssKeyframes = cssFile.keyframes;
this._localCssSelectorVersion++;
this.ensureSelectors();
}
setCss(cssString, cssFileName) {
this._css = cssString;
const cssFile = CSSSource.fromSource(cssString, cssFileName);
this._localCssSelectors = cssFile.selectors;
this._localCssKeyframes = cssFile.keyframes;
this._localCssSelectorVersion++;
this.ensureSelectors();
}
appendCss(cssString, cssFileName) {
if (!cssString && !cssFileName) {
return;
}
if (cssFileName) {
this._cssFiles.push(cssFileName);
currentScopeTag = cssFileName;
}
const cssFile = cssString ? CSSSource.fromSource(cssString, cssFileName) : CSSSource.fromURI(cssFileName);
currentScopeTag = null;
this._css = this._css + cssFile.source;
this._localCssSelectors.push(...cssFile.selectors);
this._localCssKeyframes.push(...cssFile.keyframes);
this._localCssSelectorVersion++;
this.ensureSelectors();
}
getKeyframeAnimationWithName(animationName) {
if (!this._mergedCssKeyframes) {
return null;
}
const keyframeRule = this.findKeyframeRule(animationName);
ensureKeyframeAnimationModule();
const animation = new keyframeAnimationModule.KeyframeAnimationInfo();
ensureCssAnimationParserModule();
animation.keyframes = keyframeRule ? cssAnimationParserModule.CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
return animation;
}
ensureSelectors() {
if (!this.isApplicationCssSelectorsLatestVersionApplied() || !this.isLocalCssSelectorsLatestVersionApplied() || !this._mergedCssSelectors) {
this._createSelectors();
}
return this.getSelectorsVersion();
}
_increaseApplicationCssSelectorVersion() {
applicationCssSelectorVersion++;
}
isApplicationCssSelectorsLatestVersionApplied() {
return this._applicationCssSelectorsAppliedVersion === applicationCssSelectorVersion;
}
isLocalCssSelectorsLatestVersionApplied() {
return this._localCssSelectorsAppliedVersion === this._localCssSelectorVersion;
}
_createSelectors() {
const toMerge = [];
const toMergeKeyframes = [];
toMerge.push(...mergedApplicationCssSelectors.filter((v) => !v.scopedTag || this._cssFiles.indexOf(v.scopedTag) >= 0));
toMergeKeyframes.push(...mergedApplicationCssKeyframes.filter((v) => !v.scopedTag || this._cssFiles.indexOf(v.scopedTag) >= 0));
this._applicationCssSelectorsAppliedVersion = applicationCssSelectorVersion;
toMerge.push(...this._localCssSelectors);
toMergeKeyframes.push(...this._localCssKeyframes);
this._localCssSelectorsAppliedVersion = this._localCssSelectorVersion;
if (toMerge.length > 0) {
this._mergedCssSelectors = toMerge;
this._selectorScope = new StyleSheetSelectorScope(this._mergedCssSelectors);
}
else {
this._mergedCssSelectors = null;
this._selectorScope = null;
}
this._mergedCssKeyframes = toMergeKeyframes.length > 0 ? toMergeKeyframes : null;
}
// HACK: This @profile decorator creates a circular dependency
// HACK: because the function parameter type is evaluated with 'typeof'
matchSelectors(view) {
let match;
// should be (view: ViewBase): SelectorsMatch<ViewBase>
this.ensureSelectors();
if (this._selectorScope) {
match = this._selectorScope.query(view);
// Make sure to re-apply keyframes to matching selectors as a media query keyframe might be applicable at this point
this._applyKeyframesToSelectors(match.selectors);
}
else {
match = null;
}
return match;
}
query(node) {
this.ensureSelectors();
const match = this.matchSelectors(node);
return match ? match.selectors : [];
}
getSelectorsVersion() {
// The counters can only go up. So we can return just appVersion + localVersion
// The 100000 * appVersion is just for easier debugging
return 100000 * this._applicationCssSelectorsAppliedVersion + this._localCssSelectorsAppliedVersion;
}
_applyKeyframesToSelectors(selectors) {
if (!selectors?.length) {
return;
}
for (let i = selectors.length - 1; i >= 0; i--) {
const ruleset = selectors[i].ruleset;
const animations = ruleset[animationsSymbol];
if (animations != null && animations.length) {
ensureCssAnimationParserModule();
for (const animation of animations) {
const keyframeRule = this.findKeyframeRule(animation.name);
animation.keyframes = keyframeRule ? cssAnimationParserModule.CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
}
}
}
}
getAnimations(ruleset) {
return ruleset[animationsSymbol];
}
findKeyframeRule(animationName) {
if (!this._mergedCssKeyframes) {
return null;
}
// Cache media query results to avoid validations of other identical queries
let validatedMediaQueries;
// Iterate in reverse order as the last usable keyframe rule matters the most
for (let i = this._mergedCssKeyframes.length - 1; i >= 0; i--) {
const rule = this._mergedCssKeyframes[i];
if (rule.name !== animationName) {
continue;
}
if (!rule.mediaQueryString) {
return rule;
}
if (!validatedMediaQueries) {
validatedMediaQueries = [];
}
const isMatchingAllQueries = matchMediaQueryString(rule.mediaQueryString, validatedMediaQueries);
if (isMatchingAllQueries) {
return rule;
}
}
return null;
}
}
__decorate([
profile,
__metadata("design:type", Function),
__metadata("design:paramtypes", [String, Object]),
__metadata("design:returntype", void 0)
], StyleScope.prototype, "setCss", null);
__decorate([
profile,
__metadata("design:type", Function),
__metadata("design:paramtypes", [String, Object]),
__metadata("design:returntype", void 0)
], StyleScope.prototype, "appendCss", null);
__decorate([
profile,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], StyleScope.prototype, "_createSelectors", null);
__decorate([
profile,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", SelectorsMatch)
], StyleScope.prototype, "matchSelectors", null);
export function resolveFileNameFromUrl(url, appDirectory, fileExists, importSource) {
let fileName = typeof url === 'string' ? url.trim() : '';
if (fileName.indexOf('~/') === 0) {
fileName = fileName.replace('~/', '');
}
const isAbsolutePath = fileName.indexOf('/') === 0;
const absolutePath = isAbsolutePath ? fileName : path.join(appDirectory, fileName);
if (fileExists(absolutePath)) {
return absolutePath;
}
if (!isAbsolutePath) {
if (fileName[0] === '~' && fileName[1] !== '/' && fileName[1] !== '"') {
fileName = fileName.substring(1);
}
if (importSource) {
const importFile = resolveFilePathFromImport(importSource, fileName);
if (fileExists(importFile)) {
return importFile;
}
}
const external = path.join(appDirectory, 'tns_modules', fileName);
if (fileExists(external)) {
return external;
}
}
return null;
}
function resolveFilePathFromImport(importSource, fileName) {
const importSourceParts = importSource.split(path.separator);
const fileNameParts = fileName
.split(path.separator)
// exclude the dot-segment for current directory
.filter((p) => !isCurrentDirectory(p));
// remove current file name
importSourceParts.pop();
// remove element in case of dot-segment for parent directory or add file name
fileNameParts.forEach((p) => (isParentDirectory(p) ? importSourceParts.pop() : importSourceParts.push(p)));
return importSourceParts.join(path.separator);
}
export const applyInlineStyle = profile(function applyInlineStyle(view, styleStr) {
const localStyle = `local { ${styleStr} }`;
const inlineRuleSet = CSSSource.fromSource(localStyle).selectors;
// Reset unscoped css-variables
view.style.resetUnscopedCssVariables();
// Set all the css-variables first, so we can be sure they are up-to-date
inlineRuleSet[0].declarations.forEach((d) => {
// Use the actual property name so that a local value is set.
const property = d.property;
if (isCssVariable(property)) {
view.style.setUnscopedCssVariable(property, d.value);
}
});
inlineRuleSet[0].declarations.forEach((d) => {
// Use the actual property name so that a local value is set.
const property = d.property;
try {
if (isCssVariable(property)) {
// Skip css-variables, they have been handled
return;
}
const value = evaluateCssExpressions(view, property, d.value);
if (property in view.style) {
view.style[property] = value;
}
else {
view[property] = value;
}
}
catch (e) {
Trace.write(`Failed to apply property [${d.property}] with value [${d.value}] to ${view}. ${e}`, Trace.categories.Error, Trace.messageType.error);
}
});
// This is needed in case of changes to css-variable or css-calc expressions.
view._onCssStateChange();
});
function isCurrentDirectory(uriPart) {
return uriPart === '.';
}
function isParentDirectory(uriPart) {
return uriPart === '..';
}
function isMedia(node) {
return node.type === 'media';
}
function isKeyframe(node) {
return node.type === 'keyframes';
}
function isRule(node) {
return node.type === 'rule';
}
//# sourceMappingURL=style-scope.js.map