@cssfn/cssfn - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

dist/cssfn.js

@@ -180,2 +180,3 @@ // jss:
     const { groupSelectors = defaultCombinatorOptions.groupSelectors, } = options;
+    const withCombinator = `&${combinator}`;
     const combiSelectors = flat(selectors).map((selector) => {
@@ -189,3 +190,3 @@ if (!selector)
             return `&${selector}`; // pseudo element => attach the parent itself (for descendants & children)
-        return `&${combinator}${selector}`;
+        return `${withCombinator}${selector}`;
     });
@@ -198,4 +199,47 @@ if (!combiSelectors.length)
     if (groupSelectors) {
+        if (combiSelectors.length === 1)
+            return {
+                [combiSelectors[0]]: mergedStyles,
+            };
+        const selectorsGroups = combiSelectors.map((selector) => {
+            const withCombi = selector.startsWith(withCombinator);
+            if (withCombi)
+                return { withCombi: selector };
+            const onlyBeginAmp = (selector.lastIndexOf('&') === 0);
+            if (onlyBeginAmp)
+                return { begAmp: selector };
+            const onlyEndAmp = (selector.indexOf('&') === (selector.length - 1));
+            if (onlyEndAmp)
+                return { endAmp: selector };
+            return { other: selector };
+        });
+        const withCombiSelectors = selectorsGroups.filter((group) => !!group.withCombi).map((group) => group.withCombi);
+        const begAmpSelectors = selectorsGroups.filter((group) => !!group.begAmp).map((group) => group.begAmp);
+        const endAmpSelectors = selectorsGroups.filter((group) => !!group.endAmp).map((group) => group.endAmp);
+        const ungroupableSelectors = selectorsGroups.filter((group) => !!group.other).map((group) => group.other);
         return {
-            [combiSelectors.join(',')]: mergedStyles,
+            ...(withCombiSelectors.length ? {
+                [(withCombiSelectors.length === 1)
+                    ?
+                        withCombiSelectors[0]
+                    :
+                        `${withCombinator}:is(${withCombiSelectors.map((selector) => selector.slice(withCombinator.length)).join(',')})`]: mergedStyles,
+            } : {}),
+            ...(begAmpSelectors.length ? {
+                [(begAmpSelectors.length === 1)
+                    ?
+                        begAmpSelectors[0]
+                    :
+                        `&:is(${begAmpSelectors.map((selector) => selector.slice(1)).join(',')})`]: mergedStyles,
+            } : {}),
+            ...(endAmpSelectors.length ? {
+                [(endAmpSelectors.length === 1)
+                    ?
+                        endAmpSelectors[0]
+                    :
+                        `:is(${endAmpSelectors.map((selector) => selector.slice(0, -1)).join(',')})&`]: mergedStyles,
+            } : {}),
+            ...(ungroupableSelectors.length ? {
+                [ungroupableSelectors.join(',')]: mergedStyles,
+            } : {}),
         };
@@ -355,4 +399,32 @@ }
                 .map(([nestedSelectors, mergedStyles]) => {
+                const selectorsGroups = nestedSelectors.map((selector) => {
+                    const onlyBeginAmp = (selector.lastIndexOf('&') === 0);
+                    if (onlyBeginAmp)
+                        return { begAmp: selector };
+                    const onlyEndAmp = (selector.indexOf('&') === (selector.length - 1));
+                    if (onlyEndAmp)
+                        return { endAmp: selector };
+                    return { other: selector };
+                });
+                const begAmpSelectors = selectorsGroups.filter((group) => !!group.begAmp).map((group) => group.begAmp);
+                const endAmpSelectors = selectorsGroups.filter((group) => !!group.endAmp).map((group) => group.endAmp);
+                const ungroupableSelectors = selectorsGroups.filter((group) => !!group.other).map((group) => group.other);
                 return {
-                    [nestedSelectors.join(',')]: mergedStyles,
+                    ...(begAmpSelectors.length ? {
+                        [(begAmpSelectors.length === 1)
+                            ?
+                                begAmpSelectors[0]
+                            :
+                                `&:is(${begAmpSelectors.map((selector) => selector.slice(1)).join(',')})`]: mergedStyles,
+                    } : {}),
+                    ...(endAmpSelectors.length ? {
+                        [(endAmpSelectors.length === 1)
+                            ?
+                                endAmpSelectors[0]
+                            :
+                                `:is(${endAmpSelectors.map((selector) => selector.slice(0, -1)).join(',')})&`]: mergedStyles,
+                    } : {}),
+                    ...(ungroupableSelectors.length ? {
+                        [ungroupableSelectors.join(',')]: mergedStyles,
+                    } : {}),
                 };
@@ -359,0 +431,0 @@ }),

package.json

 {
   "name": "@cssfn/cssfn",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Writes CSS in javascript function.",
@@ -5,0 +5,0 @@ "type": "module",

src/cssfn.ts

@@ -325,2 +325,3 @@ // jss:
     
+    const withCombinator = `&${combinator}`;
     const combiSelectors = flat(selectors).map((selector) => {
@@ -334,3 +335,3 @@ if (!selector) selector = '*'; // empty selector => match any element
         
-        return `&${combinator}${selector}`;
+        return `${withCombinator}${selector}`;
     });
@@ -347,4 +348,58 @@ if (!combiSelectors.length) return {}; // no selector => return empty
     if (groupSelectors) {
+        if (combiSelectors.length === 1) return {
+            [combiSelectors[0]]: (mergedStyles as JssValue),
+        };
+        
+        
+        
+        const selectorsGroups = combiSelectors.map((selector) => {
+            const withCombi = selector.startsWith(withCombinator);
+            if (withCombi) return { withCombi: selector };
+            
+            const onlyBeginAmp = (selector.lastIndexOf('&') === 0);
+            if (onlyBeginAmp) return { begAmp: selector };
+            
+            const onlyEndAmp = (selector.indexOf('&') === (selector.length - 1));
+            if (onlyEndAmp) return { endAmp: selector };
+            
+            return { other: selector };
+        });
+        const withCombiSelectors   = selectorsGroups.filter((group) => !!group.withCombi).map((group) => group.withCombi! );
+        const begAmpSelectors   = selectorsGroups.filter((group)    => !!group.begAmp   ).map((group) => group.begAmp!    );
+        const endAmpSelectors   = selectorsGroups.filter((group)    => !!group.endAmp   ).map((group) => group.endAmp!    );
+        const ungroupableSelectors = selectorsGroups.filter((group) => !!group.other    ).map((group) => group.other!     );
         return {
-            [combiSelectors.join(',')]: (mergedStyles as JssValue),
+            ...(withCombiSelectors.length ? {
+                [
+                    (withCombiSelectors.length === 1)
+                    ?
+                    withCombiSelectors[0]
+                    :
+                    `${withCombinator}:is(${withCombiSelectors.map((selector) => selector.slice(withCombinator.length)).join(',')})`
+                ]: (mergedStyles as JssValue),
+            } : {}),
+            
+            ...(begAmpSelectors.length ? {
+                [
+                    (begAmpSelectors.length === 1)
+                    ?
+                    begAmpSelectors[0]
+                    :
+                    `&:is(${begAmpSelectors.map((selector) => selector.slice(1)).join(',')})`
+                ]: (mergedStyles as JssValue),
+            } : {}),
+            
+            ...(endAmpSelectors.length ? {
+                [
+                    (endAmpSelectors.length === 1)
+                    ?
+                    endAmpSelectors[0]
+                    :
+                    `:is(${endAmpSelectors.map((selector) => selector.slice(0, -1)).join(',')})&`
+                ]: (mergedStyles as JssValue),
+            } : {}),
+            
+            ...(ungroupableSelectors.length ? {
+                [ungroupableSelectors.join(',')]: (mergedStyles as JssValue),
+            } : {}),
         };
@@ -564,4 +619,38 @@ }
                 .map(([nestedSelectors, mergedStyles]): Style => {
+                    const selectorsGroups = nestedSelectors.map((selector) => {
+                        const onlyBeginAmp = (selector.lastIndexOf('&') === 0);
+                        if (onlyBeginAmp) return { begAmp: selector };
+                        
+                        const onlyEndAmp = (selector.indexOf('&') === (selector.length - 1));
+                        if (onlyEndAmp) return { endAmp: selector };
+                        
+                        return { other: selector };
+                    });
+                    const begAmpSelectors   = selectorsGroups.filter((group)    => !!group.begAmp   ).map((group) => group.begAmp!    );
+                    const endAmpSelectors   = selectorsGroups.filter((group)    => !!group.endAmp   ).map((group) => group.endAmp!    );
+                    const ungroupableSelectors = selectorsGroups.filter((group) => !!group.other    ).map((group) => group.other!     );
                     return {
-                        [nestedSelectors.join(',')] : mergedStyles as JssValue,
+                        ...(begAmpSelectors.length ? {
+                            [
+                                (begAmpSelectors.length === 1)
+                                ?
+                                begAmpSelectors[0]
+                                :
+                                `&:is(${begAmpSelectors.map((selector) => selector.slice(1)).join(',')})`
+                            ]: (mergedStyles as JssValue),
+                        } : {}),
+                        
+                        ...(endAmpSelectors.length ? {
+                            [
+                                (endAmpSelectors.length === 1)
+                                ?
+                                endAmpSelectors[0]
+                                :
+                                `:is(${endAmpSelectors.map((selector) => selector.slice(0, -1)).join(',')})&`
+                            ]: (mergedStyles as JssValue),
+                        } : {}),
+                        
+                        ...(ungroupableSelectors.length ? {
+                            [ungroupableSelectors.join(',')]: (mergedStyles as JssValue),
+                        } : {}),
                     };
@@ -568,0 +657,0 @@ }),

No alert changes

Improved metrics

Total package byte prevSize

91274

increased by10.43%

Lines of code

1483

increased by11.09%

No dependency changes