esm-styles 0.2.5 → 0.2.6

package/dist/lib/build.js

@@ -163,6 +163,8 @@ export async function build(configPath = 'esm-styles.config.js') {
         }
     }
     // 4. Process each floor (replaces legacy layers)
+    const importFloors = config.importFloors || floors.map((f) => f.source);
+    // Track unique layer names in order of first appearance (for imported floors only)
     const uniqueLayers = [];
     // Track output files for each floor
     const floorFiles = [];
@@ -178,29 +180,41 @@ export async function build(configPath = 'esm-styles.config.js') {
         });
         let wrappedCss = css;
         if (layer) {
-            wrappedCss = `@layer ${layer} {\n${css}\n}`;
+            // add layer to order in any case, even if the floor is not imported
             if (!uniqueLayers.includes(layer)) {
                 uniqueLayers.push(layer);
             }
+            wrappedCss = `@layer ${layer} {\n${css}\n}`;
         }
         await fs.writeFile(outputFile, wrappedCss, 'utf8');
-        floorFiles.push({ file: `${source}.css`, layer });
+        floorFiles.push({ file: `${source}.css`, layer, source });
         cssFiles.push({ floor: source, file: `${source}.css`, layer });
     }
     // 5. Create main CSS file
     const mainCssPath = path.join(outputPath, mainCssFile);
+    // Type guard for cssFiles entries with type 'global' or 'media'
+    function isGlobalOrMedia(f) {
+        return ((f.type === 'global' || f.type === 'media') && typeof f.file === 'string');
+    }
     // Compose imports for variable sets
-    const varImports = cssFiles
-        .filter((f) => f.type === 'global' || f.type === 'media')
-        .map((f) => {
+    function toImportStatement(f) {
         if (f.mediaQuery) {
             return `@import '${f.file}' ${f.mediaQuery};`;
         }
         return `@import '${f.file}';`;
-    })
+    }
+    const varImports = cssFiles.filter(isGlobalOrMedia)
+        .map(toImportStatement)
         .join('\n');
-    // Compose imports for floors (in order)
-    const floorImports = floorFiles.map((f) => `@import '${f.file}';`).join('\n');
+    // Compose imports for floors (in order, only those in importFloors)
+    function isImportedFloor(f) {
+        return importFloors.includes(f.source);
+    }
+    function importStatement(f) {
+        return `@import '${f.file}';`;
+    }
+    const importedFloorFiles = floorFiles.filter(isImportedFloor);
+    const floorImports = importedFloorFiles.map(importStatement).join('\n');
     const mainCss = [
         uniqueLayers.length ? `@layer ${uniqueLayers.join(', ')};` : '',
         floorImports,

package/doc/usage-guide.md

@@ -85,6 +85,9 @@ export default {
   // Output
   mainCssFile: 'styles.css',
 
+  // floors to include in the main CSS file
+  importFloors: ['defaults', 'components', 'layout'],
+
   // CSS Variables configuration
   globalVariables: 'global',
   globalRootSelector: ':root',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esm-styles",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "A library for working with ESM styles",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",