esm-styles 0.2.6 → 0.2.8

package/dist/lib/build.js

@@ -22,6 +22,12 @@ export async function build(configPath = 'esm-styles.config.js') {
     const suffix = config.sourceFilesSuffix || '.styles.mjs';
     const floors = config.floors || [];
     const mainCssFile = config.mainCssFile || 'styles.css';
+    // Helper function to generate CSS comment header
+    const generateCssComment = (sourceName) => {
+        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`;
+    };
     // Merge media shorthands
     const mediaShorthands = getMediaShorthands(config);
     // Ensure output directory exists
@@ -35,7 +41,8 @@ export async function build(configPath = 'esm-styles.config.js') {
         const varsObj = (await import(fileUrl)).default;
         const cssVars = getCssVariables(varsObj);
         const rootSelector = config.globalRootSelector || ':root';
-        const wrappedCss = `${rootSelector} {\n${cssVars}\n}`;
+        const comment = generateCssComment(config.globalVariables);
+        const wrappedCss = `${comment}${rootSelector} {\n${cssVars}\n}`;
         await fs.writeFile(outputFile, wrappedCss, 'utf8');
         cssFiles.push({ type: 'global', file: 'global.css' });
     }
@@ -73,7 +80,8 @@ export async function build(configPath = 'esm-styles.config.js') {
                             fullSelector = `${rootSelector} ${selector}`;
                         }
                     }
-                    const block = `${fullSelector} {\n${cssVars}\n}`;
+                    const comment = generateCssComment(setName);
+                    const block = `${comment}${fullSelector} {\n${cssVars}\n}`;
                     await fs.writeFile(outputFile, block, 'utf8');
                     cssFiles.push({
                         type: 'media',
@@ -178,13 +186,14 @@ export async function build(configPath = 'esm-styles.config.js') {
             ...mediaShorthands,
             globalRootSelector: config.globalRootSelector,
         });
-        let wrappedCss = css;
+        const comment = generateCssComment(source);
+        let wrappedCss = `${comment}${css}`;
         if (layer) {
             // 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}`;
+            wrappedCss = `${comment}@layer ${layer} {\n${css}\n}`;
         }
         await fs.writeFile(outputFile, wrappedCss, 'utf8');
         floorFiles.push({ file: `${source}.css`, layer, source });
@@ -215,13 +224,17 @@ export async function build(configPath = 'esm-styles.config.js') {
     }
     const importedFloorFiles = floorFiles.filter(isImportedFloor);
     const floorImports = importedFloorFiles.map(importStatement).join('\n');
-    const mainCss = [
-        uniqueLayers.length ? `@layer ${uniqueLayers.join(', ')};` : '',
-        floorImports,
-        varImports,
-    ]
-        .filter(Boolean)
-        .join('\n') + '\n';
+    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 +
+        [
+            uniqueLayers.length ? `@layer ${uniqueLayers.join(', ')};` : '',
+            floorImports,
+            varImports,
+        ]
+            .filter(Boolean)
+            .join('\n') +
+        '\n';
     await fs.writeFile(mainCssPath, mainCss, 'utf8');
 }
 // Helper for file URL import

package/package.json

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