esm-styles 0.2.7 → 0.3.0

package/dist/lib/build.js

@@ -24,7 +24,7 @@ export async function build(configPath = 'esm-styles.config.js') {
     const mainCssFile = config.mainCssFile || 'styles.css';
     // Helper function to generate CSS comment header
     const generateCssComment = (sourceName) => {
-        const normalizedBasePath = (config.basePath || '.').replace(/^\.\//, '');
+        const normalizedBasePath = (config.basePath || '.').replace(/^\.*\//, '');
         const sourceFilePath = path.join(normalizedBasePath, config.sourcePath || '', `${sourceName}${suffix}`);
         return `/* This CSS was automatically generated from ${sourceFilePath}, do not edit directly */\n`;
     };
@@ -177,9 +177,15 @@ export async function build(configPath = 'esm-styles.config.js') {
     // Track output files for each floor
     const floorFiles = [];
     for (const floor of floors) {
-        const { source, layer } = floor;
+        const { source, layer, outputPath: floorOutputPath } = floor;
         const inputFile = path.join(sourcePath, `${source}${suffix}`);
-        const outputFile = path.join(outputPath, `${source}.css`);
+        // Use floor's outputPath if provided, otherwise use default
+        const floorOutputDir = floorOutputPath
+            ? path.join(basePath, floorOutputPath)
+            : outputPath;
+        // Ensure the output directory exists
+        await fs.mkdir(floorOutputDir, { recursive: true });
+        const outputFile = path.join(floorOutputDir, `${source}.css`);
         const fileUrl = pathToFileUrl(inputFile).href + `?update=${Date.now()}`;
         const stylesObj = (await import(fileUrl)).default;
         const css = getCss(stylesObj, {
@@ -196,8 +202,17 @@ export async function build(configPath = 'esm-styles.config.js') {
             wrappedCss = `${comment}@layer ${layer} {\n${css}\n}`;
         }
         await fs.writeFile(outputFile, wrappedCss, 'utf8');
-        floorFiles.push({ file: `${source}.css`, layer, source });
-        cssFiles.push({ floor: source, file: `${source}.css`, layer });
+        // Calculate relative path from default output directory for imports
+        const relativePath = floorOutputPath
+            ? path.relative(outputPath, outputFile)
+            : `${source}.css`;
+        floorFiles.push({
+            file: relativePath,
+            layer,
+            source,
+            outputPath: floorOutputPath,
+        });
+        cssFiles.push({ floor: source, file: relativePath, layer });
     }
     // 5. Create main CSS file
     const mainCssPath = path.join(outputPath, mainCssFile);
@@ -224,7 +239,7 @@ export async function build(configPath = 'esm-styles.config.js') {
     }
     const importedFloorFiles = floorFiles.filter(isImportedFloor);
     const floorImports = importedFloorFiles.map(importStatement).join('\n');
-    const normalizedBasePath = (config.basePath || '.').replace(/^\.\//, '');
+    const normalizedBasePath = (config.basePath || '.').replace(/^\.*\//, '');
     const mainCssComment = `/* This CSS was automatically generated as the main styles file from ${normalizedBasePath}, do not edit directly */\n`;
     const mainCss = mainCssComment +
         [

package/package.json

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