├── .gitignore ├── index.js ├── package-lock.json ├── package.json └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const postcssLoadConfig = require(`postcss-load-config`) 2 | const postcss = require(`postcss`) 3 | 4 | module.exports = (context = {}) => { 5 | const { useConfigFile = true, configFilePath, plugins = [] } = context 6 | 7 | if (useConfigFile === false) { 8 | return ({ content, filename }) => Promise.resolve(process(plugins, content, filename)) 9 | } else { 10 | const configPromise = postcssLoadConfig(context, configFilePath) 11 | 12 | return ({ content, filename }) => configPromise.then( 13 | ({ plugins }) => process(plugins, content, filename) 14 | ) 15 | } 16 | } 17 | 18 | function process(plugins, css, filename) { 19 | return postcss(plugins) 20 | .process(css, { 21 | from: filename, 22 | map: { 23 | inline: false, 24 | }, 25 | }) 26 | .then(result => ({ 27 | code: result.css, 28 | map: result.map.toJSON(), 29 | })) 30 | } 31 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-preprocess-postcss", 3 | "version": "1.1.1", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "ansi-styles": { 8 | "version": "3.2.0", 9 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz", 10 | "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==", 11 | "dev": true, 12 | "requires": { 13 | "color-convert": "^1.9.0" 14 | } 15 | }, 16 | "argparse": { 17 | "version": "1.0.10", 18 | "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", 19 | "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", 20 | "requires": { 21 | "sprintf-js": "~1.0.2" 22 | } 23 | }, 24 | "chalk": { 25 | "version": "2.3.0", 26 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz", 27 | "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==", 28 | "dev": true, 29 | "requires": { 30 | "ansi-styles": "^3.1.0", 31 | "escape-string-regexp": "^1.0.5", 32 | "supports-color": "^4.0.0" 33 | }, 34 | "dependencies": { 35 | "supports-color": { 36 | "version": "4.5.0", 37 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz", 38 | "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=", 39 | "dev": true, 40 | "requires": { 41 | "has-flag": "^2.0.0" 42 | } 43 | } 44 | } 45 | }, 46 | "color-convert": { 47 | "version": "1.9.1", 48 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz", 49 | "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", 50 | "dev": true, 51 | "requires": { 52 | "color-name": "^1.1.1" 53 | } 54 | }, 55 | "color-name": { 56 | "version": "1.1.3", 57 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", 58 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", 59 | "dev": true 60 | }, 61 | "cosmiconfig": { 62 | "version": "2.2.2", 63 | "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.2.tgz", 64 | "integrity": "sha512-GiNXLwAFPYHy25XmTPpafYvn3CLAkJ8FLsscq78MQd1Kh0OU6Yzhn4eV2MVF4G9WEQZoWEGltatdR+ntGPMl5A==", 65 | "requires": { 66 | "is-directory": "^0.3.1", 67 | "js-yaml": "^3.4.3", 68 | "minimist": "^1.2.0", 69 | "object-assign": "^4.1.0", 70 | "os-homedir": "^1.0.1", 71 | "parse-json": "^2.2.0", 72 | "require-from-string": "^1.1.0" 73 | } 74 | }, 75 | "error-ex": { 76 | "version": "1.3.1", 77 | "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz", 78 | "integrity": "sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=", 79 | "requires": { 80 | "is-arrayish": "^0.2.1" 81 | } 82 | }, 83 | "escape-string-regexp": { 84 | "version": "1.0.5", 85 | "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", 86 | "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", 87 | "dev": true 88 | }, 89 | "esprima": { 90 | "version": "4.0.1", 91 | "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", 92 | "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" 93 | }, 94 | "has-flag": { 95 | "version": "2.0.0", 96 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz", 97 | "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=", 98 | "dev": true 99 | }, 100 | "is-arrayish": { 101 | "version": "0.2.1", 102 | "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", 103 | "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" 104 | }, 105 | "is-directory": { 106 | "version": "0.3.1", 107 | "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz", 108 | "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=" 109 | }, 110 | "js-yaml": { 111 | "version": "3.13.1", 112 | "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz", 113 | "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==", 114 | "requires": { 115 | "argparse": "^1.0.7", 116 | "esprima": "^4.0.0" 117 | } 118 | }, 119 | "minimist": { 120 | "version": "1.2.0", 121 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", 122 | "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" 123 | }, 124 | "object-assign": { 125 | "version": "4.1.1", 126 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 127 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" 128 | }, 129 | "os-homedir": { 130 | "version": "1.0.2", 131 | "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", 132 | "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=" 133 | }, 134 | "parse-json": { 135 | "version": "2.2.0", 136 | "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", 137 | "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=", 138 | "requires": { 139 | "error-ex": "^1.2.0" 140 | } 141 | }, 142 | "postcss": { 143 | "version": "6.0.16", 144 | "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.16.tgz", 145 | "integrity": "sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA==", 146 | "dev": true, 147 | "requires": { 148 | "chalk": "^2.3.0", 149 | "source-map": "^0.6.1", 150 | "supports-color": "^5.1.0" 151 | } 152 | }, 153 | "postcss-load-config": { 154 | "version": "1.2.0", 155 | "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-1.2.0.tgz", 156 | "integrity": "sha1-U56a/J3chiASHr+djDZz4M5Q0oo=", 157 | "requires": { 158 | "cosmiconfig": "^2.1.0", 159 | "object-assign": "^4.1.0", 160 | "postcss-load-options": "^1.2.0", 161 | "postcss-load-plugins": "^2.3.0" 162 | } 163 | }, 164 | "postcss-load-options": { 165 | "version": "1.2.0", 166 | "resolved": "https://registry.npmjs.org/postcss-load-options/-/postcss-load-options-1.2.0.tgz", 167 | "integrity": "sha1-sJixVZ3awt8EvAuzdfmaXP4rbYw=", 168 | "requires": { 169 | "cosmiconfig": "^2.1.0", 170 | "object-assign": "^4.1.0" 171 | } 172 | }, 173 | "postcss-load-plugins": { 174 | "version": "2.3.0", 175 | "resolved": "https://registry.npmjs.org/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz", 176 | "integrity": "sha1-dFdoEWWZrKLwCfrUJrABdQSdjZI=", 177 | "requires": { 178 | "cosmiconfig": "^2.1.1", 179 | "object-assign": "^4.1.0" 180 | } 181 | }, 182 | "require-from-string": { 183 | "version": "1.2.1", 184 | "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-1.2.1.tgz", 185 | "integrity": "sha1-UpyczvJzgK3+yaL5ZbZJu+5jZBg=" 186 | }, 187 | "source-map": { 188 | "version": "0.6.1", 189 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", 190 | "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", 191 | "dev": true 192 | }, 193 | "sprintf-js": { 194 | "version": "1.0.3", 195 | "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", 196 | "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" 197 | }, 198 | "supports-color": { 199 | "version": "5.1.0", 200 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz", 201 | "integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==", 202 | "dev": true, 203 | "requires": { 204 | "has-flag": "^2.0.0" 205 | } 206 | } 207 | } 208 | } 209 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-preprocess-postcss", 3 | "version": "1.1.1", 4 | "description": "Preprocess your Svelte component styles with PostCSS", 5 | "main": "index.js", 6 | "dependencies": { 7 | "postcss-load-config": "^1.2.0" 8 | }, 9 | "devDependencies": { 10 | "postcss": "^6.0.16" 11 | }, 12 | "peerDependencies": { 13 | "postcss": "7.x || 6.x" 14 | }, 15 | "scripts": { 16 | "test": "echo \"Error: no test specified :-(\" && exit 0" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/TehShrike/svelte-preprocess-postcss.git" 21 | }, 22 | "keywords": [ 23 | "svelte", 24 | "postcss" 25 | ], 26 | "author": "TehShrike", 27 | "license": "WTFPL", 28 | "bugs": { 29 | "url": "https://github.com/TehShrike/svelte-preprocess-postcss/issues" 30 | }, 31 | "homepage": "https://github.com/TehShrike/svelte-preprocess-postcss#readme" 32 | } 33 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | Preprocess your Svelte component styles with PostCSS! 2 | 3 | Uses [postcss-load-config](https://github.com/michael-ciniawsky/postcss-load-config) under the hood for config loading. 4 | 5 | # API 6 | 7 | ```js 8 | import sveltePreprocessPostcss from 'svelte-preprocess-postcss' 9 | 10 | const stylePreprocessor = sveltePreprocessPostcss({ 11 | configFilePath: '', 12 | useConfigFile: true, 13 | plugins: [ 14 | require('precss') 15 | ] 16 | }) 17 | ``` 18 | 19 | ## `preprocessorFunction = sveltePreprocessPostcss([context])` 20 | 21 | If no context is passed in, configuration options are loaded from postcss.config.js or .postcssrc.js starting in the current directory. 22 | 23 | If you do pass in a context object/function, it is passed to `postcss-load-config`. 24 | 25 | Besides whatever `postcss-load-config` does with the context, you can also provide these values: 26 | 27 | - `configFilePath` (optional string): If supplied, is used as the root path to use to look for a config file. Defaults to the current working directory. 28 | - `useConfigFile` (optional boolean): if `false`, the preprocessor won't go looking for any configuration file - the `plugins` property of the `context` object will be used by itself. Defaults to `true`. 29 | 30 | You can both pass in a context object with plugins and whatnot, and also load from a config file - `postcss-load-config` handles merging those together. 31 | 32 | # Examples 33 | 34 | ## [`svelte.preprocess`](https://github.com/sveltejs/svelte/#preprocessor-options) 35 | 36 | ```js 37 | const processed = await svelte.preprocess(source, { 38 | style: stylePreprocessor 39 | }) 40 | ``` 41 | 42 | ## [`rollup-plugin-svelte`](https://github.com/rollup/rollup-plugin-svelte) 43 | 44 | ```js 45 | export default { 46 | plugins: [ 47 | svelte({ 48 | preprocess: { 49 | style: stylePreprocessor 50 | }, 51 | css(css) { 52 | css.write(`public/components.css`) 53 | } 54 | }), 55 | ], 56 | } 57 | ``` 58 | 59 | # License 60 | 61 | [WTFPL](http://wtfpl2.com) 62 | --------------------------------------------------------------------------------