Add postcss composes tests

packages/core/integration-tests/test/css.js

@@ -313,6 +313,126 @@ describe('css', function() {
     assert.equal(run1(), run2());
   });
 
+  it('should support postcss composes imports', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/postcss-composes/index.js')
+    );
+
+    await assertBundleTree(b, {
+      name: 'index.js',
+      assets: ['index.js', 'composes-1.css', 'composes-2.css', 'mixins.css'],
+      childBundles: [
+        {
+          name: 'index.css',
+          assets: ['composes-1.css', 'composes-2.css', 'mixins.css'],
+          childBundles: []
+        },
+        {
+          type: 'map'
+        }
+      ]
+    });
+
+    let output = await run(b);
+    assert.equal(typeof output, 'function');
+
+    let value = output();
+    assert.equal(value.composes1, '_composes1_29315 _test_19e21');
+    assert.equal(value.composes2, '_composes2_b5878 _test_19e21');
+
+    let css = await fs.readFile(
+      path.join(__dirname, '/dist/index.css'),
+      'utf8'
+    );
+    let cssClass1 = value.composes1.match(/(_composes1_[0-9a-z]+)/)[1];
+    assert(css.includes(`.${cssClass1}`));
+    let cssClass2 = value.composes2.match(/(_composes2_[0-9a-z]+)/)[1];
+    assert(css.includes(`.${cssClass2}`));
+  });
+
+  it('should not include css twice for postcss composes imports', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/postcss-composes/index.js')
+    );
+
+    await run(b);
+
+    let css = await fs.readFile(
+      path.join(__dirname, '/dist/index.css'),
+      'utf8'
+    );
+    assert.equal(
+      css.indexOf('height: 100px;'),
+      css.lastIndexOf('height: 100px;')
+    );
+  });
+
+  it('should support postcss composes imports for sass', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/postcss-composes/index2.js')
+    );
+
+    await assertBundleTree(b, {
+      name: 'index2.js',
+      assets: ['index2.js', 'composes-3.css', 'mixins.scss'],
+      childBundles: [
+        {
+          name: 'index2.css',
+          assets: ['composes-3.css', 'mixins.scss'],
+          childBundles: []
+        },
+        {
+          type: 'map'
+        }
+      ]
+    });
+
+    let output = await run(b);
+    assert.equal(typeof output, 'function');
+
+    let value = output();
+    assert.equal(value.composes3, '_composes3_6834d _test_c0a12');
+
+    let css = await fs.readFile(
+      path.join(__dirname, '/dist/index2.css'),
+      'utf8'
+    );
+    assert(css.includes('height: 200px;'));
+  });
+
+  it('should support postcss composes imports with custom path names', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/postcss-composes/index3.js')
+    );
+
+    await assertBundleTree(b, {
+      name: 'index3.js',
+      assets: ['index3.js', 'composes-4.css', 'mixins.css'],
+      childBundles: [
+        {
+          name: 'index3.css',
+          assets: ['composes-4.css', 'mixins.css'],
+          childBundles: []
+        },
+        {
+          type: 'map'
+        }
+      ]
+    });
+
+    let output = await run(b);
+    assert.equal(typeof output, 'function');
+
+    let value = output();
+    assert.equal(value.composes4, '_composes4_7038c _test_19e21');
+
+    let css = await fs.readFile(
+      path.join(__dirname, '/dist/index3.css'),
+      'utf8'
+    );
+    assert(css.includes('height: 100px;'));
+  });
+
   it('should minify CSS in production mode', async function() {
     let b = await bundle(
       path.join(__dirname, '/integration/cssnano/index.js'),

packages/core/integration-tests/test/integration/postcss-composes/.postcssrc

@@ -0,0 +1,3 @@
+{
+  "modules": true
+}

packages/core/integration-tests/test/integration/postcss-composes/composes-1.css

@@ -0,0 +1,4 @@
+.composes1 {
+  composes: test from './mixins.css';
+  border: 3px solid orange;
+}

packages/core/integration-tests/test/integration/postcss-composes/composes-2.css

@@ -0,0 +1,4 @@
+.composes2 {
+  composes: test from './mixins.css';
+  border: 3px solid red;
+}

packages/core/integration-tests/test/integration/postcss-composes/composes-3.css

@@ -0,0 +1,4 @@
+.composes3 {
+  composes: test from './mixins.scss';
+  border: 3px solid brown;
+}

packages/core/integration-tests/test/integration/postcss-composes/composes-4.css

@@ -0,0 +1,4 @@
+.composes4 {
+  composes: test from '~mixins.css';
+  border: 3px solid black;
+}

packages/core/integration-tests/test/integration/postcss-composes/index.js

@@ -0,0 +1,6 @@
+var map1 = require('./composes-1.css');
+var map2 = require('./composes-2.css');
+
+module.exports = function () {
+  return Object.assign({}, map1, map2);
+};

packages/core/integration-tests/test/integration/postcss-composes/index2.js

@@ -0,0 +1,5 @@
+var map3 = require('./composes-3.css');
+
+module.exports = function () {
+  return map3;
+};

packages/core/integration-tests/test/integration/postcss-composes/index3.js

@@ -0,0 +1,5 @@
+var map4 = require('./composes-4.css');
+
+module.exports = function () {
+  return map4;
+};

packages/core/integration-tests/test/integration/postcss-composes/mixins.css

@@ -0,0 +1,4 @@
+.test {
+  height: 100px;
+  width: 100px;
+}

packages/core/integration-tests/test/integration/postcss-composes/mixins.scss

@@ -0,0 +1,6 @@
+$test: 200px;
+
+.test {
+  height: $test;
+  width: $test;
+}