Skip to content
Permalink
Browse files

fix: tweak value support in svelte preprocessor

  • Loading branch information...
tivac committed Nov 8, 2018
1 parent 18c42b6 commit 7cc0f22d06cc50db0ad9386735978bb9683ee8cd

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -107,16 +107,24 @@ module.exports = (config = false) => {

source = source
// Replace {css.<key>} values
// And also ${css.<key>} template string values first
// Note extra exclusion to avoid accidentally matching ${css.<key>}
.replace(
new RegExp(`\\$?{css\\.(${selectors})}`, "gm"),
(match, key) => (Array.isArray(exported[key]) ? exported[key].join(" ") : exported[key])
new RegExp(`([^$]){css\\.(${selectors})}`, "gm"),
(match, prefix, key) => {
const replacement = Array.isArray(exported[key]) ? exported[key].join(" ") : exported[key];

return `${prefix}${replacement}`;
}
)

// Then any remaining bare css.<key> values
// Then any remaining css.<key> values
.replace(
new RegExp(`(\\b)css\\.(${selectors})(\\b)`, "gm"),
(match, prefix, key, suffix) => (Array.isArray(exported[key]) ? `${prefix}"${exported[key].join(" ")}"${suffix}` : exported[key])
(match, prefix, key, suffix) => {
const replacement = Array.isArray(exported[key]) ? exported[key].join(" ") : exported[key];

return `${prefix}"${replacement}"${suffix}`;
}
);
}

@@ -165,6 +165,53 @@ exports[`/svelte.js should extract CSS from a <link> tag ("unquoted") 2`] = `
"
`;

exports[`/svelte.js should extract CSS from a <link> tag ("values") 1`] = `
"

<div
data-simple=\\"color: #BEEFED\\"
data-expression=\\"{\\"color: \\" + \\"#BEEFED\\"}\\"
data-template=\\"{\`color: \${\\"#BEEFED\\"}\`}\\"
>
</div>

<script>
import css from \\"./external.css\\";


export default {
data : () => ({
template : \`color: \${\\"#BEEFED\\"}\`,
expression : \\"color: \\" + \\"#BEEFED\\",
})
};
</script>
"
`;

exports[`/svelte.js should extract CSS from a <link> tag ("values") 2`] = `
"/* packages/svelte/test/specimens/simple.css */
.fooga {
color: red;
}
/* packages/svelte/test/specimens/dependencies.css */
.wooga {

background: blue;
}
/* packages/svelte/test/specimens/external.css */
.flex {
display: flex;
}
.text {
color: #000;
}
.active {
color: #F00;
}
"
`;

exports[`/svelte.js should extract CSS from a <style> tag 1`] = `
"<div class=\\"flex wrapper\\">
<h1 class=\\"flex fooga hd\\">Head</h1>
@@ -370,35 +417,6 @@ exports[`/svelte.js should remove files before reprocessing when config.clean is
}"
`;

exports[`/svelte.js should support exported values used standalone in components 1`] = `
"

<div {style}>
Standalone value in the style tag
</div>

<div style=\`color: #BEEFED\`>
Style supplied as a template string from css
</div>

<div style=\\"color: #BEEFED\\">
Style supplied as a svelte-template string from css
</div>


<script>
import css from \\"./external-with-values.css\\";


export default {
computed : {
style : () => \`color: #BEEFED\`
}
};
</script>
"
`;

exports[`/svelte.js should support verbose output: "<link>" 1`] = `
Array [
Array [
@@ -463,7 +481,7 @@ Array [
],
Array [
"[svelte]",
"[\\"flex\\",\\"wrapper\\",\\"hd\\",\\"bd\\",\\"text\\",\\"active\\"]",
"[\\"color\\",\\"flex\\",\\"wrapper\\",\\"hd\\",\\"bd\\",\\"text\\",\\"active\\"]",
],
]
`;
@@ -0,0 +1,17 @@
<link rel="stylesheet" href="./external.css">

<div
data-simple="color: {css.color}"
data-expression="{"color: " + css.color}"
data-template="{`color: ${css.color}`}"
>
</div>

<script>
export default {
data : () => ({
template : `color: ${css.color}`,
expression : "color: " + css.color,
})
};
</script>

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
@@ -1,3 +1,5 @@
@value color: #BEEFED;

.flex {
display: flex;
}
@@ -38,6 +38,7 @@ describe("/svelte.js", () => {
${"external-script.html"} | ${"existing script"}
${"external-single.html"} | ${"single quotes"}
${"external-unquoted.html"} | ${"unquoted"}
${"external-values.html"} | ${"values"}
`("should extract CSS from a <link> tag ($title)", async ({ specimen }) => {
const filename = require.resolve(`./specimens/${specimen}`);
const { processor, preprocess } = plugin({
@@ -207,19 +208,4 @@ describe("/svelte.js", () => {

expect(output.css).toMatchSnapshot();
});

it("should support exported values used standalone in components", async () => {
const filename = require.resolve(`./specimens/external-with-values.html`);

const { preprocess } = plugin({
namer,
});

const processed = await svelte.preprocess(
fs.readFileSync(filename, "utf8"),
Object.assign({}, preprocess, { filename })
);

expect(processed.toString()).toMatchSnapshot();
});
});

0 comments on commit 7cc0f22

Please sign in to comment.
You can’t perform that action at this time.