🌐 Sapper with PostCSS project base

This is a relatively lightweight extension to the official Sapper Rollup template with support for PostCSS inside Svelte components. You are also recommended to check out @nhristov's similar template.

If you're looking for something with much, much more bundled in, check out my opinionated project base.

• Sapper for Svelte
  • Official VS Code Plugin (beta)
  • Type Checker VS Code Plugin
• PostCSS
  • Tailwind CSS
  • postcss-import
  • PurgeCSS
  • CSSNano
  • Inside Svelte components, thanks to svelte-preprocess
• ESLint
  • VS Code Plugin
  • eslint:fix package script

Choose either to clone or fork depending on your preference.

git clone https://github.com/babichjacob/sapper-postcss-template

Click the Use this template button on this project's GitHub page.

cd sapper-postcss-template
npm install

npm run dev

npm run prod

If you do not need to include heavy Babel transforms and polyfills to support old browsers on your site, then remove the --legacy flag in the export package script to lighten it up.

npm run export

1. Remove all Tailwind imports in the src/global.pcss file
2. Remove the require("tailwindcss")("./tailwind.config.js"), line in postcss.config.js
3. Delete the tailwind.config.js file
4. Because PurgeCSS is bundled with Tailwind CSS, if you want to reinstate it then install @fullhuman/postcss-purgecss and add this to the end of your PostCSS plugins list (in postcss.config.js):

!dev && require("@fullhuman/postcss-purgecss")({
    content: ["./src/**/*.svelte", "./src/**/*.html"],
    defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:\/\.]+/g) || [], // eslint-disable-line no-useless-escape
}),

Create an issue and I'll try to help.

Create an issue or pull request and I'll try to fix.

I'm sorry, because of my skill level and the fragility of (the combination of) some of these tools, there are likely to be problems in this project. Thank you for bringing them to my attention or fixing them for me.

MIT

This README was generated with ❤️ by readme-md-generator