javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-14 18:12:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(core): improved handling for unsupported '!important' css rule (#10243)

Browse Source
This commit is contained in:
Dimitris-Rafail Katsampas
2023-03-22 17:13:35 +02:00
committed by GitHub
parent ea45758463
commit e560cb1374
4 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/core/ui/styling/css-animation-parser.d.ts vendored
View File

@ -1,9 +0,0 @@
import { KeyframeAnimationInfo, KeyframeDeclaration, KeyframeInfo, UnparsedKeyframe } from '../animation/keyframe-animation';
export class CssAnimationParser {
public static keyframeAnimationsFromCSSDeclarations(declarations: KeyframeDeclaration[]): KeyframeAnimationInfo[];
public static keyframesArrayFromCSS(keyframes: UnparsedKeyframe[]): KeyframeInfo[];
}
export function parseKeyframeDeclarations(unparsedKeyframeDeclarations: KeyframeDeclaration[]): KeyframeDeclaration[];

2
packages/core/ui/styling/css-animation-parser.ts
View File

@ -4,6 +4,7 @@ import { KeyframeAnimationInfo, KeyframeDeclaration, KeyframeInfo, UnparsedKeyfr
import { timeConverter, animationTimingFunctionConverter } from '../styling/converters'; import { timeConverter, animationTimingFunctionConverter } from '../styling/converters';
import { transformConverter } from '../styling/style-properties'; import { transformConverter } from '../styling/style-properties';
import { cleanupImportantFlags } from './css-utils';
const ANIMATION_PROPERTY_HANDLERS = Object.freeze({ const ANIMATION_PROPERTY_HANDLERS = Object.freeze({
'animation-name': (info: any, value: any) => (info.name = value), 'animation-name': (info: any, value: any) => (info.name = value),
@ -125,6 +126,7 @@ function keyframeAnimationsFromCSSProperty(value: any, animations: KeyframeAnima
export function parseKeyframeDeclarations(unparsedKeyframeDeclarations: KeyframeDeclaration[]): KeyframeDeclaration[] { export function parseKeyframeDeclarations(unparsedKeyframeDeclarations: KeyframeDeclaration[]): KeyframeDeclaration[] {
const declarations = unparsedKeyframeDeclarations.reduce((declarations, { property: unparsedProperty, value: unparsedValue }) => { const declarations = unparsedKeyframeDeclarations.reduce((declarations, { property: unparsedProperty, value: unparsedValue }) => {
const property = CssAnimationProperty._getByCssName(unparsedProperty); const property = CssAnimationProperty._getByCssName(unparsedProperty);
unparsedValue = cleanupImportantFlags(unparsedValue, property?.cssLocalName);
if (typeof unparsedProperty === 'string' && property && property._valueConverter) { if (typeof unparsedProperty === 'string' && property && property._valueConverter) {
declarations[property.name] = property._valueConverter(<string>unparsedValue); declarations[property.name] = property._valueConverter(<string>unparsedValue);

12
packages/core/ui/styling/css-utils.ts Normal file
View File

@ -0,0 +1,12 @@
import { Trace } from '../../trace';
export function cleanupImportantFlags(value: string, propertyName: string) {
const index = value?.indexOf('!important');
if (index >= 0) {
if (Trace.isEnabled()) {
Trace.write(`The !important css rule is currently not supported. Property: ${propertyName}`, Trace.categories.Style, Trace.messageType.warn);
}
return value.substring(0, index).trim();
}
return value;
}

5
packages/core/ui/styling/style-scope.ts
View File

@ -21,6 +21,7 @@ function ensureKeyframeAnimationModule() {
import * as capm from './css-animation-parser'; import * as capm from './css-animation-parser';
import { sanitizeModuleName } from '../builder/module-name-sanitizer'; import { sanitizeModuleName } from '../builder/module-name-sanitizer';
import { resolveModuleName } from '../../module-name-resolver'; import { resolveModuleName } from '../../module-name-resolver';
import { cleanupImportantFlags } from './css-utils';
let cssAnimationParserModule: typeof capm; let cssAnimationParserModule: typeof capm;
function ensureCssAnimationParserModule() { function ensureCssAnimationParserModule() {
@ -563,7 +564,6 @@ export class CssState {
const view = this.viewRef.get(); const view = this.viewRef.get();
if (!view) { if (!view) {
Trace.write(`${matchingSelectors} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn); Trace.write(`${matchingSelectors} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
return; return;
} }
@ -579,7 +579,8 @@ export class CssState {
const replacementFunc = (g) => g[1].toUpperCase(); const replacementFunc = (g) => g[1].toUpperCase();
for (const property in newPropertyValues) { for (const property in newPropertyValues) {
const value = newPropertyValues[property]; const value = cleanupImportantFlags(newPropertyValues[property], property);
const isCssExp = isCssVariableExpression(value) || isCssCalcExpression(value); const isCssExp = isCssVariableExpression(value) || isCssCalcExpression(value);
if (isCssExp) { if (isCssExp) {