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.

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

Rework svelte & clean up rollup integrations #430

Merged
merged 14 commits into from
Jun 8, 2018
12 changes: 6 additions & 6 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
coverage/
parsers/
node_modules/
specimens/
results/
gen/
dangerfile.js
gen/
dist/
gen/
node_modules/
parsers/
results/
specimens/
specimens/output/
33 changes: 23 additions & 10 deletions docs/svelte.md
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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
]
});

Expand All @@ -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
]
};
```
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@
"jest": {
"coveragePathIgnorePatterns": [
"node_modules",
"parsers"
"parsers",
"test-utils"
],
"watchPathIgnorePatterns": [
"test/output",
Expand Down
16 changes: 8 additions & 8 deletions packages/rollup/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
5 changes: 5 additions & 0 deletions packages/rollup/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion packages/rollup/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
65 changes: 44 additions & 21 deletions packages/rollup/rollup.js
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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,

Expand All @@ -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 = [];

Expand Down Expand Up @@ -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)}";`
)
);

Expand All @@ -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);
Expand Down
71 changes: 67 additions & 4 deletions packages/rollup/test/__snapshots__/rollup.test.js.snap
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
}
"
`;

Expand All @@ -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\\\\\\"\\",
Expand All @@ -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 {
Expand Down
Loading