Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: svelte processor arg & improved test coverage #558

Merged
merged 3 commits into from
Jan 29, 2019
Merged

feat: svelte processor arg & improved test coverage #558

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8d77673
feat: svelte takes an existing processor
tivac Jan 29, 2019
c35c86e
test: improve svelte coverage
tivac Jan 29, 2019
9ae5067
docs: new svelte arg
tivac Jan 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/svelte/svelte.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]") : () => {};
Expand Down
62 changes: 50 additions & 12 deletions packages/svelte/test/__snapshots__/svelte.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 [
Expand Down Expand Up @@ -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\\" />

Expand Down
72 changes: 69 additions & 3 deletions packages/svelte/test/svelte.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");

Expand Down Expand Up @@ -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"}
Expand Down Expand Up @@ -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" />
Expand All @@ -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(
Expand Down Expand Up @@ -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();
});
});
4 changes: 2 additions & 2 deletions packages/www/src/guide/usage-svelte.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down