Skip to content
Permalink
Browse files

feat: support postcss process options (#551)

Fixes #550
  • Loading branch information...
tivac committed Jan 24, 2019
1 parent 64538f8 commit 86d6d68f8c4ec1a991f49dbca107e22899d73ad2

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

Oops, something went wrong.
@@ -39,6 +39,7 @@
"rollup": "^1.1.2",
"rollup-plugin-svelte": "^5.0.1",
"shelljs": "^0.8.3",
"sugarss": "^2.0.0",
"svelte": "^2.16.0",
"watchify": "3.11.0",
"webpack": "^4.29.0"
@@ -162,6 +162,10 @@ new Processor({
});
```

### `postcss`

Specify an object that contains any of the [PostCSS `.process()` Options](http://api.postcss.org/global.html#processOptions). Note that `from` and `to` will usally **be overwritten** to match the files being processed. This feature allows for the use of custom `parser`, `stringifier`, and `syntax` settings.

### `resolvers`

If you want to provide your own file resolution logic you can pass an array of resolver functions. Each resolver function receives three arguments:
@@ -30,5 +30,8 @@
"resolve-from": "^4.0.0",
"true-case-path": "^1.0.2",
"unique-slug": "^2.0.0"
},
"peerDependencies": {
"postcss": "^7.0.0"
}
}
@@ -20,6 +20,7 @@ const noop = () => true;
const params = ({ _options, _files, _graph, _resolve }, args) => Object.assign(
Object.create(null),
_options,
_options.postcss,
{
from : null,
files : _files,
@@ -40,6 +41,7 @@ class Processor {
rewrite : true,
verbose : false,
resolvers : [],
postcss : {},
},
opts
);
@@ -239,6 +239,13 @@ Object {
}
`;

exports[`/processor.js options postcss options should support custom parsers 1`] = `
"/* packages/processor/test/specimens/parser.css */
.mce1d18d5d_a {
color: blue
}"
`;

exports[`/processor.js options rewrite should not rewrite url() references when falsey 1`] = `
"/* packages/processor/test/specimens/rewrite.css */
.mc20ca2799_a {
@@ -18,13 +18,13 @@ exports[`/processor.js unicode should support unicode classes & ids 1`] = `
#\\\\31 a2b3c { background: lime; }
#\\\\<p\\\\> { background: lime; }
#\\\\<\\\\>\\\\<\\\\<\\\\<\\\\>\\\\>\\\\<\\\\> { background: lime; }
#\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\[\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\>\\\\+\\\\<\\\\<\\\\<\\\\<\\\\-\\\\]\\\\>\\\\+\\\\+\\\\.\\\\>\\\\+\\\\\\\\.\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\\\\\.\\\\\\\\.\\\\+\\\\+\\\\+\\\\\\\\.\\\\>\\\\+\\\\+\\\\\\\\.\\\\<\\\\<\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\\\\\.\\\\>\\\\\\\\.\\\\+\\\\+\\\\+\\\\\\\\.\\\\------\\\\\\\\.\\\\--------\\\\\\\\.\\\\>\\\\+\\\\\\\\.\\\\>\\\\\\\\. { background: lime; }
#\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\[\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\>\\\\+\\\\<\\\\<\\\\<\\\\<\\\\-\\\\]\\\\>\\\\+\\\\+\\\\.\\\\>\\\\+\\\\.\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\.\\\\.\\\\+\\\\+\\\\+\\\\.\\\\>\\\\+\\\\+\\\\.\\\\<\\\\<\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\.\\\\>\\\\.\\\\+\\\\+\\\\+\\\\.\\\\-\\\\-\\\\-\\\\-\\\\-\\\\-\\\\.\\\\-\\\\-\\\\-\\\\-\\\\-\\\\-\\\\-\\\\-\\\\.\\\\>\\\\+\\\\.\\\\>\\\\. { background: lime; }
#\\\\# { background: lime; }
#\\\\#\\\\# { background: lime; }
#\\\\#\\\\.\\\\\\\\#\\\\.\\\\\\\\# { background: lime; }
#\\\\#\\\\.\\\\#\\\\.\\\\# { background: lime; }
#\\\\_ { background: lime; }
#\\\\{\\\\} { background: lime; }
#\\\\.fake-class { background: lime; }
#\\\\.fake\\\\-class { background: lime; }
#foo\\\\.bar { background: lime; }
#\\\\3A hover { background: lime; }
#\\\\3A hover\\\\3A focus\\\\3A active { background: lime; }
@@ -46,21 +46,21 @@ exports[`/processor.js unicode should support unicode classes & ids 1`] = `
.\\\\1F4A9 { background: lime; }
.\\\\? { background: lime; }
.\\\\@ { background: lime; }
.\\\\\\\\. { background: lime; }
.\\\\. { background: lime; }
.\\\\3A\\\\) { background: lime; }
.\\\\3A\\\\\`\\\\( { background: lime; }
.\\\\31 23 { background: lime; }
.\\\\31 a2b3c { background: lime; }
.\\\\<p\\\\> { background: lime; }
.\\\\<\\\\>\\\\<\\\\<\\\\<\\\\>\\\\>\\\\<\\\\> { background: lime; }
.\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\[\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\>\\\\+\\\\<\\\\<\\\\<\\\\<-\\\\]\\\\>\\\\+\\\\+\\\\\\\\.\\\\>\\\\+\\\\\\\\.\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\\\\\.\\\\\\\\.\\\\+\\\\+\\\\+\\\\\\\\.\\\\>\\\\+\\\\+\\\\\\\\.\\\\<\\\\<\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\\\\\.\\\\>\\\\\\\\.\\\\+\\\\+\\\\+\\\\\\\\.\\\\------\\\\\\\\.\\\\--------\\\\\\\\.\\\\>\\\\+\\\\\\\\.\\\\>\\\\\\\\. { background: lime; }
.\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\[\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\>\\\\+\\\\<\\\\<\\\\<\\\\<-\\\\]\\\\>\\\\+\\\\+\\\\.\\\\>\\\\+\\\\.\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\.\\\\.\\\\+\\\\+\\\\+\\\\.\\\\>\\\\+\\\\+\\\\.\\\\<\\\\<\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\.\\\\>\\\\.\\\\+\\\\+\\\\+\\\\.------\\\\.--------\\\\.\\\\>\\\\+\\\\.\\\\>\\\\. { background: lime; }
.\\\\\\\\# { background: lime; }
.\\\\\\\\#\\\\# { background: lime; }
.\\\\\\\\#\\\\.\\\\\\\\#\\\\.\\\\\\\\# { background: lime; }
.\\\\\\\\#\\\\.\\\\#\\\\.\\\\# { background: lime; }
.\\\\_ { background: lime; }
.\\\\{\\\\} { background: lime; }
.\\\\\\\\#fake\\\\-id { background: lime; }
.foo\\\\\\\\.bar { background: lime; }
.foo\\\\.bar { background: lime; }
.\\\\3Ahover { background: lime; }
.\\\\3Ahover\\\\3A focus\\\\3A active { background: lime; }
.\\\\[attr\\\\=value\\\\] { background: lime; }
@@ -212,6 +212,33 @@ describe("/processor.js", () => {
});
});

describe("postcss options", () => {
it("should support custom parsers", async () => {
const parser = require("sugarss");

const processor = new Processor({
postcss : {
parser,
}
});

await processor.string(
"packages/processor/test/specimens/parser.css",
dedent(`
.a
color: blue
`)
);

const { css } = await processor.output({
from : "packages/processor/test/specimens/parser.css",
to : "./packages/processor/test/output/parser.css",
});

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

describe("lifecycle options", () => {
describe("before", () => {
it("should run sync postcss plugins before processing", async () => {

0 comments on commit 86d6d68

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