Fix #698 - safe cssnano transforms by default (#707)

Author: olizilla

src/transforms/postcss.js

@@ -51,7 +51,15 @@ async function getConfig(asset) {
 
   if (asset.options.minify) {
     config.plugins.push(
-      cssnano((await asset.getConfig(['cssnano.config.js'])) || {})
+      cssnano(
+        (await asset.getConfig(['cssnano.config.js'])) || {
+          // Only enable safe css transforms by default.
+          // See: https://github.com/parcel-bundler/parcel/issues/698
+          // Note: Remove when upgrading cssnano to v4
+          // See: https://github.com/ben-eb/cssnano/releases/tag/v4.0.0-rc.0
+          safe: true
+        }
+      )
     );
   }
 

test/css.js

@@ -146,6 +146,48 @@ describe('css', function() {
     );
   });
 
+  it('should support linking to assets with url() from CSS in production', async function() {
+    let b = await bundle(__dirname + '/integration/css-url/index.js', {
+      production: true
+    });
+
+    assertBundleTree(b, {
+      name: 'index.js',
+      assets: ['index.js', 'index.css'],
+      childBundles: [
+        {
+          name: 'index.css',
+          assets: ['index.css'],
+          childBundles: []
+        },
+        {
+          type: 'woff2',
+          assets: ['test.woff2'],
+          childBundles: []
+        }
+      ]
+    });
+
+    let output = run(b);
+    assert.equal(typeof output, 'function');
+    assert.equal(output(), 2);
+
+    let css = fs.readFileSync(__dirname + '/dist/index.css', 'utf8');
+    assert(/url\([0-9a-f]+\.woff2\)/.test(css), 'woff ext found in css');
+    assert(css.includes('url(http://google.com)'), 'url() found');
+    assert(css.includes('.index'), '.index found');
+    assert(css.includes('url("data:image/gif;base64,quotes")'));
+    assert(css.includes('.quotes'));
+    assert(css.includes('url(data:image/gif;base64,no-quote)'));
+    assert(css.includes('.no-quote'));
+
+    assert(
+      fs.existsSync(
+        __dirname + '/dist/' + css.match(/url\(([0-9a-f]+\.woff2)\)/)[1]
+      )
+    );
+  });
+
   it('should support transforming with postcss', async function() {
     let b = await bundle(__dirname + '/integration/postcss/index.js');