Skip to content

Use PostCSS to preprocess your styles in Svelte components

Notifications You must be signed in to change notification settings

TehShrike/svelte-preprocess-postcss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Preprocess your Svelte component styles with PostCSS!

Uses postcss-load-config under the hood for config loading.

API

import sveltePreprocessPostcss from 'svelte-preprocess-postcss'

const stylePreprocessor = sveltePreprocessPostcss({
	configFilePath: '',
	useConfigFile: true,
	plugins: [
		require('precss')
	]
})

preprocessorFunction = sveltePreprocessPostcss([context])

If no context is passed in, configuration options are loaded from postcss.config.js or .postcssrc.js starting in the current directory.

If you do pass in a context object/function, it is passed to postcss-load-config.

Besides whatever postcss-load-config does with the context, you can also provide these values:

  • 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.
  • 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.

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.

Examples

const processed = await svelte.preprocess(source, {
	style: stylePreprocessor
})
export default {
	plugins: [
		svelte({
			preprocess: {
				style: stylePreprocessor
			},
			css(css) {
				css.write(`public/components.css`)
			}
		}),
	],
}

License

WTFPL

About

Use PostCSS to preprocess your styles in Svelte components

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •