@triniwiz/nativescript-masonkit 1.0.0-beta.120 → 1.0.0-beta.121

package/postcss-guard.js

@@ -0,0 +1,64 @@
+/**
+ * Keeps app CSS that MasonKit supports through @nativescript/tailwind's PostCSS step.
+ *
+ * That step removes every declaration NativeScript core can't apply (`display`, `gap`,
+ * `grid-*`, values in `vw`/`vh`/`min-content`, ...) and every `:hover` rule, from all of
+ * the app's CSS. `before` stores a copy of each declaration in a custom property, which
+ * the step leaves alone; `after` puts back the declarations it removed and drops the copies.
+ * Declarations it kept, including the ones it rewrote, stay as it left them.
+ */
+const KEEP = '--mason-keep-';
+// The step drops rules using these; they are renamed past it and back.
+const PSEUDOS = [
+  [':hover', ':-mason-hover'],
+  [':focus-within', ':-mason-focus-within'],
+];
+
+// Hex has no `r` or `m`, so the step's rem/em rewrite can't touch a stored copy.
+const encode = (decl) => Buffer.from(JSON.stringify([decl.prop, decl.value, decl.important])).toString('hex');
+const decode = (value) => JSON.parse(Buffer.from(value, 'hex').toString('utf8'));
+
+const before = () => ({
+  postcssPlugin: 'masonkit-css-guard-before',
+  Once(root) {
+    let id = 0;
+    root.walkDecls((decl) => {
+      if (decl.prop.startsWith('--')) return;
+      const key = String(id++);
+      decl.raws.masonKeep = key;
+      decl.cloneAfter({ prop: KEEP + key, value: encode(decl), important: false });
+    });
+    root.walkRules((rule) => {
+      for (const [pseudo, alias] of PSEUDOS) {
+        if (rule.selector.includes(pseudo)) rule.selector = rule.selector.split(pseudo).join(alias);
+      }
+    });
+  },
+});
+before.postcss = true;
+
+const after = () => ({
+  postcssPlugin: 'masonkit-css-guard-after',
+  // After every plugin's visitors, which is where the step removes things.
+  OnceExit(root) {
+    root.walkDecls((decl) => {
+      if (!decl.prop.startsWith(KEEP)) return;
+      const key = decl.prop.slice(KEEP.length);
+      const kept = decl.parent.some((node) => node !== decl && node.type === 'decl' && node.raws.masonKeep === key);
+      if (kept) {
+        decl.remove();
+        return;
+      }
+      const [prop, value, important] = decode(decl.value);
+      decl.replaceWith(decl.clone({ prop, value, important }));
+    });
+    root.walkRules((rule) => {
+      for (const [pseudo, alias] of PSEUDOS) {
+        if (rule.selector.includes(alias)) rule.selector = rule.selector.split(alias).join(pseudo);
+      }
+    });
+  },
+});
+after.postcss = true;
+
+module.exports = { before, after };

package/properties.d.ts

@@ -1,5 +1,5 @@
 import { CssProperty, CssAnimationProperty, InheritedCssProperty, Style, ShorthandProperty, Property } from '@nativescript/core';
-import { Display, Overflow, Length, LengthAuto, Position, BoxSizing, GridAutoFlow, AlignContent, VerticalAlign, Float, Clear } from '.';
+import { Display, Overflow, Length, Gap, LengthAuto, Position, BoxSizing, GridAutoFlow, AlignContent, VerticalAlign, Float, Clear } from '.';
 import type { ViewBase } from './common';
 import type { LonghandValue } from './css-shorthands';
 type ShorthandLonghand = CssProperty<Style, any> | CssAnimationProperty<Style, any>;
@@ -45,11 +45,13 @@ export declare const textDecorationThicknessProperty: CssProperty<Style, string>
 export declare const fontFamilyProperty: CssProperty<Style, string>;
 export declare const marginProperty: CssProperty<Style, string>;
 export declare const scrollBarWidthProperty: CssProperty<Style, number>;
+/** The declaration behind `value` if it came from this view's own CSS, else `value`. */
+export declare function masonRawDeclaration(style: Style, propertyName: string, value: unknown): unknown;
 export declare const rowGapProperty: CssProperty<Style, Length>;
 export declare const columnGapProperty: CssProperty<Style, Length>;
 export declare const gridGapProperty: ShorthandProperty<Style, any>;
 export declare const gapProperty: ShorthandProperty<Style, any>;
-export declare const gridRowGapProperty: ShorthandProperty<Style, any>;
+export declare const gridRowGapProperty: ShorthandProperty<Style, Gap>;
 export declare const gridColumnGapProperty: ShorthandProperty<Style, Length>;
 export declare const maxWidthProperty: CssProperty<Style, LengthAuto>;
 export declare const maxHeightProperty: CssProperty<Style, LengthAuto>;
@@ -101,6 +103,8 @@ export declare const cornerShapeTopLeftProperty: CssProperty<Style, string>;
 export declare const cornerShapeTopRightProperty: CssProperty<Style, string>;
 export declare const cornerShapeBottomRightProperty: CssProperty<Style, string>;
 export declare const cornerShapeBottomLeftProperty: CssProperty<Style, string>;
+/** Splits `a / b / ...` into `count` longhands, filling omitted ones as CSS Grid does. */
+export declare function gridParts(value: string, count: number): string[];
 export declare const objectPositionProperty: CssProperty<Style, string>;
 export declare const borderTopStyleProperty: CssProperty<Style, string>;
 export declare const borderRightStyleProperty: CssProperty<Style, string>;

package/properties.js

@@ -1,8 +1,8 @@
-import { CssProperty, CssAnimationProperty, InheritedCssProperty, backgroundColorProperty, Style, ShorthandProperty, Length as CoreLength, fontSizeProperty, textAlignmentProperty, textDecorationProperty, textTransformProperty, PercentLength as CorePercentLength, Trace, CoreTypes, unsetValue, verticalAlignmentProperty, textShadowProperty, Font, Property, makeParser, makeValidator, marginTopProperty, marginRightProperty, marginBottomProperty, marginLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, minWidthProperty, minHeightProperty, widthProperty, heightProperty } from '@nativescript/core';
+import { CssProperty, CssAnimationProperty, InheritedCssProperty, backgroundColorProperty, Style, ShorthandProperty, Length as CoreLength, fontSizeProperty, textAlignmentProperty, textDecorationProperty, textTransformProperty, PercentLength as CorePercentLength, Trace, CoreTypes, unsetValue, verticalAlignmentProperty, textShadowProperty, Font, Property, makeParser, makeValidator, marginTopProperty, marginRightProperty, marginBottomProperty, marginLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, minWidthProperty, minHeightProperty, widthProperty, heightProperty, lineHeightProperty, letterSpacingProperty, } from '@nativescript/core';
 import { isMasonView_, touchAction_ } from './symbols';
 /** Marks a Style whose size accessors already resolve Mason's units. */
 const MASON_SIZE_UNITS = Symbol('mason:size-units');
-import { cssLengthToDip, parseAspectRatio } from './style';
+import { beginStyleWrite, cssLengthToDip, endStyleWrite, isSizingKeyword, parseAspectRatio } from './style';
 import { isCssMathFunction } from './css-math';
 import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexShrinkProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
 import { parseCSSShadow } from '@nativescript/core/ui/styling/css-shadow';
@@ -526,6 +526,38 @@ function overrideForMasonViews(property, options) {
     }
     property.overrideHandlers(handlers);
 }
+const rawDeclarations = new WeakMap();
+/** Plain views keep core's number; a mason view also records the raw declaration so its units survive. */
+function keepRawDeclarationForMasonViews(property, coreConverter) {
+    property.overrideHandlers({
+        valueConverter(value) {
+            const converted = coreConverter(value);
+            if (isMasonView(this)) {
+                let raw = rawDeclarations.get(this);
+                if (!raw) {
+                    raw = new Map();
+                    rawDeclarations.set(this, raw);
+                }
+                raw.set(property.name, { converted, raw: value });
+            }
+            return converted;
+        },
+    });
+}
+/** The declaration behind `value` if it came from this view's own CSS, else `value`. */
+export function masonRawDeclaration(style, propertyName, value) {
+    const raw = rawDeclarations.get(style)?.get(propertyName);
+    if (!raw) {
+        return value;
+    }
+    if (Object.is(raw.converted, value)) {
+        return raw.raw;
+    }
+    rawDeclarations.get(style).delete(propertyName);
+    return value;
+}
+keepRawDeclarationForMasonViews(lineHeightProperty, (v) => parseFloat(v));
+keepRawDeclarationForMasonViews(letterSpacingProperty, (v) => parseFloat(v));
 overrideForMasonViews(flexDirectionProperty, {
     coreConverter: FlexDirectionParse,
     apply: (style, value) => {
@@ -864,10 +896,18 @@ function masonLengthDeclaration(value) {
     if (typeof value !== 'string') {
         return value;
     }
+    const keyword = sizingKeywordLength(value);
+    if (keyword) {
+        return keyword;
+    }
     const dip = cssLengthToDip(value);
     // A bare number is a dip to core and a CSS pixel to mason — the same size.
     return dip === undefined ? value : String(dip);
 }
+/** Core throws on sizing keywords; a negative length reads as auto to core and carries the keyword as its unit. */
+function sizingKeywordLength(value) {
+    return isSizingKeyword(value) ? { unit: value.trim(), value: -2 } : undefined;
+}
 const MASON_SIZE_KEYS = [widthProperty, heightProperty].flatMap((property) => [property.name, property.cssName, property.cssLocalName]).filter((key) => typeof key === 'string' && key.length > 0);
 /**
  * The stylesheet-facing accessor a `CssAnimationProperty` installs is
@@ -893,7 +933,13 @@ function masonStyleProto(proto) {
             configurable: true,
             get,
             set(value) {
-                set.call(this, masonLengthDeclaration(value));
+                beginStyleWrite(this, key, value);
+                try {
+                    set.call(this, masonLengthDeclaration(value));
+                }
+                finally {
+                    endStyleWrite();
+                }
             },
         });
     }
@@ -1271,7 +1317,7 @@ export const flexBasisProperty = new CssProperty({
     // @ts-ignore
     equalityComparer: masonLengthEquals,
     // @ts-ignore
-    valueConverter: masonInsetConverter,
+    valueConverter: (value) => (isSizingKeyword(value) ? value.trim() : masonInsetConverter(value)),
     valueChanged(target, oldValue, newValue) {
         if (appliedInSetNative(target, flexBasisProperty))
             return;
@@ -1470,6 +1516,7 @@ export const gridTemplateColumnsProperty = new CssProperty({
 // @ts-ignore
 export const textWrapProperty = new CssProperty({
     name: 'textWrap',
+    cssName: 'text-wrap',
     affectsLayout: true,
     defaultValue: 'wrap',
     valueChanged(target, oldValue, newValue) {
@@ -1644,22 +1691,28 @@ gridAreaProperty.register(Style);
 // scalar properties lose CSS/local priority (including an explicit `auto`).
 // Preserve Mason's direct accessors; core 9.1 stylesheet expansion uses these
 // same longhands for both kinds of view.
-function gridParts(value, count) {
-    const parts = value.split('/').map((part) => part.trim());
+/** A lone `<custom-ident>` placement, which an omitted end copies instead of `auto`. */
+function isGridIdent(part) {
+    return /^-?[A-Za-z_][\w-]*$/.test(part) && !/^(auto|span)$/i.test(part);
+}
+/** Splits `a / b / ...` into `count` longhands, filling omitted ones as CSS Grid does. */
+export function gridParts(value, count) {
+    const parts = String(value)
+        .split('/')
+        .map((part) => part.trim());
     if (parts.length > count || parts.some((part) => !part))
         throw new Error(`Invalid grid placement: ${value}`);
-    while (parts.length < count)
-        parts.push('auto');
+    // Omitted ends copy their start (grid-area: row-start, column-start, row-end, column-end).
+    for (let i = parts.length; i < count; i++) {
+        const start = parts[i - (count === 4 ? 2 : 1)] ?? parts[0];
+        parts.push(isGridIdent(start) ? start : 'auto');
+    }
     return parts;
 }
 const gridPlacementShorthands = [
     { cssName: 'grid-row', longhands: [gridRowStartProperty, gridRowEndProperty], split: (value) => gridParts(value, 2) },
     { cssName: 'grid-column', longhands: [gridColumnStartProperty, gridColumnEndProperty], split: (value) => gridParts(value, 2) },
-    {
-        cssName: 'grid-area',
-        longhands: [gridRowStartProperty, gridColumnStartProperty, gridRowEndProperty, gridColumnEndProperty],
-        split: (value) => (value.includes('/') ? gridParts(value, 4) : [value, value, value, value]),
-    },
+    { cssName: 'grid-area', longhands: [gridRowStartProperty, gridColumnStartProperty, gridRowEndProperty, gridColumnEndProperty], split: (value) => gridParts(value, 4) },
 ];
 for (const entry of gridPlacementShorthands) {
     const shorthand = masonShorthandProperty(entry, function () {
@@ -2000,6 +2053,17 @@ export const maskBorderModeProperty = new CssProperty({
 });
 // The -webkit- prefixed names older and autoprefixed CSS still uses, set on the same Style
 // properties. Composite operators and box keywords are translated to the standard ones.
+// Gradient-text CSS is usually written `-webkit-background-clip: text`.
+const webkitBackgroundClipProperty = new CssProperty({
+    name: 'webkitBackgroundClip',
+    cssName: '-webkit-background-clip',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundClip = newValue;
+        }
+    },
+});
 const webkitMaskImageProperty = new CssProperty({
     name: 'webkitMaskImage',
     cssName: '-webkit-mask-image',
@@ -2164,6 +2228,7 @@ maskBorderWidthProperty.register(Style);
 maskBorderOutsetProperty.register(Style);
 maskBorderRepeatProperty.register(Style);
 maskBorderModeProperty.register(Style);
+webkitBackgroundClipProperty.register(Style);
 webkitMaskImageProperty.register(Style);
 webkitMaskSizeProperty.register(Style);
 webkitMaskPositionProperty.register(Style);