mirror of https://github.com/sveltejs/svelte
Co-authored-by: Milan Hauth <milahu@gmail.com>pull/5584/head
halfnelson
5 years ago
parent
a2bef2f7b9
commit
f0b9a29206
@ -0,0 +1,41 @@
|
||||
import MagicString from 'magic-string';
|
||||
|
||||
// TODO move util fns to test index.js
|
||||
|
||||
function result(filename, src) {
|
||||
return {
|
||||
code: src.toString(),
|
||||
map: src.generateMap({
|
||||
source: filename,
|
||||
hires: true,
|
||||
includeContent: false
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
function replace_all(src, search, replace) {
|
||||
let idx = src.original.indexOf(search);
|
||||
if (idx == -1) throw new Error('search not found in src');
|
||||
do {
|
||||
src.overwrite(idx, idx + search.length, replace);
|
||||
} while ((idx = src.original.indexOf(search, idx + 1)) != -1);
|
||||
}
|
||||
|
||||
export default {
|
||||
compile_options: {
|
||||
dev: true
|
||||
},
|
||||
preprocess: [
|
||||
{ style: ({ content, filename }) => {
|
||||
const src = new MagicString(content);
|
||||
replace_all(src, '--replace-me-once', '\n --done-replace-once');
|
||||
replace_all(src, '--replace-me-twice', '\n--almost-done-replace-twice');
|
||||
return result(filename, src);
|
||||
} },
|
||||
{ style: ({ content, filename }) => {
|
||||
const src = new MagicString(content);
|
||||
replace_all(src, '--almost-done-replace-twice', '\n --done-replace-twice');
|
||||
return result(filename, src);
|
||||
} }
|
||||
]
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
<h1>Testing Styles</h1>
|
||||
<h2>Testing Styles 2</h2>
|
||||
<div>Testing Styles 3</div>
|
||||
<script>export const b = 2;</script>
|
||||
<style>
|
||||
h1 {
|
||||
--replace-me-once: red;
|
||||
}
|
||||
h2 {
|
||||
--replace-me-twice: green;
|
||||
}
|
||||
div {
|
||||
--keep-me: blue;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
import { SourceMapConsumer } from 'source-map';
|
||||
|
||||
const b64dec = s => Buffer.from(s, 'base64').toString();
|
||||
|
||||
export async function test({ assert, css, js }) {
|
||||
|
||||
//We check that the css source map embedded in the js is accurate
|
||||
const match = js.code.match(/\tstyle\.textContent = "(.*?)(?:\\n\/\*# sourceMappingURL=data:(.*?);charset=(.*?);base64,(.*?) \*\/)?";\n/);
|
||||
assert.notEqual(match, null);
|
||||
|
||||
const [mimeType, encoding, cssMapBase64] = match.slice(2);
|
||||
assert.equal(mimeType, 'application/json');
|
||||
assert.equal(encoding, 'utf-8');
|
||||
|
||||
const cssMapJson = b64dec(cssMapBase64);
|
||||
css.mapConsumer = await new SourceMapConsumer(cssMapJson);
|
||||
|
||||
// TODO make util fn + move to test index.js
|
||||
const sourcefile = 'input.svelte';
|
||||
[
|
||||
// TODO how to get line + column numbers?
|
||||
[css, '--keep-me', 13, 2],
|
||||
[css, '--done-replace-once', 6, 5],
|
||||
[css, '--done-replace-twice', 9, 5]
|
||||
]
|
||||
.forEach(([where, content, line, column]) => {
|
||||
assert.deepEqual(
|
||||
where.mapConsumer.originalPositionFor(
|
||||
where.locate_1(content)
|
||||
),
|
||||
{
|
||||
source: sourcefile,
|
||||
name: null,
|
||||
line,
|
||||
column
|
||||
},
|
||||
`failed to locate "${content}" from "${sourcefile}"`
|
||||
);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in new issue