uglify-js-minify-css-allfiles 2.4.0 → 2.5.0

package/README.md

@@ -17,8 +17,10 @@ You can easily minify all files in a specific folder, with the option to exclude
 - [Options](#options)
 - [Advanced Features](#advanced-features)
   - [Babel Integration](#babel-integration)
+  - [PostCSS Processing](#postcss-processing)
   - [Image Versioning](#image-versioning)
   - [Logging System](#logging-system)
+  - [Source Maps](#source-maps)
 - [API Reference](#api-reference)
 - [Minification Options](#minification-options)
 - [Contributing](#contributing)
@@ -28,11 +30,13 @@ You can easily minify all files in a specific folder, with the option to exclude
 
 - 🚀 JavaScript and CSS minification with advanced options
 - 📦 Babel transformation support for modern JavaScript
+- 🎨 PostCSS processing for modern CSS features
 - 🖼️ Automatic image versioning and cache busting
 - 📝 Comprehensive logging system
 - 🛡️ Configurable file exclusion
 - 🔄 ES module support
 - 📊 Processing statistics and summaries
+- 🔍 Source map generation for easier debugging
 
 ## Installation
 
@@ -65,6 +69,18 @@ await minifyAll('./src/', {
     useBuiltIns: 'usage',
     corejs: 3,
   },
+  usePostCSS: {
+    browsers: ['Chrome >= 40'],
+    stage: 2,
+    features: {
+      'nesting-rules': true,
+      'custom-properties': true,
+      'color-functional-notation': true,
+    },
+    autoprefixer: {
+      grid: true,
+    },
+  },
   useLog: {
     logDir: 'logs',
     retentionDays: 30,
@@ -117,6 +133,61 @@ await minifyAll('./src/', {
 });
 ```
 
+### PostCSS Processing
+
+Process modern CSS features with PostCSS integration:
+
+- Process CSS with modern features like nesting rules, custom properties, and color functions
+- Automatically transpile modern CSS to be compatible with older browsers
+- Support for customizable browser targets
+- Integrated with the CSS minification pipeline
+
+```js
+await minifyAll('./src/', {
+  usePostCSS: {
+    browsers: ['Chrome >= 40'],
+    stage: 2,
+    features: {
+      'nesting-rules': true, // Enable CSS nesting
+      'custom-properties': true, // Enable CSS variables
+      'color-functional-notation': true, // Enable modern color syntax
+    },
+    autoprefixer: {
+      grid: true, // Enable grid features with autoprefixer
+    },
+  },
+});
+```
+
+### CSS Example with PostCSS Features
+
+```css
+/* CSS Variables */
+:root {
+  --primary-color: #3f51b5;
+  --secondary-color: #f50057;
+}
+
+/* Nesting Rules */
+.card {
+  background-color: white;
+
+  & .card-header {
+    color: var(--primary-color);
+
+    &:hover {
+      color: var(--secondary-color);
+    }
+  }
+}
+
+/* Modern Color Syntax */
+.color-examples {
+  color: rgb(0 0 0 / 0.8); /* Modern RGB syntax with alpha */
+  border-color: color-mix(in srgb, var(--primary-color) 70%, black 30%);
+}
+```
+
 ### Image Versioning
 
 Automatic versioning for image references in JS and CSS files:
@@ -160,6 +231,22 @@ await minifyAll('./src/', {
 });
 ```
 
+### Source Maps
+
+Generate source maps for JavaScript files to aid in debugging minified code:
+
+- Maps compressed code back to original source code
+- Automatically creates `.map` files alongside minified JavaScript
+- Seamless integration with browser developer tools
+- Works with or without Babel transformation
+- Helps maintain debuggability in production environments
+
+```js
+await minifyAll('./src/', {
+  useJsMap: true,
+});
+```
+
 ## API Reference
 
 ### minifyAll(contentPath, options)
@@ -170,11 +257,13 @@ Main function to process files.
 - `options` (object): Configuration options
   - `excludeFolder` (string): Directory to exclude
   - `useBabel` (boolean|object): Babel configuration
+  - `usePostCSS` (boolean|object): PostCSS configuration
   - `useLog` (boolean|object): Logging configuration
   - `jsMinifyOptions` (object): JavaScript minification options
   - `cssMinifyOptions` (object): CSS minification options
   - `useVersioning` (object): Image versioning configuration
     - `extensions` (string[]): List of image extensions to version
+  - `useJsMap` (boolean): Enable source map generation for JavaScript files
 
 ### Babel Options
 
@@ -196,6 +285,28 @@ The `useBabel` object supports all @babel/preset-env options:
 }
 ```
 
+### PostCSS Options
+
+The `usePostCSS` object supports the following options:
+
+```js
+{
+  browsers: string[] | Object,  // Browser targets
+  stage: 0 | 1 | 2 | 3 | 4 | 5,  // CSS feature stage level
+  features: {
+    'nesting-rules': boolean,  // CSS nesting rules
+    'custom-properties': boolean,  // CSS variables
+    'color-functional-notation': boolean,  // Modern color syntax
+    // Other CSS features...
+  },
+  autoprefixer: {
+    grid: boolean | 'autoplace' | 'no-autoplace'
+    // Other autoprefixer options...
+  },
+  plugins: Array  // Additional PostCSS plugins
+}
+```
+
 ### JavaScript Minification Options
 
 Supports all UglifyJS options:

package/demo.js

@@ -2,6 +2,18 @@ import minifyAll from './dist/module.js';
 
 minifyAll('./test/', {
   excludeFolder: 'lib',
+  usePostCSS: {
+    browsers: ['Chrome >= 40'],
+    stage: 2,
+    features: {
+      'nesting-rules': true,
+      'custom-properties': true,
+      'color-functional-notation': true,
+    },
+    autoprefixer: {
+      grid: true,
+    },
+  },
   useBabel: {
     targets: 'chrome 40',
   },

package/dist/module.js

@@ -177,6 +177,7 @@ async function resolveBabelOptions(useBabel) {
  * @param {BabelOptions} [options.babelOptions] - Babel transformation options.
  * @param {Object} [options.jsMinifyOptions] - JavaScript minification options.
  * @param {Object} [options.cssMinifyOptions] - CSS minification options.
+ * @param {Object} [options.postcssOptions] - PostCSS processing options.
  * @param {boolean} [options.useJsMap] - JavaScript map file options.
  * @returns {Promise<void>}
  */
@@ -232,7 +233,12 @@ async function processFile(filePath, logger, options) {
         await writeFile(filePath, result.code, logger);
       }
     } else if (fileExtension === '.css') {
-      const output = await minifyCSS(fileContent, options.cssMinifyOptions);
+      // PostCSS 옵션 설정
+      const postcssOptions = options.postcssOptions || null;
+
+      // CSS 처리 (PostCSS + CleanCSS)
+      const output = await minifyCSS(fileContent, options.cssMinifyOptions, postcssOptions, filePath);
+
       if (output.warnings.length > 0) {
         await logger?.warn('CSS minification warnings', { filePath, warnings: output.warnings });
       }
@@ -290,6 +296,16 @@ async function processFile(filePath, logger, options) {
  * @property {string|Object} [format] - Output formatting options.
  */
 
+/**
+ * Options for PostCSS configuration.
+ * @typedef {Object} PostCSSOptions
+ * @property {string[]|Object} [browsers] - Target browsers for the CSS compatibility.
+ * @property {0|1|2|3|4|5} [stage=2] - CSS features stage level.
+ * @property {Object} [features] - Specific CSS features to enable/disable.
+ * @property {Object} [autoprefixer] - Autoprefixer options.
+ * @property {Array} [plugins] - Additional PostCSS plugins to use.
+ */
+
 /**
  * Options for minification configuration.
  * @typedef {Object} MinifyOptions
@@ -298,6 +314,7 @@ async function processFile(filePath, logger, options) {
  * @property {boolean|LogOptions} [useLog=true] - Whether to use logging.
  * @property {JSMinifyOptions} [jsMinifyOptions={}] - Options for JavaScript minification.
  * @property {CSSMinifyOptions} [cssMinifyOptions={}] - Options for CSS minification.
+ * @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.
  */
@@ -317,6 +334,7 @@ export default async function minifyAll(contentPath, options = {}) {
     useLog = true,
     jsMinifyOptions = {},
     cssMinifyOptions = {},
+    usePostCSS = false,
     useVersioning = null,
     useJsMap = false,
   } = options;
@@ -329,7 +347,8 @@ export default async function minifyAll(contentPath, options = {}) {
     await logger.info('Starting minification process', {
       contentPath,
       excludeFolder,
-      useBabel,
+      useBabel: !!useBabel,
+      usePostCSS: !!usePostCSS,
       useVersioning: !!useVersioning,
       useJsMap,
     });
@@ -348,6 +367,7 @@ export default async function minifyAll(contentPath, options = {}) {
     babelOptions,
     jsMinifyOptions,
     cssMinifyOptions,
+    postcssOptions: usePostCSS === true ? {} : usePostCSS,
     useJsMap,
   };
 

package/dist/modules/minifier.js

@@ -5,6 +5,10 @@
 
 import { minify as uglifyJS } from 'uglify-js';
 import CleanCSS from 'clean-css';
+import { processWithPostCSS, checkPostCSSAvailability } from './postcssProcess.js';
+
+// Track PostCSS availability
+let postCSSAvailable = null;
 
 /**
  * Minifies JavaScript content.
@@ -37,16 +41,41 @@ export function minifyJS(content, options = {}) {
  * @async
  * @param {string} content - CSS content to minify.
  * @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.
  */
-export function minifyCSS(content, options = {}) {
+export async function minifyCSS(content, options = {}, postcssOptions = null, filePath = '') {
   const defaultOptions = {
     level: { 1: { all: false } },
   };
 
   const mergedOptions = { ...defaultOptions, ...options };
+  let processedCSS = content;
+
+  // Check if PostCSS is available and enabled
+  if (postCSSAvailable === null) {
+    postCSSAvailable = await checkPostCSSAvailability();
+  }
+
+  // Process with PostCSS if available and enabled
+  if (postCSSAvailable && postcssOptions !== null) {
+    try {
+      const result = await processWithPostCSS(content, filePath, postcssOptions);
+      processedCSS = result.css;
+
+      // Handle warnings
+      if (result.messages && result.messages.length > 0) {
+        console.warn(`PostCSS warnings for ${filePath}:`, result.messages.map((msg) => msg.text).join('\n'));
+      }
+    } catch (error) {
+      console.error(`PostCSS processing failed for ${filePath}:`, error);
+      // Continue with original content if PostCSS fails
+    }
+  }
 
+  // Use CleanCSS for final minification
   return new Promise((resolve) => {
-    new CleanCSS(mergedOptions).minify(content, (error, output) => resolve(output));
+    new CleanCSS(mergedOptions).minify(processedCSS, (error, output) => resolve(output));
   });
 }

package/dist/modules/postcssProcess.js

@@ -0,0 +1,81 @@
+/**
+ * PostCSS processor module for advanced CSS transformations
+ * @module postcssProcessor
+ */
+
+import postcss from 'postcss';
+import postcssPresetEnv from 'postcss-preset-env';
+import { resolveModulePath } from './pathResolver.js';
+
+/**
+ * Default PostCSS options
+ * @type {Object}
+ */
+const DEFAULT_OPTIONS = {
+  browsers: ['Chrome >= 40'],
+  stage: 2,
+  features: {
+    'nesting-rules': true,
+    'custom-properties': true,
+    'color-functional-notation': true,
+  },
+  autoprefixer: {
+    grid: true,
+  },
+};
+
+/**
+ * Processes CSS content using PostCSS
+ * @async
+ * @param {string} content - CSS content to process
+ * @param {string} [filePath=''] - Source file path
+ * @param {Object} [options={}] - PostCSS and preset-env options
+ * @returns {Promise<{css: string, messages: Array}>} Processed CSS content
+ */
+export async function processWithPostCSS(content, filePath = '', options = {}) {
+  try {
+    // Merge options with defaults
+    const presetEnvOptions = {
+      ...DEFAULT_OPTIONS,
+      ...options,
+    };
+
+    // Configure plugins
+    const plugins = [postcssPresetEnv(presetEnvOptions)];
+
+    // Add any custom plugins from options
+    if (options.plugins && Array.isArray(options.plugins)) {
+      plugins.push(...options.plugins);
+    }
+
+    // Process the CSS
+    const result = await postcss(plugins).process(content, {
+      from: filePath || undefined,
+      to: filePath || undefined,
+    });
+
+    return {
+      css: result.css,
+      messages: result.messages,
+    };
+  } catch (error) {
+    console.error('Error processing CSS with PostCSS:', error);
+    throw error;
+  }
+}
+
+/**
+ * Resolves PostCSS related module paths
+ * @async
+ * @returns {Promise<boolean>} Whether all modules are available
+ */
+export async function checkPostCSSAvailability() {
+  try {
+    await import(resolveModulePath('postcss'));
+    await import(resolveModulePath('postcss-preset-env'));
+    return true;
+  } catch (error) {
+    console.warn('PostCSS modules not available:', error.message);
+    return false;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "uglify-js-minify-css-allfiles",
-    "version": "2.4.0",
+    "version": "2.5.0",
     "description": "you will be able to minify all files as same file names which is js or css",
     "main": "minify.js",
     "type": "module",
@@ -44,11 +44,13 @@
         "email": "copstyle86@gmail.com"
     },
     "homepage": "https://github.com/oinochoe/uglify-js-minify-css-allfiles#readme",
-    "dependencies": {
+    "devDependencies": {
+        "@babel/core": "^7.25.2",
+        "@babel/preset-env": "^7.25.3",
         "clean-css": "^4.2.4",
+        "postcss": "^8.5.3",
+        "postcss-preset-env": "^10.1.5",
         "uglify-js": "^3.19.2",
-        "uglify-js-es6": "^2.8.9",
-        "@babel/core": "^7.25.2",
-        "@babel/preset-env": "^7.25.3"
+        "uglify-js-es6": "^2.8.9"
     }
 }