From c58c196adb897eb3ab6064cf2a421b18ad5c3378 Mon Sep 17 00:00:00 2001
From: Jannick Garthen <jannick.garthen@gmail.com>
Date: Sun, 17 Feb 2019 17:27:11 +0100
Subject: [PATCH] Add postcss composes tests for edge cases

---
 packages/core/integration-tests/test/css.js   | 70 +++++++++++++++++++
 .../postcss-composes/composes-5.css           |  4 ++
 .../postcss-composes/composes-6.css           |  4 ++
 .../integration/postcss-composes/index4.js    |  5 ++
 .../integration/postcss-composes/index5.js    |  5 ++
 .../postcss-composes/mixins-intermediate.css  |  4 ++
 .../integration/postcss-composes/mixins.css   |  4 ++
 7 files changed, 96 insertions(+)
 create mode 100644 packages/core/integration-tests/test/integration/postcss-composes/composes-5.css
 create mode 100644 packages/core/integration-tests/test/integration/postcss-composes/composes-6.css
 create mode 100644 packages/core/integration-tests/test/integration/postcss-composes/index4.js
 create mode 100644 packages/core/integration-tests/test/integration/postcss-composes/index5.js
 create mode 100644 packages/core/integration-tests/test/integration/postcss-composes/mixins-intermediate.css

diff --git a/packages/core/integration-tests/test/css.js b/packages/core/integration-tests/test/css.js
index 3be36c6da02..c5c554f4c24 100644
--- a/packages/core/integration-tests/test/css.js
+++ b/packages/core/integration-tests/test/css.js
@@ -433,6 +433,76 @@ describe('css', function() {
     assert(css.includes('height: 100px;'));
   });
 
+  it('should support deep nested postcss composes imports', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/postcss-composes/index4.js')
+    );
+
+    await assertBundleTree(b, {
+      name: 'index4.js',
+      assets: [
+        'index4.js',
+        'composes-5.css',
+        'mixins-intermediate.css',
+        'mixins.css'
+      ],
+      childBundles: [
+        {
+          name: 'index4.css',
+          assets: ['composes-5.css', 'mixins-intermediate.css', 'mixins.css'],
+          childBundles: []
+        },
+        {
+          type: 'map'
+        }
+      ]
+    });
+
+    let output = await run(b);
+    assert.equal(typeof output, 'function');
+
+    let value = output();
+    assert.equal(
+      value.composes5,
+      '_composes5_c6088 _intermediate_6b681 _test_19e21'
+    );
+
+    let css = await fs.readFile(
+      path.join(__dirname, '/dist/index4.css'),
+      'utf8'
+    );
+    assert(css.includes('height: 100px;'));
+    assert(css.includes('height: 300px;'));
+    assert(css.indexOf('_test_19e21') < css.indexOf('_intermediate_6b681'));
+  });
+
+  it('should support postcss composes imports for multiple selectors', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/postcss-composes/index5.js')
+    );
+
+    await assertBundleTree(b, {
+      name: 'index5.js',
+      assets: ['index5.js', 'composes-6.css', 'mixins.css'],
+      childBundles: [
+        {
+          name: 'index5.css',
+          assets: ['composes-6.css', 'mixins.css'],
+          childBundles: []
+        },
+        {
+          type: 'map'
+        }
+      ]
+    });
+
+    let output = await run(b);
+    assert.equal(typeof output, 'function');
+
+    let value = output();
+    assert.equal(value.composes6, '_composes6_d20ad _test_19e21 _test-2_19e21');
+  });
+
   it('should minify CSS in production mode', async function() {
     let b = await bundle(
       path.join(__dirname, '/integration/cssnano/index.js'),
diff --git a/packages/core/integration-tests/test/integration/postcss-composes/composes-5.css b/packages/core/integration-tests/test/integration/postcss-composes/composes-5.css
new file mode 100644
index 00000000000..4522e2bfdff
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/postcss-composes/composes-5.css
@@ -0,0 +1,4 @@
+.composes5 {
+  composes: intermediate from './mixins-intermediate.css';
+  border: 3px solid yellow;
+}
diff --git a/packages/core/integration-tests/test/integration/postcss-composes/composes-6.css b/packages/core/integration-tests/test/integration/postcss-composes/composes-6.css
new file mode 100644
index 00000000000..780d4fe80b0
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/postcss-composes/composes-6.css
@@ -0,0 +1,4 @@
+.composes6 {
+  composes: test test-2 from './mixins.css';
+  border: 3px solid orangered;
+}
diff --git a/packages/core/integration-tests/test/integration/postcss-composes/index4.js b/packages/core/integration-tests/test/integration/postcss-composes/index4.js
new file mode 100644
index 00000000000..315561cbd3b
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/postcss-composes/index4.js
@@ -0,0 +1,5 @@
+var map5 = require('./composes-5.css');
+
+module.exports = function () {
+  return map5;
+};
diff --git a/packages/core/integration-tests/test/integration/postcss-composes/index5.js b/packages/core/integration-tests/test/integration/postcss-composes/index5.js
new file mode 100644
index 00000000000..31932b14b88
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/postcss-composes/index5.js
@@ -0,0 +1,5 @@
+var map6 = require('./composes-6.css');
+
+module.exports = function () {
+  return map6;
+};
diff --git a/packages/core/integration-tests/test/integration/postcss-composes/mixins-intermediate.css b/packages/core/integration-tests/test/integration/postcss-composes/mixins-intermediate.css
new file mode 100644
index 00000000000..ebbbcafc863
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/postcss-composes/mixins-intermediate.css
@@ -0,0 +1,4 @@
+.intermediate {
+  composes: test from './mixins.css';
+  height: 300px;
+}
diff --git a/packages/core/integration-tests/test/integration/postcss-composes/mixins.css b/packages/core/integration-tests/test/integration/postcss-composes/mixins.css
index afca30d06b0..2de4a887869 100644
--- a/packages/core/integration-tests/test/integration/postcss-composes/mixins.css
+++ b/packages/core/integration-tests/test/integration/postcss-composes/mixins.css
@@ -2,3 +2,7 @@
   height: 100px;
   width: 100px;
 }
+
+.test-2 {
+  background: red;
+}