Fix path resolution in Vite

.eslintrc.json

@@ -1,8 +1,10 @@
-
 {
-  "max-len": 0,
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 6
+  },
   "rules": {
-    "indent": ["error", 2, { "VariableDeclarator": 1 }],
+    "indent": [ "error", 2, { "VariableDeclarator": 1 } ],
     "global-require": 0,
     "func-names": 0,
     "prefer-rest-params": 1,

gulpfile.mjs

@@ -0,0 +1,15 @@
+import gulp from 'gulp';
+import mocha from 'gulp-mocha';
+
+var files = ['index.js', 'test/*.js', 'gulpfile.js'];
+
+gulp.task('test', async function () {
+    return gulp.src('test/*.js', { read: false })
+        .pipe(mocha());
+});
+
+gulp.task('default', gulp.series('test'));
+
+gulp.task('watch', gulp.series('test'), function () {
+    gulp.watch(files, ['test']);
+});

index.js

@@ -1,14 +1,11 @@
-var url = require('url');
-var fs = require('fs');
-var crypto = require('crypto');
-var chalk = require('chalk');
-
-var postcss = require('postcss');
-var path = require('canonical-path');
+const url = require('url');
+const fs = require('fs');
+const crypto = require('crypto');
+const path = require('canonical-path');
 
 var checksums = {};
 
-module.exports = postcss.plugin('postcss-cachebuster', function (opts) {
+module.exports = (opts = {}) => {
   var pattern = /url\(('|")?([^'"\)]+)('|")?\)/g;
   var supportedProps = [
     'background',
@@ -19,8 +16,8 @@ module.exports = postcss.plugin('postcss-cachebuster', function (opts) {
   ];
 
   opts = opts || {};
-  opts.imagesPath = opts.imagesPath ? process.cwd() + opts.imagesPath : process.cwd();
-  opts.cssPath = opts.cssPath ? process.cwd()+opts.cssPath : false;
+  opts.imagesPathResolved = opts.imagesPath ? process.cwd() + opts.imagesPath : process.cwd();
+  opts.cssPathResolved = opts.cssPath ? process.cwd() + opts.cssPath : false;
   opts.type = opts.type || 'mtime';
   opts.paramName = opts.paramName || 'v';
   opts.hashAlgorithm = opts.hashAlgorithm || 'md5';
@@ -33,12 +30,12 @@ module.exports = postcss.plugin('postcss-cachebuster', function (opts) {
     if (typeof type === 'function') {
       cachebuster = type(assetPath, origPath);
     } else if (!fs.existsSync(assetPath)) {
-      console.log('Cachebuster:', chalk.yellow('file unreachable or not exists', assetPath));
+      console.log('Cachebuster:', '\u001b[33mfile unreachable or not exists ' + assetPath + '\u001b[39m');
     } else if (type === 'checksum') {
       // Used to distinguish between different hash algorithms among the
       // remembered checksum values in the `checksums` array.
       var checksumKey = [assetPath, opts.hashAlgorithm].join('|');
-      
+
       if (checksums[checksumKey]) {
         cachebuster = checksums[checksumKey];
       } else {
@@ -63,65 +60,77 @@ module.exports = postcss.plugin('postcss-cachebuster', function (opts) {
     if (/^\//.test(assetUrl.pathname)) {
       assetPath = path.join(imagesPath, assetPath);
     } else {
-      assetPath = path.join(opts.cssPath || path.dirname(file), assetPath);
+      assetPath = path.join(opts.cssPathResolved || path.dirname(file), assetPath);
     }
     return assetPath;
   }
 
-  return function (css) {
-    var inputFile = opts.cssPath || css.source.input.file || '';
-
-    function updateAssetUrl(assetUrl) {
-      var assetPath = resolveUrl(assetUrl, inputFile, opts.imagesPath);
-
-      // complete url with cachebuster
-      var cachebuster = createCachebuster(assetPath, assetUrl.pathname, opts.type);
-      if (!cachebuster) {
-        return;
-      } else if (typeof opts.type === 'function') {
-        assetUrl.pathname = cachebuster;
-      } else if (assetUrl.search && assetUrl.search.length > 1) {
-        assetUrl.search = assetUrl.search + '&' + opts.paramName + cachebuster;
-      } else {
-        assetUrl.search = '?' + opts.paramName + cachebuster;
+  return {
+    postcssPlugin: 'postcss-cachebuster',
+    Once(css, { result }) {
+      var inputFile = opts.cssPathResolved || css.source.input.file || '';
+
+      function updateAssetUrl(assetUrl) {
+        var assetPath = resolveUrl(assetUrl, inputFile, opts.imagesPathResolved);
+
+        // complete url with cachebuster
+        var cachebuster = createCachebuster(assetPath, assetUrl.pathname, opts.type);
+        if (!cachebuster) {
+          return;
+        } else if (typeof opts.type === 'function') {
+          assetUrl.pathname = cachebuster;
+        } else if (assetUrl.search && assetUrl.search.length > 1) {
+          assetUrl.search = assetUrl.search + '&' + opts.paramName + cachebuster;
+        } else {
+          assetUrl.search = '?' + opts.paramName + cachebuster;
+        }
       }
-    }
 
-    css.walkAtRules('import', function walkThroughtImports(atrule) {
-      pattern.lastIndex = 0;
-      var results = pattern.exec(atrule.params);
-      var quote = results[1] || '"';
-      var originalUrl = results[2];
+      css.walkAtRules('import', function walkThroughtImports(atrule) {
+        pattern.lastIndex = 0;
+        var results = pattern.exec(atrule.params);
+        var quote = results[1] || '"';
+        var originalUrl = results[2];
+
+        var assetUrl = url.parse(originalUrl);
 
-      var assetUrl = url.parse(originalUrl);
+        // only locals
+        if (assetUrl.host ||
+          assetUrl.pathname.indexOf('//') === 0 ||
+          assetUrl.pathname.indexOf(';base64') !== -1) {
+          return;
+        }
 
-      updateAssetUrl(assetUrl);
+        updateAssetUrl(assetUrl);
 
-      atrule.params = 'url(' + quote + url.format(assetUrl) + quote + ')';
-    });
+        atrule.params = 'url(' + quote + url.format(assetUrl) + quote + ')';
+      });
 
-    css.walkDecls(function walkThroughtDeclarations(declaration){
-      // only image and font related declarations
-      if (supportedProps.indexOf(declaration.prop)=== -1) {
-        return;
-      }
+      css.walkDecls(function walkThroughtDeclarations(declaration) {
+        // only image and font related declarations
+        if (supportedProps.indexOf(declaration.prop) === -1) {
+          return;
+        }
 
-      declaration.value = declaration.value.replace(pattern, function (match, quote, originalUrl) {
-        quote = quote || '"';
+        declaration.value = declaration.value.replace(pattern, function (match, quote, originalUrl) {
+          quote = quote || '"';
 
-        var assetUrl = url.parse(originalUrl);
+          var assetUrl = url.parse(originalUrl);
 
-        // only locals
-        if (assetUrl.host ||
+          // only locals
+          if (assetUrl.host ||
             assetUrl.pathname.indexOf('//') === 0 ||
             assetUrl.pathname.indexOf(';base64') !== -1) {
-          return match;
-        }
+            return match;
+          }
 
-        updateAssetUrl(assetUrl);
+          updateAssetUrl(assetUrl);
 
-        return 'url(' + quote + url.format(assetUrl) + quote + ')';
+          return 'url(' + quote + url.format(assetUrl) + quote + ')';
+        });
       });
-    });
-  };
-});
+    }
+  }
+};
+
+module.exports.postcss = true;