Skip to content

Commit

Permalink
CSS/SASS/LESS sourcemaps (#2489)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mischnic @wbinnssmith
mischnic authored and wbinnssmith committed Apr 11, 2019
1 parent e478286 commit 592630d
Show file tree
Hide file tree
Showing 40 changed files with 1,382 additions and 163 deletions.
270 changes: 260 additions & 10 deletions packages/core/integration-tests/test/css.js
View file
Expand Up @@ -17,7 +17,11 @@ describe.skip('css', function() {
{
name: 'index.css',
assets: ['index.css', 'local.css'],
childBundles: []
childBundles: [
{
type: 'map'
}
]
}
]
});
Expand All @@ -44,21 +48,30 @@ describe.skip('css', function() {
],
childBundles: [
{
type: 'css',
name: 'index.css',
assets: ['index.css'],
childBundles: []
childBundles: [
{
type: 'map'
}
]
},
{
type: 'map'
name: 'index.js.map'
},
{
type: 'js',
assets: ['local.js', 'local.css'],
assets: ['local.css', 'local.js'],
childBundles: [
{
type: 'css',
assets: ['local.css'],
childBundles: []
childBundles: [
{
type: 'map'
}
]
},
{
type: 'map'
Expand All @@ -85,7 +98,11 @@ describe.skip('css', function() {
{
name: 'index.css',
assets: ['index.css', 'other.css', 'local.css'],
childBundles: []
childBundles: [
{
type: 'map'
}
]
},
{
name: 'index.map',
Expand Down Expand Up @@ -118,7 +135,11 @@ describe.skip('css', function() {
{
name: 'index.css',
assets: ['index.css'],
childBundles: []
childBundles: [
{
type: 'map'
}
]
},
{
type: 'map'
Expand Down Expand Up @@ -173,7 +194,11 @@ describe.skip('css', function() {
{
name: 'index.css',
assets: ['index.css'],
childBundles: []
childBundles: [
{
type: 'map'
}
]
},
{
type: 'map'
Expand Down Expand Up @@ -223,7 +248,11 @@ describe.skip('css', function() {
{
name: 'index.css',
assets: ['index.css'],
childBundles: []
childBundles: [
{
type: 'map'
}
]
},
{
type: 'map'
Expand Down Expand Up @@ -259,6 +288,227 @@ describe.skip('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'
}
]
},
{
type: 'map'
}
]
});

let output = await run(b);
assert.equal(typeof output, 'function');

let value = output();
const composes1Classes = value.composes1.split(' ');
const composes2Classes = value.composes2.split(' ');
assert(composes1Classes[0].startsWith('_composes1_'));
assert(composes1Classes[1].startsWith('_test_'));
assert(composes2Classes[0].startsWith('_composes2_'));
assert(composes2Classes[1].startsWith('_test_'));

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'
}
]
},
{
type: 'map'
}
]
});

let output = await run(b);
assert.equal(typeof output, 'function');

let value = output();
const composes3Classes = value.composes3.split(' ');
assert(composes3Classes[0].startsWith('_composes3_'));
assert(composes3Classes[1].startsWith('_test_'));

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'
}
]
},
{
type: 'map'
}
]
});

let output = await run(b);
assert.equal(typeof output, 'function');

let value = output();
const composes4Classes = value.composes4.split(' ');
assert(composes4Classes[0].startsWith('_composes4_'));
assert(composes4Classes[1].startsWith('_test_'));

let css = await fs.readFile(
path.join(__dirname, '/dist/index3.css'),
'utf8'
);
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'
}
]
},
{
type: 'map'
}
]
});

let output = await run(b);
assert.equal(typeof output, 'function');

let value = output();
const composes5Classes = value.composes5.split(' ');
assert(composes5Classes[0].startsWith('_composes5_'));
assert(composes5Classes[1].startsWith('_intermediate_'));
assert(composes5Classes[2].startsWith('_test_'));

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_') < css.indexOf('._intermediate_'));
});

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'
}
]
},
{
type: 'map'
}
]
});

let output = await run(b);
assert.equal(typeof output, 'function');

let value = output();
const composes6Classes = value.composes6.split(' ');
assert(composes6Classes[0].startsWith('_composes6_'));
assert(composes6Classes[1].startsWith('_test_'));
assert(composes6Classes[2].startsWith('_test-2_'));
});

it('should minify CSS in production mode', async function() {
let b = await bundle(
path.join(__dirname, '/integration/cssnano/index.js'),
Expand All @@ -277,7 +527,7 @@ describe.skip('css', function() {
);
assert(css.includes('.local'));
assert(css.includes('.index'));
assert(!css.includes('\n'));
assert.equal(css.split('\n').length, 2); // sourceMappingURL
});

it('should automatically install postcss plugins with npm if needed', async function() {
Expand Down
6 changes: 5 additions & 1 deletion packages/core/integration-tests/test/glob.js
View file
Expand Up @@ -54,7 +54,11 @@ describe.skip('glob', function() {
{
name: 'index.css',
assets: ['index.css', 'other.css', 'local.css'],
childBundles: []
childBundles: [
{
type: 'map'
}
]
},
{
type: 'map'
Expand Down

0 comments on commit 592630d

Please sign in to comment.