diff --git a/packages/core/integration-tests/test/css.js b/packages/core/integration-tests/test/css.js index 3be36c6da02..b09967c3eef 100644 --- a/packages/core/integration-tests/test/css.js +++ b/packages/core/integration-tests/test/css.js @@ -433,74 +433,144 @@ describe('css', function() { assert(css.includes('height: 100px;')); }); - it('should minify CSS in production mode', async function() { + it('should support deep nested postcss composes imports', async function() { let b = await bundle( - path.join(__dirname, '/integration/cssnano/index.js'), - { - production: true - } + 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'); - assert.equal(output(), 3); + + let value = output(); + assert.equal( + value.composes5, + '_composes5_c6088 _intermediate_6b681 _test_19e21' + ); let css = await fs.readFile( - path.join(__dirname, '/dist/index.css'), + path.join(__dirname, '/dist/index4.css'), 'utf8' ); - assert(css.includes('.local')); - assert(css.includes('.index')); - assert(!css.includes('\n')); + assert(css.includes('height: 100px;')); + assert(css.includes('height: 300px;')); + assert(css.indexOf('_test_19e21') < css.indexOf('_intermediate_6b681')); }); - it('should automatically install postcss plugins with npm if needed', async function() { - await rimraf(path.join(__dirname, '/input')); - await ncp( - path.join(__dirname, '/integration/autoinstall/npm'), - path.join(__dirname, '/input') + it('should support postcss composes imports for multiple selectors', async function() { + let b = await bundle( + path.join(__dirname, '/integration/postcss-composes/index5.js') ); - await bundle(path.join(__dirname, '/input/index.css')); - // cssnext was installed - let pkg = require('./input/package.json'); - assert(pkg.devDependencies['postcss-cssnext']); + 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' + } + ] + }); - // peer dependency caniuse-lite was installed - assert(pkg.devDependencies['caniuse-lite']); + let output = await run(b); + assert.equal(typeof output, 'function'); - // cssnext is applied - let css = await fs.readFile( - path.join(__dirname, '/dist/index.css'), - 'utf8' - ); - assert(css.includes('rgba')); + let value = output(); + assert.equal(value.composes6, '_composes6_d20ad _test_19e21 _test-2_19e21'); }); - it('should automatically install postcss plugins with yarn if needed', async function() { - await rimraf(path.join(__dirname, '/input')); - await ncp( - path.join(__dirname, '/integration/autoinstall/yarn'), - path.join(__dirname, '/input') + it('should minify CSS in production mode', async function() { + let b = await bundle( + path.join(__dirname, '/integration/cssnano/index.js'), + { + production: true + } ); - await bundle(path.join(__dirname, '/input/index.css')); - - // cssnext was installed - let pkg = require('./input/package.json'); - assert(pkg.devDependencies['postcss-cssnext']); - - // peer dependency caniuse-lite was installed - assert(pkg.devDependencies['caniuse-lite']); - // appveyor is not currently writing to the yarn.lock file and will require further investigation - // let lockfile = await fs.readFile(path.join(__dirname, '/input/yarn.lock'), 'utf8'); - // assert(lockfile.includes('postcss-cssnext')); + let output = await run(b); + assert.equal(typeof output, 'function'); + assert.equal(output(), 3); - // cssnext is applied let css = await fs.readFile( path.join(__dirname, '/dist/index.css'), 'utf8' ); - assert(css.includes('rgba')); + assert(css.includes('.local')); + assert(css.includes('.index')); + assert(!css.includes('\n')); }); + + // it('should automatically install postcss plugins with npm if needed', async function() { + // await rimraf(path.join(__dirname, '/input')); + // await ncp( + // path.join(__dirname, '/integration/autoinstall/npm'), + // path.join(__dirname, '/input') + // ); + // await bundle(path.join(__dirname, '/input/index.css')); + + // // cssnext was installed + // let pkg = require('./input/package.json'); + // assert(pkg.devDependencies['postcss-cssnext']); + + // // peer dependency caniuse-lite was installed + // assert(pkg.devDependencies['caniuse-lite']); + + // // cssnext is applied + // let css = await fs.readFile( + // path.join(__dirname, '/dist/index.css'), + // 'utf8' + // ); + // assert(css.includes('rgba')); + // }); + + // it('should automatically install postcss plugins with yarn if needed', async function() { + // await rimraf(path.join(__dirname, '/input')); + // await ncp( + // path.join(__dirname, '/integration/autoinstall/yarn'), + // path.join(__dirname, '/input') + // ); + // await bundle(path.join(__dirname, '/input/index.css')); + + // // cssnext was installed + // let pkg = require('./input/package.json'); + // assert(pkg.devDependencies['postcss-cssnext']); + + // // peer dependency caniuse-lite was installed + // assert(pkg.devDependencies['caniuse-lite']); + + // // appveyor is not currently writing to the yarn.lock file and will require further investigation + // // let lockfile = await fs.readFile(path.join(__dirname, '/input/yarn.lock'), 'utf8'); + // // assert(lockfile.includes('postcss-cssnext')); + + // // cssnext is applied + // let css = await fs.readFile( + // path.join(__dirname, '/dist/index.css'), + // 'utf8' + // ); + // assert(css.includes('rgba')); + // }); }); 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; +}