fix: nested dep references with tilde characters

Author: digitalsadhu

lib/util.js

@@ -7,19 +7,7 @@ const readFile = promisify(fs.readFile);
 const readPkgUp = require('read-pkg-up');
 const postcss = require('postcss');
 const atImport = require('postcss-import');
-
-const removeTilde = postcss.plugin(
-    'postcss-import-remove-tilde',
-    () =>
-        function(css) {
-            css.walkAtRules('import', rule => {
-                rule.params = rule.params.replace(
-                    /((?:url\s*\(\s*)?['"])~/,
-                    '$1'
-                );
-            });
-        }
-);
+const resolve = require('postcss-import/lib/resolve-id');
 
 module.exports.identifyCssModule = async function identifyCssModule(filePath) {
     const { pkg: { name, version }, path: packagePath } = await readPkgUp({
@@ -34,8 +22,14 @@ module.exports.identifyCssModule = async function identifyCssModule(filePath) {
 module.exports.bundleCssModule = async function bundleCssModule(filePath) {
     const fileContents = await readFile(filePath, 'utf8');
     const { css } = await postcss()
-        .use(removeTilde())
-        .use(atImport())
+        .use(
+            atImport({
+                resolve(id, basedir, options) {
+                    id = id.replace(/^~/, '');
+                    return resolve(id, basedir, options);
+                },
+            })
+        )
         .process(fileContents, { from: filePath });
     return css;
 };

test/test-assets/my-module-3/css/main.css

@@ -2,6 +2,7 @@
 
 @import url("./dep.css");
 @import url("dep/main.css");
-@import url("~@dep/main.css");
+@import url("~@dep/module/main.css");
 @import "dep/secondary.css";
 @import "~dep/secondary.css";
+@import "~@dep/module/main.css";