@cssfn/cssfn - npm Package Compare versions

Comparing version 2.0.4 to 2.0.6

dist/cssfn.d.ts

@@ -10,3 +10,3 @@ import type { CssCustomValue, CssCustomProps, CssKnownValueOf, CssProps, CssRule, CssRuleCollection, CssStyle, CssStyleCollection, CssFontFaceStyleCollection, CssCustomKeyframesRef, CssKeyframes, CssKeyframesRule, CssSelectorCollection, CssSelectorOptions, CssScopeName, CssScopeOptions, CssScopeEntry } from '@cssfn/css-types';
  */
-export declare const rule: (selectors: CssSelectorCollection, styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
+export declare const rule: (selectors: CssSelectorCollection, styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
 /**
@@ -17,3 +17,3 @@ * Defines an @rule.
 export declare const atRule: (atRule: `@${string}`, styles: CssStyleCollection) => CssRule;
-export declare const rules: (rules: CssRuleCollection, options?: CssSelectorOptions | undefined) => CssRule;
+export declare const rules: (rules: CssRuleCollection, options?: CssSelectorOptions) => CssRule;
 /**
@@ -23,3 +23,3 @@ * Defines style variants.
  */
-export declare const variants: (variants: CssRuleCollection, options?: CssSelectorOptions | undefined) => CssRule;
+export declare const variants: (variants: CssRuleCollection, options?: CssSelectorOptions) => CssRule;
 /**
@@ -29,3 +29,3 @@ * Defines style states.
  */
-export declare const states: (states: CssRuleCollection, options?: CssSelectorOptions | undefined) => CssRule;
+export declare const states: (states: CssRuleCollection, options?: CssSelectorOptions) => CssRule;
 export declare function keyframes(name: string, items: CssKeyframes): CssKeyframesRule;
@@ -38,26 +38,26 @@ export declare function keyframes(items: CssKeyframes): readonly [CssKeyframesRule, CssCustomKeyframesRef];
 export declare const atGlobal: (rules: CssRuleCollection) => CssRule;
-export declare const atRoot: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifFirstChild: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifNotFirstChild: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifLastChild: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifNotLastChild: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifNthChild: (step: number, offset: number, styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifNotNthChild: (step: number, offset: number, styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifNthLastChild: (step: number, offset: number, styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifNotNthLastChild: (step: number, offset: number, styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifActive: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifNotActive: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifFocus: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifNotFocus: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifFocusVisible: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifNotFocusVisible: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifHover: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifNotHover: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifEmpty: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const ifNotEmpty: (styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const combinators: (combinator: Combinator, selectors: CssSelectorCollection, styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const descendants: (selectors: CssSelectorCollection, styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const children: (selectors: CssSelectorCollection, styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const siblings: (selectors: CssSelectorCollection, styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
-export declare const nextSiblings: (selectors: CssSelectorCollection, styles: CssStyleCollection, options?: CssSelectorOptions | undefined) => CssRule;
+export declare const atRoot: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifFirstChild: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifNotFirstChild: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifLastChild: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifNotLastChild: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifNthChild: (step: number, offset: number, styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifNotNthChild: (step: number, offset: number, styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifNthLastChild: (step: number, offset: number, styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifNotNthLastChild: (step: number, offset: number, styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifActive: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifNotActive: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifFocus: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifNotFocus: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifFocusVisible: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifNotFocusVisible: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifHover: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifNotHover: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifEmpty: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const ifNotEmpty: (styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const combinators: (combinator: Combinator, selectors: CssSelectorCollection, styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const descendants: (selectors: CssSelectorCollection, styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const children: (selectors: CssSelectorCollection, styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const siblings: (selectors: CssSelectorCollection, styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
+export declare const nextSiblings: (selectors: CssSelectorCollection, styles: CssStyleCollection, options?: CssSelectorOptions) => CssRule;
 /**
@@ -78,3 +78,3 @@ * Defines css properties.
  */
-export declare const scopeOf: <TCssScopeName extends CssScopeName>(scopeName: TCssScopeName, styles: CssStyleCollection, options?: CssScopeOptions | undefined) => CssScopeEntry<TCssScopeName>;
+export declare const scopeOf: <TCssScopeName extends CssScopeName>(scopeName: TCssScopeName, styles: CssStyleCollection, options?: CssScopeOptions) => CssScopeEntry<TCssScopeName>;
 /**
@@ -84,3 +84,3 @@ * Defines the main styleSheet.
  */
-export declare const mainScope: (styles: CssStyleCollection, options?: CssScopeOptions | undefined) => CssScopeEntry<"main">;
+export declare const mainScope: (styles: CssStyleCollection, options?: CssScopeOptions) => CssScopeEntry<"main">;
 /**
@@ -87,0 +87,0 @@ * Defines an unscoped styleSheet (applied to a whole document).

dist/mergeSelectors.d.ts

@@ -5,2 +5,2 @@ import type { CssSelectorOptions } from '@cssfn/css-types';
 export declare const groupSimilarSelectors: (pureSelectorGroup: PureSelector[]) => PureSelector[];
-export declare const mergeSelectors: (selectorGroup: SelectorGroup, options?: CssSelectorOptions | undefined) => SelectorGroup;
+export declare const mergeSelectors: (selectorGroup: SelectorGroup, options?: CssSelectorOptions) => SelectorGroup;

dist/mergeSelectors.js

@@ -14,8 +14,8 @@ import {
     if ((minSpecificityWeight !== null) && (specificityWeight < minSpecificityWeight)) {
-        return [specificityWeight, 2 /* TooSmall */];
+        return [specificityWeight, 2 /* SpecificityWeightStatus.TooSmall */];
     } // if
     if ((maxSpecificityWeight !== null) && (specificityWeight > maxSpecificityWeight)) {
-        return [specificityWeight, 1 /* TooBig */];
+        return [specificityWeight, 1 /* SpecificityWeightStatus.TooBig */];
     } // if
-    return [specificityWeight, 0 /* Fit */];
+    return [specificityWeight, 0 /* SpecificityWeightStatus.Fit */];
 };
@@ -178,5 +178,5 @@ const createGroupBySpecificityWeightStatus = (minSpecificityWeight, maxSpecificityWeight) => (accum, pureSelector) => {
     const selectorGroupBySpecificityWeightStatus = pureSelectorGroup.reduce(createGroupBySpecificityWeightStatus(minSpecificityWeight, maxSpecificityWeight), new Map());
-    const fitSelectors = selectorGroupBySpecificityWeightStatus.get(0 /* Fit */) ?? [];
-    const tooSmallSelectors = selectorGroupBySpecificityWeightStatus.get(2 /* TooSmall */) ?? [];
-    const tooBigSelectors = selectorGroupBySpecificityWeightStatus.get(1 /* TooBig */) ?? [];
+    const fitSelectors = selectorGroupBySpecificityWeightStatus.get(0 /* SpecificityWeightStatus.Fit */) ?? [];
+    const tooSmallSelectors = selectorGroupBySpecificityWeightStatus.get(2 /* SpecificityWeightStatus.TooSmall */) ?? [];
+    const tooBigSelectors = selectorGroupBySpecificityWeightStatus.get(1 /* SpecificityWeightStatus.TooBig */) ?? [];
     return createSelectorGroup(...fitSelectors.map((group) => group.selector), ...tooSmallSelectors.map((group) => increaseSpecificity(group.selector, ((minSpecificityWeight ?? 1) - group.specificityWeight))), ...tooBigSelectors.map((group) => decreaseSpecificity(group.selector, (group.specificityWeight - (maxSpecificityWeight ?? group.specificityWeight)), minSpecificityWeight)));
@@ -211,3 +211,3 @@ };
     if (onlyParent)
-        return 1 /* OnlyParent */;
+        return 1 /* ParentPosition.OnlyParent */;
     const hasMiddlesWithParent = middlesWithParent(pureSelector);
@@ -217,10 +217,10 @@ const hasEndsWithParent = endsWithParent(pureSelector);
     if (onlyBeginParent)
-        return 2 /* OnlyBeginParent */;
+        return 2 /* ParentPosition.OnlyBeginParent */;
     const onlyEndParent = !hasStartsWithParent && !hasMiddlesWithParent && hasEndsWithParent;
     if (onlyEndParent)
-        return 3 /* OnlyEndParent */;
+        return 3 /* ParentPosition.OnlyEndParent */;
     const noParent = !hasStartsWithParent && !hasMiddlesWithParent && !hasEndsWithParent;
     if (noParent)
-        return 0 /* NoParent */;
-    return 4 /* RandomParent */;
+        return 0 /* ParentPosition.NoParent */;
+    return 4 /* ParentPosition.RandomParent */;
 };
@@ -337,7 +337,7 @@ const groupByParentPosition = (accum, pureSelector) => {
     const selectorGroupByParentPosition = normalizedSelectorGroup.reduce(groupByParentPosition, new Map());
-    const noParentSelectorGroup = selectorGroupByParentPosition.get(0 /* NoParent */) ?? [];
-    const onlyParentSelectorGroup = selectorGroupByParentPosition.get(1 /* OnlyParent */) ?? [];
-    const onlyBeginParentSelectorGroup = selectorGroupByParentPosition.get(2 /* OnlyBeginParent */) ?? [];
-    const onlyEndParentSelectorGroup = selectorGroupByParentPosition.get(3 /* OnlyEndParent */) ?? [];
-    const randomParentSelectorGroup = selectorGroupByParentPosition.get(4 /* RandomParent */) ?? [];
+    const noParentSelectorGroup = selectorGroupByParentPosition.get(0 /* ParentPosition.NoParent */) ?? [];
+    const onlyParentSelectorGroup = selectorGroupByParentPosition.get(1 /* ParentPosition.OnlyParent */) ?? [];
+    const onlyBeginParentSelectorGroup = selectorGroupByParentPosition.get(2 /* ParentPosition.OnlyBeginParent */) ?? [];
+    const onlyEndParentSelectorGroup = selectorGroupByParentPosition.get(3 /* ParentPosition.OnlyEndParent */) ?? [];
+    const randomParentSelectorGroup = selectorGroupByParentPosition.get(4 /* ParentPosition.RandomParent */) ?? [];
     return createSelectorGroup(
@@ -344,0 +344,0 @@ // no parent

dist/mergeStyles.js

@@ -40,7 +40,7 @@ import {
     if (selector.startsWith('@'))
-        return 1 /* AtRule */;
+        return 1 /* RuleType.AtRule */;
     if (selector.startsWith(' '))
-        return 2 /* PropRule */;
+        return 2 /* RuleType.PropRule */;
     if (selector.includes('&'))
-        return 0 /* SelectorRule */;
+        return 0 /* RuleType.SelectorRule */;
     return null;
@@ -51,7 +51,7 @@ };
     switch (ruleType) {
-        case 2 /* PropRule */:
+        case 2 /* RuleType.PropRule */:
             selector = selector.slice(1); // remove prefixed space
             break;
         case null: // unknown RuleType
-            ruleType = 0 /* SelectorRule */; // default to (nested) SelectorRule
+            ruleType = 0 /* RuleType.SelectorRule */; // default to (nested) SelectorRule
             selector = `&${selector}`; // :active => &:active
@@ -80,3 +80,3 @@ break;
     // parse selectors:
-    const selectorGroup = ((selectorGroupByRuleType.get(0 /* SelectorRule */) ?? []) // take only the SelectorRule(s)
+    const selectorGroup = ((selectorGroupByRuleType.get(0 /* RuleType.SelectorRule */) ?? []) // take only the SelectorRule(s)
         .flatMap((selectorString) => {
@@ -106,4 +106,4 @@ const selectorGroup = parseSelectors(selectorString);
     const additionalFinalProps = [
-        ...(selectorGroupByRuleType.get(1 /* AtRule */) ?? []),
-        ...(selectorGroupByRuleType.get(2 /* PropRule */) ?? []), // eg: from, to, 25% (special properties of @keyframes rule)
+        ...(selectorGroupByRuleType.get(1 /* RuleType.AtRule */) ?? []),
+        ...(selectorGroupByRuleType.get(2 /* RuleType.PropRule */) ?? []), // eg: from, to, 25% (special properties of @keyframes rule)
     ];
@@ -123,2 +123,6 @@ for (const additionalFinalProp of additionalFinalProps) {
     for (const [propName, propValue] of newStyle) {
+        // `undefined` => preserves existing prop (if any)
+        // `null`      => delete    existing prop (if any)
+        if (propValue === undefined)
+            continue;
         style.delete(propName); // delete the old prop (if any), so the new prop always placed at the end of LiteralObject
@@ -125,0 +129,0 @@ style.set(propName, propValue); // add/overwrite

dist/styleSheets.d.ts

@@ -28,3 +28,3 @@ import type { ProductOrFactory } from '@cssfn/types';
 export declare const styleSheetRegistry: StyleSheetRegistry;
-export declare const styleSheets: <TCssScopeName extends CssScopeName>(scopes: ProductOrFactory<CssScopeList<TCssScopeName> | null> | Observable<boolean | ProductOrFactory<CssScopeList<TCssScopeName> | null>>, options?: StyleSheetOptions | undefined) => CssScopeMap<TCssScopeName>;
-export declare const styleSheet: (styles: CssStyleCollection | Observable<CssStyleCollection | boolean>, options?: (StyleSheetOptions & CssScopeOptions) | undefined) => CssClassName;
+export declare const styleSheets: <TCssScopeName extends CssScopeName>(scopes: ProductOrFactory<CssScopeList<TCssScopeName> | null> | Observable<boolean | ProductOrFactory<CssScopeList<TCssScopeName> | null>>, options?: StyleSheetOptions) => CssScopeMap<TCssScopeName>;
+export declare const styleSheet: (styles: CssStyleCollection | Observable<CssStyleCollection | boolean>, options?: StyleSheetOptions & CssScopeOptions) => CssClassName;

package.json

 {
   "name": "@cssfn/cssfn",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "Writes, imports, and exports css stylesheets as javascript modules.",
@@ -32,4 +32,4 @@ "keywords": [
   "dependencies": {
-    "@cssfn/css-selectors": "^2.0.1",
-    "@cssfn/css-types": "^2.0.2",
+    "@cssfn/css-selectors": "^2.0.2",
+    "@cssfn/css-types": "^2.0.3",
     "@cssfn/types": "^2.0.1",
@@ -49,3 +49,3 @@ "@types/hyphenate-style-name": "^1.0.0",
   },
-  "gitHead": "db014a720cbc4c09fa65293f495d9a17a874fd7c"
+  "gitHead": "34d5af25d0ea66caecd79d9b575e7baf8a3a4116"
 }

src/mergeStyles.ts

@@ -210,2 +210,8 @@ // cssfn:
     for (const [propName, propValue] of (newStyle as Map<keyof CssStyle, ValueOf<CssStyle>>)) {
+        // `undefined` => preserves existing prop (if any)
+        // `null`      => delete    existing prop (if any)
+        if (propValue === undefined) continue;
+        
+        
+        
         style.delete(propName as any);                // delete the old prop (if any), so the new prop always placed at the end of LiteralObject
@@ -212,0 +218,0 @@ style.set(propName as any, propValue as any); // add/overwrite

src/utilities.ts

@@ -47,3 +47,3 @@ // cssfn:
     
-    return collection.flat(Infinity);
+    return ((collection as any).flat(Infinity) as T[]);
 };
@@ -50,0 +50,0 @@

No alert changes

Improved metrics

Total package byte prevSize

555845

increased by0.07%

Lines of code

15572

increased by0.04%

Dependency changes

• Updated@cssfn/css-selectors@^2.0.2

• Updated@cssfn/css-types@^2.0.3