Skip to content
Permalink
Browse files

feat: rework svelte & rollup (#430)

BREAKING CHANGE:

- `modular-css-svelte` no longer has a custom rollup integration, use `modular-css-rollup` instead
- `modular-css-rollup` now supports a `common` option that will handle outputting any CSS that was removed from chunks due to treeshaking.
- `modular-css-rollup` accepts a new `processor` option that is expected to be a fully-configured & instantiated instance of `Processor` from `modular-css-core`.
  • Loading branch information...
tivac committed Jun 8, 2018
1 parent 6746694 commit c80dafe7625267d2e20f12313dabce2fcb01e817
Showing with 1,079 additions and 763 deletions.
  1. +6 −6 .eslintignore
  2. +23 −10 docs/svelte.md
  3. +2 −1 package.json
  4. +8 −8 packages/rollup/README.md
  5. +5 −0 packages/rollup/package-lock.json
  6. +2 −1 packages/rollup/package.json
  7. +44 −21 packages/rollup/rollup.js
  8. +67 −4 packages/rollup/test/__snapshots__/rollup.test.js.snap
  9. +183 −91 packages/rollup/test/rollup.test.js
  10. +5 −0 packages/rollup/test/specimens/dynamic-imports/a.css
  11. +3 −0 packages/rollup/test/specimens/dynamic-imports/a.js
  12. +3 −0 packages/rollup/test/specimens/dynamic-imports/b.css
  13. +7 −0 packages/rollup/test/specimens/dynamic-imports/b.js
  14. +5 −0 packages/rollup/test/specimens/dynamic-imports/c.css
  15. +5 −0 packages/rollup/test/specimens/dynamic-imports/c.js
  16. +3 −0 packages/rollup/test/specimens/dynamic-imports/d.css
  17. +6 −1 packages/rollup/test/specimens/manual-chunks/c.css
  18. +1 −0 packages/rollup/test/specimens/manual-chunks/d.css
  19. +4 −0 packages/rollup/test/specimens/relative-paths.css
  20. +3 −0 packages/rollup/test/specimens/relative-paths.js
  21. +24 −11 packages/svelte/README.md
  22. +301 −0 packages/svelte/package-lock.json
  23. +4 −1 packages/svelte/package.json
  24. +0 −48 packages/svelte/rollup.js
  25. +103 −0 packages/svelte/src/markup.js
  26. 0 packages/svelte/{ → src}/methods.js
  27. +5 −0 packages/svelte/src/style.js
  28. +5 −3 packages/svelte/svelte.js
  29. +0 −397 packages/svelte/test/__snapshots__/rollup.test.js.snap
  30. +151 −24 packages/svelte/test/__snapshots__/svelte.test.js.snap
  31. +0 −89 packages/svelte/test/rollup.test.js
  32. 0 packages/svelte/test/specimens/{svelte-both.html → both.html}
  33. +16 −0 packages/svelte/test/specimens/external-script.html
  34. +8 −0 packages/svelte/test/specimens/external-single.html
  35. +8 −0 packages/svelte/test/specimens/external-unquoted.html
  36. +3 −3 packages/svelte/test/specimens/{svelte-external.html → external.html}
  37. +9 −1 packages/svelte/test/specimens/{svelte.html → style.html}
  38. +38 −43 packages/svelte/test/svelte.test.js
  39. +19 −0 packages/test-utils/rollup-watching.js
@@ -1,9 +1,9 @@
coverage/
parsers/
node_modules/
specimens/
results/
gen/
dangerfile.js
gen/
dist/
gen/
node_modules/
parsers/
results/
specimens/
specimens/output/
@@ -14,7 +14,7 @@ All options are passed to the underlying `Processor` instance, see [Options](api
const filename = "./Component.html";
const { processor, preprocess } = require("modular-css-svelte")({
css : "./dist/bundle.css"
// Processor options
});
const processed = await svelte.preprocess(
@@ -27,24 +27,30 @@ const result = processor.output();
fs.writeFileSync("./dist/bundle.css", result.css);
```

### `rollup-plugin-svelte`
### `modular-css-rollup`

#### API

```js
const rollup = require("rollup").rollup;
const { preprocess, plugin } = require("modular-css-svelte/rollup")({
css : "./dist/bundle.css"
const { preprocess, processor } = require("modular-css-svelte")({
// Processor options
});
const bundle = await rollup({
input : "./Component.html",
plugins : [
require("rollup-plugin-svelte")({
preprocess
preprocess,
}),
require("modular-css-rollup)({
processor,
common : "common.css",
}),
plugin
]
});
@@ -58,21 +64,28 @@ bundle.write({
#### `rollup.config.js`
```js
const { preprocess, plugin } = require("modular-css-svelte/rollup")({
css : "./dist/bundle.css"
const { preprocess, processor } = require("modular-css-svelte")({
// Processor options
});
module.exports = {
input : "./Component.html",
output : {
format : "es",
file : "./dist/bundle.js"
},
plugins : [
require("rollup-plugin-svelte")({
preprocess
preprocess,
}),
require("modular-css-rollup)({
processor,
common : "common.css",
}),
plugin
]
};
```
@@ -50,7 +50,8 @@
"jest": {
"coveragePathIgnorePatterns": [
"node_modules",
"parsers"
"parsers",
"test-utils"
],
"watchPathIgnorePatterns": [
"test/output",
@@ -44,28 +44,28 @@ export default {

## Options

### `include`/`exclude`
### `common`

A minimatch pattern, or an array of minimatch patterns, relative to `process.cwd()`. `include` defaults to `**/*.css`.
File name to use in case there are any CSS dependencies that appear in multiple bundles.

### `css`
### `include`/`exclude`

Boolean to determine if CSS files should be output at the end of compilation. Defaults to `true`.
A minimatch pattern, or an array of minimatch patterns, relative to `process.cwd()`. `include` defaults to `**/*.css`.

### `json`

Boolean to determine if JSON files should be output at the end of compilation. Defaults to `false`.

### `namedExports`

By default this plugin will create both a default export and named `export`s for each class in a CSS file. You can disable this by setting `namedExports` to `false`.

### `map`

Boolean to determine if inline source maps should be included. Defaults to `true`.

To force the creation of external source maps set the value to `{ inline : false }`.

### `namedExports`

By default this plugin will create both a default export and named `export`s for each class in a CSS file. You can disable this by setting `namedExports` to `false`.

### Shared Options

All other options are passed to the underlying `Processor` instance, see [Options](https://github.com/tivac/modular-css/blob/master/docs/api.md#options).

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -21,6 +21,7 @@
"esutils": "^2.0.2",
"mkdirp": "^0.5.1",
"modular-css-core": "file:../core",
"rollup-pluginutils": "^2.0.1"
"rollup-pluginutils": "^2.0.1",
"slash": "^2.0.0"
}
}
@@ -4,6 +4,7 @@ const path = require("path");

const keyword = require("esutils").keyword;
const utils = require("rollup-pluginutils");
const slash = require("slash");

const Processor = require("modular-css-core");
const output = require("modular-css-core/lib/output.js");
@@ -14,8 +15,14 @@ const map = {
mappings : "",
};

function extensionless(file) {
return path.join(path.dirname(file), path.basename(file, path.extname(file)));
}

module.exports = function(opts) {
const options = Object.assign(Object.create(null), {
common : false,

json : false,
map : true,

@@ -26,17 +33,13 @@ module.exports = function(opts) {

const filter = utils.createFilter(options.include, options.exclude);

const processor = options.processor || new Processor(options);

let runs = 0;
let processor = new Processor(options);
let source;

return {
name : "modular-css",

options({ input }) {
source = input;
},

transform : function(code, id) {
let removed = [];

@@ -69,7 +72,7 @@ module.exports = function(opts) {
// Add dependencies
out = out.concat(
processor.dependencies(id).map((file) =>
`import "${file.replace(/\\/g, "/")}";`
`import "${slash(file)}";`
)
);

@@ -96,32 +99,52 @@ module.exports = function(opts) {
};
});
},

buildEnd() {
runs++;
},

generateBundle : async function(outputOptions, bundle) {
await Promise.all(
Object.keys(bundle).map(async (entry) => {
const base = path.basename(entry, path.extname(entry));
const files = Object.keys(bundle[entry].modules).filter(filter);
const bundles = [];
const common = processor.dependencies();

// No point continuing if nothing to output!
if(!files.length) {
return;
}
Object.keys(bundle).forEach((entry) => {
const files = Object.keys(bundle[entry].modules).filter(filter);

if(!files.length) {
return;
}

// remove the files being exported from the common bundle
files.forEach((file) =>
common.splice(common.indexOf(file), 1)
);

bundles.push({
entry,
files,
base : extensionless(entry),
});
});

// Common chunk only emitted if configured & if necessary
if(options.common && common.length) {
bundles.push({
entry : options.common,
base : extensionless(options.common),
files : common
});
}

await Promise.all(
bundles.map(async ({ base, files }) => {
// TODO: docs say that empty string arg to .emitAsset() shouldn't be required
// https://github.com/rollup/rollup/wiki/Plugins#plugin-context
const css = this.emitAsset(`${base}.css`, "");

const result = await processor.output({
from : source,
to : css,

// Only export for files within this bundle
files : Object.keys(bundle[entry].modules).filter(filter)
to : css,
files
});

this.setAssetSource(css, result.css);
@@ -1,5 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`/rollup.js code splitting should support dynamic imports 1`] = `
"/* packages/rollup/test/specimens/dynamic-imports/a.css */
.a {

color: aqua;
}
"
`;

exports[`/rollup.js code splitting should support dynamic imports 2`] = `
"/* packages/rollup/test/specimens/dynamic-imports/b.css */
.b {
color: blue;
}
"
`;

exports[`/rollup.js code splitting should support dynamic imports 3`] = `
"/* packages/rollup/test/specimens/dynamic-imports/c.css */
.c {

color: cyan;
}
"
`;

exports[`/rollup.js code splitting should support dynamic imports 4`] = `
"/* packages/rollup/test/specimens/dynamic-imports/d.css */
.d {
color: darkred;
}
"
`;

exports[`/rollup.js code splitting should support manual chunks 1`] = `
"/* packages/rollup/test/specimens/manual-chunks/a.css */
.a {
@@ -19,8 +53,12 @@ exports[`/rollup.js code splitting should support manual chunks 2`] = `
`;

exports[`/rollup.js code splitting should support manual chunks 3`] = `
"/* packages/rollup/test/specimens/manual-chunks/c.css */
.c { color: green; }
"/* packages/rollup/test/specimens/manual-chunks/d.css */
/* packages/rollup/test/specimens/manual-chunks/c.css */
.c {
color: green;
background: darkred;
}
"
`;

@@ -33,13 +71,29 @@ exports[`/rollup.js code splitting should support splitting up CSS files 1`] = `
`;

exports[`/rollup.js code splitting should support splitting up CSS files 2`] = `
"/* packages/rollup/test/specimens/named.css */
.a {
"/* packages/rollup/test/specimens/dependencies.css */
.wooga {

background: blue;
}
"
`;

exports[`/rollup.js should accept an existing processor instance 1`] = `
"/* packages/rollup/test/specimens/simple.css */
.fooga {
color: red;
}
"
`;

exports[`/rollup.js should accept an existing processor instance 2`] = `
"/* packages/rollup/test/specimens/fake.css */
.fake {
color: yellow;
}"
`;

exports[`/rollup.js should allow disabling of named exports 1`] = `
"var css = {
\\"str\\": \\"\\\\\\"string\\\\\\"\\",
@@ -57,6 +111,15 @@ console.log(fooga);
"
`;

exports[`/rollup.js should correctly pass to/from params for relative paths 1`] = `
"/* packages/rollup/test/specimens/relative-paths.css */
.wooga {
color: red;
background: url(\\"packages/rollup/test/specimens/folder/to.png\\");
}
"
`;

exports[`/rollup.js should generate CSS 1`] = `
"/* packages/rollup/test/specimens/simple.css */
.fooga {
Oops, something went wrong.

0 comments on commit c80dafe

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