Skip to content
Permalink
Browse files

feat: svelte processor arg & improved test coverage (#558)

  • Loading branch information...
tivac committed Jan 29, 2019
1 parent 059fd7a commit 7655d7250aa2afd887cf91102ac1b9dcb111847c
@@ -17,7 +17,8 @@ module.exports = (config = false) => {
// Defined here to avoid .lastIndex bugs since /g is set
const linkRegex = /<link\b[^<>]*?\bhref=\s*(?:"([^"]+)"|'([^']+)'|([^>\s]+))[^>]*>/gim;

const processor = new Processor(config);
// Use a passed processor, or set up our own if necessary
const { processor = new Processor(config) } = config;

// eslint-disable-next-line no-console, no-empty-function
const log = config.verbose ? console.log.bind(console, "[svelte]") : () => {};
@@ -398,40 +398,60 @@ exports[`/svelte.js should ignore files without <style> blocks 1`] = `

exports[`/svelte.js should ignore files without <style> blocks 2`] = `""`;

exports[`/svelte.js should no-op if all <link>s reference a URL 1`] = `
"<link rel=\\"stylesheet\\" href=\\"http://example.com/styles.css\\" />
<link rel=\\"stylesheet\\" href=\\"http://example.com/styles2.css\\" />

<div class=\\"fooga\\">fooga</div>
"
`;

exports[`/svelte.js should remove files before reprocessing when config.clean is set 1`] = `
exports[`/svelte.js should invalidate files before reprocessing (<link>) 1`] = `
"<div class=\\"source\\">Source</div><script>
import css from \\"./source.css\\";
</script>"
`;

exports[`/svelte.js should remove files before reprocessing when config.clean is set 2`] = `
exports[`/svelte.js should invalidate files before reprocessing (<link>) 2`] = `
"/* packages/svelte/test/output/source.css */
.source {
color: red;
}"
`;

exports[`/svelte.js should remove files before reprocessing when config.clean is set 3`] = `
exports[`/svelte.js should invalidate files before reprocessing (<link>) 3`] = `
"<div class=\\"source\\">Source</div><script>
import css from \\"./source.css\\";
</script>"
`;

exports[`/svelte.js should remove files before reprocessing when config.clean is set 4`] = `
exports[`/svelte.js should invalidate files before reprocessing (<link>) 4`] = `
"/* packages/svelte/test/output/source.css */
.source {
color: blue;
}"
`;

exports[`/svelte.js should invalidate files before reprocessing (<style>) 1`] = `
"<style>/* replaced by modular-css */</style>
<div class=\\"source\\">Source</div>"
`;

exports[`/svelte.js should invalidate files before reprocessing (<style>) 2`] = `
"/* packages/svelte/test/output/source.html */
.source { color: red; }"
`;

exports[`/svelte.js should invalidate files before reprocessing (<style>) 3`] = `
"<style>/* replaced by modular-css */</style>
<div class=\\"source\\">Source</div>"
`;

exports[`/svelte.js should invalidate files before reprocessing (<style>) 4`] = `
"/* packages/svelte/test/output/source.html */
.source { color: blue; }"
`;

exports[`/svelte.js should no-op if all <link>s reference a URL 1`] = `
"<link rel=\\"stylesheet\\" href=\\"http://example.com/styles.css\\" />
<link rel=\\"stylesheet\\" href=\\"http://example.com/styles2.css\\" />

<div class=\\"fooga\\">fooga</div>
"
`;

exports[`/svelte.js should support verbose output: "<link>" 1`] = `
Array [
Array [
@@ -631,6 +651,24 @@ Array [

exports[`/svelte.js should throw on both <style> and <link> in one file 1`] = `"@modular-css/svelte: use <style> OR <link>, but not both"`;

exports[`/svelte.js should use an already-created processor 1`] = `
"<link rel=\\"stylesheet\\" href=\\"http://example.com/styles.css\\" />

<div class=\\"fooga\\">fooga</div>
<script>
import css from \\"./simple.css\\";
</script>"
`;

exports[`/svelte.js should use an already-created processor 2`] = `
"/* fake.css */
.fake { color: #F00; }
/* packages/svelte/test/specimens/simple.css */
.fooga {
color: red;
}"
`;

exports[`/svelte.js should warn when multiple <link> elements are in the html 1`] = `
"<link rel=\\"stylesheet\\" href=\\"./simple2.css\\" />

@@ -6,6 +6,7 @@ const path = require("path");
const svelte = require("svelte");
const dedent = require("dedent");

const Processor = require("@modular-css/processor");
const namer = require("@modular-css/test-utils/namer.js");
const logs = require("@modular-css/test-utils/logs.js");

@@ -50,6 +51,31 @@ describe("/svelte.js", () => {
expect(output.css).toMatchSnapshot();
});

it("should use an already-created processor", async () => {
const processor = new Processor({ namer });

await processor.string(
"./fake.css",
".fake { color: #F00; }"
);

const filename = require.resolve("./specimens/url.html");
const { preprocess } = plugin({
processor,
});

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

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

const output = await processor.output();

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

it.each`
specimen | title
${"external.html"} | ${"no script"}
@@ -218,7 +244,8 @@ describe("/svelte.js", () => {
expect(processed.toString()).toMatchSnapshot();
});

it("should remove files before reprocessing when config.clean is set", async () => {

it("should invalidate files before reprocessing (<link>)", async () => {
// V1 of files
fs.writeFileSync(path.resolve(__dirname, "./output/source.html"), dedent(`
<link rel="stylesheet" href="./source.css" />
@@ -234,8 +261,6 @@ describe("/svelte.js", () => {
const filename = require.resolve(`./output/source.html`);
const { processor, preprocess } = plugin({
namer,

clean : true,
});

let processed = await svelte.preprocess(
@@ -267,4 +292,45 @@ describe("/svelte.js", () => {

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

it("should invalidate files before reprocessing (<style>)", async () => {
// V1 of files
fs.writeFileSync(path.resolve(__dirname, "./output/source.html"), dedent(`
<style>.source { color: red; }</style>
<div class="{css.source}">Source</div>
`));

const filename = require.resolve(`./output/source.html`);
const { processor, preprocess } = plugin({
namer,
});

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

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

let output = await processor.output();

expect(output.css).toMatchSnapshot();

// V2 of CSS
fs.writeFileSync(path.resolve(__dirname, "./output/source.html"), dedent(`
<style>.source { color: blue; }</style>
<div class="{css.source}">Source</div>
`));

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

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

output = await processor.output();

expect(output.css).toMatchSnapshot();
});
});
@@ -128,9 +128,9 @@ module.exports = {

If `true` whenever a missing replacement is found like `{css.doesnotexist}` an error will be thrown aborting the file processing. Defaults to `false`.

##### `clean`
##### `procesor`

If `true` will re-process any previously handled files (and remove any files that dependended on them). Might be useful, but currently also dangerous (see [#522](https://github.com/tivac/modular-css/issues/522)). Defaults to `false`.
Pass a previously-created `@modular-css/processor` instance into the preprocessor. Will **not** pass through any other options to the processor if this is set, but `strict` will still be honored by the preprocessor.

##### Shared Options

0 comments on commit 7655d72

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