uglify-js-minify-css-allfiles 2.5.1 → 2.7.0

package/README.md

@@ -68,6 +68,8 @@ await minifyAll('./src/', {
     modules: false,
     useBuiltIns: 'usage',
     corejs: 3,
+    useAppendTransform: true,
+    plugins: ['@babel/plugin-proposal-class-properties'],
   },
   usePostCSS: {
     browsers: ['Chrome >= 40'],
@@ -108,6 +110,7 @@ await minifyAll('./src/', {
     extensions: ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],
   },
   useJsMap: true,
+  useCssMap: true
 });
 ```
 
@@ -233,19 +236,19 @@ await minifyAll('./src/', {
 
 ### Source Maps
 
-Generate source maps for JavaScript files to aid in debugging minified code:
+Generate source maps for both JavaScript and CSS files to aid in debugging minified code:
 
 - Maps compressed code back to original source code
-- Automatically creates `.map` files alongside minified JavaScript
+- Automatically creates `.map` files alongside minified files
 - Seamless integration with browser developer tools
-- Works with or without Babel transformation
+- Works with or without Babel/PostCSS transformation
 - Helps maintain debuggability in production environments
 
 ```js
 await minifyAll('./src/', {
   useJsMap: true,
+  useCssMap: true
 });
-```
 
 ## API Reference
 
@@ -264,6 +267,7 @@ Main function to process files.
   - `useVersioning` (object): Image versioning configuration
     - `extensions` (string[]): List of image extensions to version
   - `useJsMap` (boolean): Enable source map generation for JavaScript files
+  - `useCssMap` (boolean): Enable source map generation for CSS files
 
 ### Babel Options
 
@@ -281,7 +285,9 @@ The `useBabel` object supports all @babel/preset-env options:
   forceAllTransforms: boolean,
   configPath: string,
   ignoreBrowserslistConfig: boolean,
-  shippedProposals: boolean
+  shippedProposals: boolean,
+  useAppendTransform: boolean,
+  plugins: Array<string|Array|Function>
 }
 ```
 

package/demo.js

@@ -16,9 +16,12 @@ minifyAll('./test/', {
   },
   useBabel: {
     targets: 'chrome 40',
+    useAppendTransform: false,
+    plugins: [],
   },
   useVersioning: {
     extensions: ['.png', '.jpg', '.webp', '.avif', '.svg'],
   },
   useJsMap: true,
+  useCssMap: true,
 });

package/dist/module.js

@@ -149,6 +149,9 @@ async function updateImageReferences(filePath, versioningOptions, logger, hashMa
 
 /**
  * Resolves Babel options based on the provided configuration.
+ * Supports custom plugins through the useBabel.plugins option.
+ *
+ * @async
  * @param {boolean|BabelOptions} useBabel - The Babel options object or boolean.
  * @returns {Promise<BabelOptions|null>} - A promise that resolves to the Babel options or null if disabled.
  */
@@ -159,11 +162,34 @@ async function resolveBabelOptions(useBabel) {
     const presetEnvUrl = resolveModulePath('@babel/preset-env');
     const presetEnv = await import(presetEnvUrl);
 
-    return {
-      presets: [[presetEnv.default, typeof useBabel === 'object' ? useBabel : {}]],
+    const options = typeof useBabel === 'object' ? useBabel : {};
+    const { useAppendTransform, plugins, ...presetOptions } = options;
+
+    const babelConfig = {
+      presets: [[presetEnv.default, presetOptions]],
+      plugins: [],
     };
+
+    // Handle custom plugins if provided
+    if (plugins && Array.isArray(plugins)) {
+      babelConfig.plugins.push(...plugins);
+    }
+
+    // Add appendTransform plugin if useAppendTransform option is enabled
+    if (useAppendTransform) {
+      try {
+        const appendTransformPluginModule = await import('./plugins/append-polyfill-plugin.js');
+        const appendTransformPlugin = appendTransformPluginModule.default;
+        babelConfig.plugins.push(appendTransformPlugin);
+      } catch (pluginError) {
+        console.error('Error loading append transform plugin:', pluginError);
+        console.error(pluginError.stack);
+      }
+    }
+
+    return babelConfig;
   } catch (error) {
-    console.error('Error loading @babel/preset-env:', error);
+    console.error('Error loading @babel/preset-env or plugins:', error);
     return null;
   }
 }
@@ -179,6 +205,7 @@ async function resolveBabelOptions(useBabel) {
  * @param {Object} [options.cssMinifyOptions] - CSS minification options.
  * @param {Object} [options.postcssOptions] - PostCSS processing options.
  * @param {boolean} [options.useJsMap] - JavaScript map file options.
+ * @param {boolean} [options.useCssMap] - Css map file options.
  * @returns {Promise<void>}
  */
 async function processFile(filePath, logger, options) {
@@ -233,16 +260,32 @@ async function processFile(filePath, logger, options) {
         await writeFile(filePath, result.code, logger);
       }
     } else if (fileExtension === '.css') {
-      // PostCSS 옵션 설정
       const postcssOptions = options.postcssOptions || null;
-
-      // CSS 처리 (PostCSS + CleanCSS)
-      const output = await minifyCSS(fileContent, options.cssMinifyOptions, postcssOptions, filePath);
+      const output = await minifyCSS(fileContent, options.cssMinifyOptions, postcssOptions, filePath, options.useCssMap);
 
       if (output.warnings.length > 0) {
         await logger?.warn('CSS minification warnings', { filePath, warnings: output.warnings });
       }
-      await writeFile(filePath, output.styles, logger);
+
+      if (options.useCssMap && output.sourceMap) {
+        const fileName = path.basename(filePath);
+        const mapFilePath = filePath.replace('.css', '.css.map');
+
+        // Add source map reference to the CSS file
+        const sourceMapComment = `\n/*# sourceMappingURL=${fileName}.map */`;
+        await writeFile(filePath, output.styles + sourceMapComment, logger);
+
+        // Write the source map file
+        try {
+          const sourceMap = JSON.stringify(output.sourceMap);
+          await writeFile(mapFilePath, sourceMap, logger);
+          await logger?.info('Generated CSS source map', { filePath: mapFilePath });
+        } catch (error) {
+          await logger?.error('Failed to write CSS source map', { filePath: mapFilePath, error: error.message });
+        }
+      } else {
+        await writeFile(filePath, output.styles, logger);
+      }
     } else {
       // `Unsupported file type, skipping: ${filePath}`;
       return;
@@ -266,6 +309,8 @@ async function processFile(filePath, logger, options) {
  * @property {string} [configPath] - Path to the configuration file.
  * @property {boolean} [ignoreBrowserslistConfig] - Ignores the browserslist configuration.
  * @property {boolean} [shippedProposals] - Enables support for shipped proposals.
+ * @property {boolean} [useAppendTransform] - Enables the append-to-appendChild transform plugin for compatibility with older browsers.
+ * @property {Array<string|Array|Function>} [plugins] - Additional Babel plugins to include in the transformation process.
  */
 
 /**
@@ -317,6 +362,7 @@ async function processFile(filePath, logger, options) {
  * @property {PostCSSOptions|boolean} [usePostCSS=false] - PostCSS configuration options.
  * @property {string[]|null} [useVersioning=null] - Options for file versioning.
  * @property {boolean} [useJsMap=false] - Whether to use JavaScript Map file.
+ * @property {boolean} [useCssMap=false] - Whether to use CSS Map file.
  */
 
 /**
@@ -337,6 +383,7 @@ export default async function minifyAll(contentPath, options = {}) {
     usePostCSS = false,
     useVersioning = null,
     useJsMap = false,
+    useCssMap = false,
   } = options;
 
   let logger = null;
@@ -351,6 +398,7 @@ export default async function minifyAll(contentPath, options = {}) {
       usePostCSS: !!usePostCSS,
       useVersioning: !!useVersioning,
       useJsMap,
+      useCssMap,
     });
   }
 
@@ -369,6 +417,7 @@ export default async function minifyAll(contentPath, options = {}) {
     cssMinifyOptions,
     postcssOptions: usePostCSS === true ? {} : usePostCSS,
     useJsMap,
+    useCssMap,
   };
 
   try {

package/dist/modules/minifier.js

@@ -43,15 +43,19 @@ export function minifyJS(content, options = {}) {
  * @param {Object} [options={}] - Clean-CSS options.
  * @param {Object} [postcssOptions=null] - PostCSS configuration options, if null PostCSS is skipped.
  * @param {string} [filePath=''] - Path to the file being processed.
- * @returns {Promise<{styles: string, warnings: string[]}>} Minified CSS and warnings.
+ * @param {boolean} [useCssMap=false] - Whether to generate and use a CSS source map file.
+ * @returns {Promise<{styles: string, warnings: string[], map: string}>} Minified CSS, warnings and source map.
  */
-export async function minifyCSS(content, options = {}, postcssOptions = null, filePath = '') {
+export async function minifyCSS(content, options = {}, postcssOptions = null, filePath = '', useCssMap = false) {
   const defaultOptions = {
     level: { 1: { all: false } },
+    sourceMap: !!useCssMap,
+    sourceMapInlineSources: !!useCssMap,
   };
 
   const mergedOptions = { ...defaultOptions, ...options };
   let processedCSS = content;
+  let previousSourceMap = null;
 
   // Check if PostCSS is available and enabled
   if (postCSSAvailable === null) {
@@ -64,6 +68,10 @@ export async function minifyCSS(content, options = {}, postcssOptions = null, fi
       const result = await processWithPostCSS(content, filePath, postcssOptions);
       processedCSS = result.css;
 
+      if (result.map) {
+        previousSourceMap = result.map.toString();
+      }
+
       // Handle warnings
       if (result.messages && result.messages.length > 0) {
         console.warn(`PostCSS warnings for ${filePath}:`, result.messages.map((msg) => msg.text).join('\n'));
@@ -76,6 +84,6 @@ export async function minifyCSS(content, options = {}, postcssOptions = null, fi
 
   // Use CleanCSS for final minification
   return new Promise((resolve) => {
-    new CleanCSS(mergedOptions).minify(processedCSS, (error, output) => resolve(output));
+    new CleanCSS(mergedOptions).minify(processedCSS, previousSourceMap, (error, output) => resolve(output));
   });
 }

package/dist/modules/postcssProcess.js

@@ -52,11 +52,13 @@ export async function processWithPostCSS(content, filePath = '', options = {}) {
     const result = await postcss(plugins).process(content, {
       from: filePath || undefined,
       to: filePath || undefined,
+      map: { inline: true },
     });
 
     return {
       css: result.css,
       messages: result.messages,
+      map: result.map,
     };
   } catch (error) {
     console.error('Error processing CSS with PostCSS:', error);

package/dist/plugins/append-polyfill-plugin.js

@@ -0,0 +1,67 @@
+/**
+ * Babel plugin to transform Element.append() calls to be compatible with older browsers.
+ * This plugin converts:
+ * - element.append("text") to element.appendChild(document.createTextNode("text"))
+ * - element.append(node) to element.appendChild(node)
+ * - element.append(node1, "text", node2) to a sequence of appendChild calls
+ *
+ * @param {Object} param0 - Babel plugin parameters
+ * @param {Object} param0.types - Babel types utility
+ * @returns {Object} Babel plugin object
+ */
+export default function ({ types: t }) {
+  return {
+    name: 'append-polyfill-transform',
+    visitor: {
+      CallExpression(path) {
+        const callee = path.get('callee');
+
+        // Check for element.append(...) call pattern
+        if (!callee.isMemberExpression()) return;
+        if (!callee.get('property').isIdentifier({ name: 'append' })) return;
+
+        const args = path.node.arguments;
+        const objectNode = callee.get('object').node;
+
+        // Skip if no arguments
+        if (args.length === 0) return;
+
+        // Handle single argument case
+        if (args.length === 1) {
+          const arg = args[0];
+
+          // String literal case: element.append("text")
+          if (t.isStringLiteral(arg)) {
+            path.replaceWith(
+              t.callExpression(t.memberExpression(t.cloneNode(objectNode), t.identifier('appendChild')), [
+                t.callExpression(t.memberExpression(t.identifier('document'), t.identifier('createTextNode')), [arg]),
+              ]),
+            );
+          } else {
+            // Node case: element.append(node)
+            callee.get('property').replaceWith(t.identifier('appendChild'));
+          }
+          return;
+        }
+
+        // Handle multiple arguments: element.append(node1, "text", node2)
+        const statements = args.map((arg) => {
+          // String literal case
+          if (t.isStringLiteral(arg)) {
+            return t.callExpression(t.memberExpression(t.cloneNode(objectNode), t.identifier('appendChild')), [
+              t.callExpression(t.memberExpression(t.identifier('document'), t.identifier('createTextNode')), [arg]),
+            ]);
+          } else {
+            // Node case
+            return t.callExpression(t.memberExpression(t.cloneNode(objectNode), t.identifier('appendChild')), [arg]);
+          }
+        });
+
+        if (statements.length > 0) {
+          // Combine multiple statements into a sequence expression
+          path.replaceWith(t.sequenceExpression(statements));
+        }
+      },
+    },
+  };
+}

package/minify.d.ts

@@ -56,6 +56,17 @@ declare module 'uglify-js-minify-css-allfiles' {
      * Toggles enabling support for builtin/feature proposals that have shipped in browsers.
      */
     shippedProposals?: boolean;
+
+    /**
+     * Enables the append-to-appendChild transform plugin.
+     * When true, Element.append() calls are transformed to Element.appendChild() calls for compatibility with older browsers like Chrome 35.
+     */
+    useAppendTransform?: boolean;
+
+    /**
+     * Additional Babel plugins to include in the transformation process.
+     */
+    plugins?: Array<string | Array | Function>;
   }
 
   /**
@@ -187,6 +198,13 @@ declare module 'uglify-js-minify-css-allfiles' {
      * @default false
      */
     useJsMap?: boolean;
+
+    /**
+     * Enables source map generation for CSS files during minification.
+     * Source maps help with debugging by mapping minified CSS back to original source code.
+     * @default false
+     */
+    useCssMap?: boolean;
   }
 
   /**
@@ -215,6 +233,7 @@ declare module 'uglify-js-minify-css-allfiles' {
    *     retentionDays: 7
    *   },
    *   useJsMap: true // Enable source map generation
+   *   useCssMap: true // Enable source map generation
    * });
    * ```
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uglify-js-minify-css-allfiles",
-  "version": "2.5.1",
+  "version": "2.7.0",
   "description": "you will be able to minify all files as same file names which is js or css",
   "main": "minify.js",
   "type": "module",