@plumeria/webpack-plugin 0.22.2 → 0.22.4

package/dist/create.js

@@ -11,31 +11,44 @@ function compileToSingleCSS(object) {
         const flat = {};
         const nonFlat = {};
         (0, zss_engine_1.splitAtomicAndNested)(styleObj, flat, nonFlat);
-        const props = Object.keys(flat);
-        const finalFlat = {};
-        for (let i = 0; i < props.length; i++) {
-            const prop = props[i];
-            const kebab = (0, zss_engine_1.camelToKebabCase)(prop);
-            const isShorthand = !!zss_engine_1.SHORTHAND_PROPERTIES[kebab];
-            if (isShorthand) {
-                finalFlat[prop] = flat[prop];
-            }
-            else {
-                let isOverridden = false;
-                const shorthands = zss_engine_1.LONG_TO_SHORT[kebab] || [];
-                for (let j = i + 1; j < props.length; j++) {
-                    const futureProp = props[j];
-                    const futureKebab = (0, zss_engine_1.camelToKebabCase)(futureProp);
-                    if (shorthands.includes(futureKebab)) {
-                        isOverridden = true;
-                        break;
+        const overrideLonghand = (style) => {
+            const props = Object.keys(style);
+            if (props.some((p) => p.startsWith('@'))) {
+                const finalStyle = { ...style };
+                for (const key of props) {
+                    if (key.startsWith('@')) {
+                        finalStyle[key] = overrideLonghand(style[key]);
                     }
                 }
-                if (!isOverridden) {
-                    finalFlat[prop] = flat[prop];
+                return finalStyle;
+            }
+            const finalStyle = {};
+            for (let i = 0; i < props.length; i++) {
+                const prop = props[i];
+                const kebab = (0, zss_engine_1.camelToKebabCase)(prop);
+                const isShorthand = !!zss_engine_1.SHORTHAND_PROPERTIES[kebab];
+                if (isShorthand) {
+                    finalStyle[prop] = style[prop];
+                }
+                else {
+                    let isOverridden = false;
+                    const shorthands = zss_engine_1.LONG_TO_SHORT[kebab] || [];
+                    for (let j = i + 1; j < props.length; j++) {
+                        const futureProp = props[j];
+                        const futureKebab = (0, zss_engine_1.camelToKebabCase)(futureProp);
+                        if (shorthands.includes(futureKebab)) {
+                            isOverridden = true;
+                            break;
+                        }
+                    }
+                    if (!isOverridden) {
+                        finalStyle[prop] = style[prop];
+                    }
                 }
             }
-        }
+            return finalStyle;
+        };
+        const finalFlat = overrideLonghand(flat);
         const records = [];
         Object.entries(finalFlat).forEach(([prop, value]) => {
             const hashes = new Set();
@@ -60,10 +73,14 @@ function compileToSingleCSS(object) {
             });
         });
         if (Object.keys(nonFlat).length > 0) {
-            const nonFlatObj = { [key]: nonFlat };
+            const finalNonFlat = {};
+            Object.entries(nonFlat).forEach(([atRule, nestedObj]) => {
+                finalNonFlat[atRule] = overrideLonghand(nestedObj);
+            });
+            const nonFlatObj = { [key]: finalNonFlat };
             const nonFlatHash = (0, zss_engine_1.genBase36Hash)(nonFlatObj, 1, 7);
             const { styleSheet } = (0, zss_engine_1.transpile)(nonFlatObj, nonFlatHash);
-            Object.entries(nonFlat).forEach(([atRule, nestedObj]) => {
+            Object.entries(finalNonFlat).forEach(([atRule, nestedObj]) => {
                 Object.entries(nestedObj).forEach(([prop]) => {
                     records.push({
                         key: atRule + prop,

package/dist/index.js

@@ -86,18 +86,17 @@ class PlumeriaPlugin {
             return '';
         }
         const sortedStyles = allStyles.sort((a, b) => (b.lastAccessed || 0) - (a.lastAccessed || 0));
-        const latestStyles = sortedStyles[0];
         const keyframeStylesSet = new Set();
         const viewTransitionStylesSet = new Set();
         const tokenStylesSet = new Set();
         const baseStylesSet = new Set();
-        if (latestStyles.keyframeStyles?.trim().length > 0)
-            keyframeStylesSet.add(latestStyles.keyframeStyles);
-        if (latestStyles.viewTransitionStyles?.trim().length > 0)
-            viewTransitionStylesSet.add(latestStyles.viewTransitionStyles);
-        if (latestStyles.tokenStyles?.trim().length > 0)
-            tokenStylesSet.add(latestStyles.tokenStyles);
         for (const s of sortedStyles) {
+            if (s.keyframeStyles?.trim().length > 0)
+                keyframeStylesSet.add(s.keyframeStyles);
+            if (s.viewTransitionStyles?.trim().length > 0)
+                viewTransitionStylesSet.add(s.viewTransitionStyles);
+            if (s.tokenStyles?.trim().length > 0)
+                tokenStylesSet.add(s.tokenStyles);
             if (s.baseStyles?.trim().length > 0)
                 baseStylesSet.add(s.baseStyles);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/webpack-plugin",
-  "version": "0.22.2",
+  "version": "0.22.4",
   "description": "Plumeria Webpack plugin",
   "repository": {
     "type": "git",