fix: remove tilde character from import statements

This handles Webpack's convention of using a ~ character to indicate
modules in node_modules folder. PostCss handles node_modules without
such a character and in fact breaks if such a character is present.

Author: digitalsadhu

lib/util.js

@@ -8,6 +8,19 @@ 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'
+                );
+            });
+        }
+);
+
 module.exports.identifyCssModule = async function identifyCssModule(filePath) {
     const { pkg: { name, version }, path: packagePath } = await readPkgUp({
         normalize: false,
@@ -21,6 +34,7 @@ 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())
         .process(fileContents, { from: filePath });
     return css;

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

@@ -1,4 +1,7 @@
 /* my-module-3/main.css */
 
-@import url('./dep.css');
-@import url('dep/main.css');
+@import url("./dep.css");
+@import url("dep/main.css");
+@import url("~@dep/main.css");
+@import "dep/secondary.css";
+@import "~dep/secondary.css";