Skip to content

Commit

Permalink
feat: support postcss process options (#551)
Browse files Browse the repository at this point in the history 
Fixes #550
  • Loading branch information
@tivac
tivac committed Jan 24, 2019
1 parent 64538f8 commit 86d6d68
Show file tree
Hide file tree
Showing 8 changed files with 75 additions and 22 deletions.
39 changes: 24 additions & 15 deletions package-lock.json
View file

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

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"rollup": "^1.1.2", "rollup": "^1.1.2",
"rollup-plugin-svelte": "^5.0.1", "rollup-plugin-svelte": "^5.0.1",
"shelljs": "^0.8.3", "shelljs": "^0.8.3",
"sugarss": "^2.0.0",
"svelte": "^2.16.0", "svelte": "^2.16.0",
"watchify": "3.11.0", "watchify": "3.11.0",
"webpack": "^4.29.0" "webpack": "^4.29.0"
Expand Down
4 changes: 4 additions & 0 deletions packages/processor/README.md
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -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` ### `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: If you want to provide your own file resolution logic you can pass an array of resolver functions. Each resolver function receives three arguments:
Expand Down
3 changes: 3 additions & 0 deletions packages/processor/package.json
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -30,5 +30,8 @@
"resolve-from": "^4.0.0", "resolve-from": "^4.0.0",
"true-case-path": "^1.0.2", "true-case-path": "^1.0.2",
"unique-slug": "^2.0.0" "unique-slug": "^2.0.0"
},
"peerDependencies": {
"postcss": "^7.0.0"
} }
} }
2 changes: 2 additions & 0 deletions packages/processor/processor.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const noop = () => true;
const params = ({ _options, _files, _graph, _resolve }, args) => Object.assign( const params = ({ _options, _files, _graph, _resolve }, args) => Object.assign(
Object.create(null), Object.create(null),
_options, _options,
_options.postcss,
{ {
from : null, from : null,
files : _files, files : _files,
Expand All @@ -40,6 +41,7 @@ class Processor {
rewrite : true, rewrite : true,
verbose : false, verbose : false,
resolvers : [], resolvers : [],
postcss : {},
}, },
opts opts
); );
Expand Down
7 changes: 7 additions & 0 deletions packages/processor/test/__snapshots__/options.test.js.snap
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -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`] = ` exports[`/processor.js options rewrite should not rewrite url() references when falsey 1`] = `
"/* packages/processor/test/specimens/rewrite.css */ "/* packages/processor/test/specimens/rewrite.css */
.mc20ca2799_a { .mc20ca2799_a {
Expand Down
14 changes: 7 additions & 7 deletions packages/processor/test/__snapshots__/unicode.test.js.snap
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ exports[`/processor.js unicode should support unicode classes & ids 1`] = `
#\\\\31 a2b3c { background: lime; } #\\\\31 a2b3c { background: lime; }
#\\\\<p\\\\> { background: lime; } #\\\\<p\\\\> { background: lime; }
#\\\\<\\\\>\\\\<\\\\<\\\\<\\\\>\\\\>\\\\<\\\\> { background: lime; } #\\\\<\\\\>\\\\<\\\\<\\\\<\\\\>\\\\>\\\\<\\\\> { background: lime; }
#\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\[\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\>\\\\+\\\\<\\\\<\\\\<\\\\<\\\\-\\\\]\\\\>\\\\+\\\\+\\\\.\\\\>\\\\+\\\\\\\\.\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\\\\\.\\\\\\\\.\\\\+\\\\+\\\\+\\\\\\\\.\\\\>\\\\+\\\\+\\\\\\\\.\\\\<\\\\<\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\\\\\.\\\\>\\\\\\\\.\\\\+\\\\+\\\\+\\\\\\\\.\\\\------\\\\\\\\.\\\\--------\\\\\\\\.\\\\>\\\\+\\\\\\\\.\\\\>\\\\\\\\. { background: lime; } #\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\[\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\>\\\\+\\\\<\\\\<\\\\<\\\\<\\\\-\\\\]\\\\>\\\\+\\\\+\\\\.\\\\>\\\\+\\\\.\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\.\\\\.\\\\+\\\\+\\\\+\\\\.\\\\>\\\\+\\\\+\\\\.\\\\<\\\\<\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\.\\\\>\\\\.\\\\+\\\\+\\\\+\\\\.\\\\-\\\\-\\\\-\\\\-\\\\-\\\\-\\\\.\\\\-\\\\-\\\\-\\\\-\\\\-\\\\-\\\\-\\\\-\\\\.\\\\>\\\\+\\\\.\\\\>\\\\. { background: lime; }
#\\\\# { 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; } #foo\\\\.bar { background: lime; }
#\\\\3A hover { background: lime; } #\\\\3A hover { background: lime; }
#\\\\3A hover\\\\3A focus\\\\3A active { background: lime; } #\\\\3A hover\\\\3A focus\\\\3A active { background: lime; }
Expand All @@ -46,21 +46,21 @@ exports[`/processor.js unicode should support unicode classes & ids 1`] = `
.\\\\1F4A9 { background: lime; } .\\\\1F4A9 { background: lime; }
.\\\\? { background: lime; } .\\\\? { background: lime; }
.\\\\@ { background: lime; } .\\\\@ { background: lime; }
.\\\\\\\\. { background: lime; } .\\\\. { background: lime; }
.\\\\3A\\\\) { background: lime; } .\\\\3A\\\\) { background: lime; }
.\\\\3A\\\\\`\\\\( { background: lime; } .\\\\3A\\\\\`\\\\( { background: lime; }
.\\\\31 23 { background: lime; } .\\\\31 23 { background: lime; }
.\\\\31 a2b3c { background: lime; } .\\\\31 a2b3c { background: lime; }
.\\\\<p\\\\> { background: lime; } .\\\\<p\\\\> { background: lime; }
.\\\\<\\\\>\\\\<\\\\<\\\\<\\\\>\\\\>\\\\<\\\\> { background: lime; } .\\\\<\\\\>\\\\<\\\\<\\\\<\\\\>\\\\>\\\\<\\\\> { background: lime; }
.\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\[\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\>\\\\+\\\\<\\\\<\\\\<\\\\<-\\\\]\\\\>\\\\+\\\\+\\\\\\\\.\\\\>\\\\+\\\\\\\\.\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\\\\\.\\\\\\\\.\\\\+\\\\+\\\\+\\\\\\\\.\\\\>\\\\+\\\\+\\\\\\\\.\\\\<\\\\<\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\\\\\.\\\\>\\\\\\\\.\\\\+\\\\+\\\\+\\\\\\\\.\\\\------\\\\\\\\.\\\\--------\\\\\\\\.\\\\>\\\\+\\\\\\\\.\\\\>\\\\\\\\. { background: lime; } .\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\[\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\>\\\\+\\\\+\\\\+\\\\>\\\\+\\\\<\\\\<\\\\<\\\\<-\\\\]\\\\>\\\\+\\\\+\\\\.\\\\>\\\\+\\\\.\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\.\\\\.\\\\+\\\\+\\\\+\\\\.\\\\>\\\\+\\\\+\\\\.\\\\<\\\\<\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\+\\\\.\\\\>\\\\.\\\\+\\\\+\\\\+\\\\.------\\\\.--------\\\\.\\\\>\\\\+\\\\.\\\\>\\\\. { background: lime; }
.\\\\\\\\# { background: lime; } .\\\\\\\\# { background: lime; }
.\\\\\\\\#\\\\# { background: lime; } .\\\\\\\\#\\\\# { background: lime; }
.\\\\\\\\#\\\\.\\\\\\\\#\\\\.\\\\\\\\# { background: lime; } .\\\\\\\\#\\\\.\\\\#\\\\.\\\\# { background: lime; }
.\\\\_ { background: lime; } .\\\\_ { background: lime; }
.\\\\{\\\\} { background: lime; } .\\\\{\\\\} { background: lime; }
.\\\\\\\\#fake\\\\-id { background: lime; } .\\\\\\\\#fake\\\\-id { background: lime; }
.foo\\\\\\\\.bar { background: lime; } .foo\\\\.bar { background: lime; }
.\\\\3Ahover { background: lime; } .\\\\3Ahover { background: lime; }
.\\\\3Ahover\\\\3A focus\\\\3A active { background: lime; } .\\\\3Ahover\\\\3A focus\\\\3A active { background: lime; }
.\\\\[attr\\\\=value\\\\] { background: lime; } .\\\\[attr\\\\=value\\\\] { background: lime; }
Expand Down
27 changes: 27 additions & 0 deletions packages/processor/test/options.test.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -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("lifecycle options", () => {
describe("before", () => { describe("before", () => {
it("should run sync postcss plugins before processing", async () => { it("should run sync postcss plugins before processing", async () => {
Expand Down

0 comments on commit 86d6d68

Please sign in to comment.