Sapper Postcss Template
A template that includes Sapper for Svelte and PostCSS preprocessing with Tailwind CSS
Overview
This project is an extension to the official Sapper Rollup template, with added support for PostCSS inside Svelte components. It also includes the use of Tailwind CSS and follows Progressive Web App (PWA) best practices. The project is maintained until SvelteKit is ready, and there are instructions on how to migrate to Svelte Adders for continued functionality.
Features
- PostCSS support inside Svelte components
- Sapper for Svelte
- Official VS Code Extension
- postcss-import
- PurgeCSS
- CSSNano
- Progressive Web App (PWA) best practices set up
- manifest.json's most important fields filled out
- High Lighthouse audit score
- ESLint
- VS Code Extension
- eslint:fix package script
Summary
This project base extends the official Sapper Rollup template and adds support for PostCSS inside Svelte components. It includes various features such as PWA setup, ESLint integration, and a high Lighthouse audit score. The project is actively maintained until SvelteKit is ready, with instructions on how to migrate to Svelte Adders for continued functionality.
- Express
Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Rollup
RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.