Revamp Mufferplate

[furkantaskin]

Mufferplate is currently (for me) helping a lot for development and source code handling. But there are many concepts affecting the performance and developement stages.

1. There are so many templates to use (Tailwind, Tailwind with Sass, Muffilities etc.). Migrating new version of mufferplate takes a lot of effort. It slows down development process and new features as well as fixing bugs.
2. Esbuild is providing blazingly fast compilation. But managing both Tailwind, Sass and LightningCSS besides esbuild creates bottlenecks on development and new features because of tracking different types of file changes, managing all functions and implementing new features. Bun is great alternative but it still doesn't provide the flexibility Rspack or webpack provides. Rspack is better option than Webpack because of performance and maintainability. Speed problem is not that much for the minimal projects usually working on. Roadmap will be completed in different stages
3. Some libraries like Swiper and GLightbox are so large and usually increasing the final JS and CSS size drastically because of unusued components and functions.
4. Building muffilities in dev mode approximately takes longer than 1 second. Optimization is needed to increase the performance.

Mufferplate Templates

All variants will be disabled and all source CSS files will be merged in one project. This template's will be all-in-one solution for all the projects. Sass will be first-class citizen for the variants to manage CSS source files.

• [ ] Create all-in-one new template
• [ ] Integrate Bootstrap or Flowbite
• [ ] Implement new Sass Node importer for Bootstrap
• [ ] Implement new Sass Node importer for the styles of 3rd party libraries
• [ ] Remove unused example Google font link
• [ ] Remove unused favicon tag

Mufferplate Bundler

• [ ] Migrate core JS bundler to Rspack or Vite
• [ ] Implement Sass parsing to Rspack or Vite
• [ ] Implement Tailwind to Rspack or Vite
• [ ] Make Tailwind optional choice
• [ ] Implement signature banners to Rspack or Vite
• [ ] Implement comment banner to Rspack or Vite
• [ ] Testing process
• [ ] Generate all-in-one Sass library
• [ ] Implement new Sass Node importer for Bootstrap
• [ ] Update configuration respective to Rspack
• [ ] Test custom user configuration compatibility to prevent generating fully detailed configuration file
• [ ] Replace Bootstrap with Flowbite

External Libraries

• [ ] Remove unused libraries like Photoswipe
• [ ] Find new alternatives for large libraries
• [ ] Write custom alternatives for large libraries
• [ ] Add Sweetalert as default and export for window usage
• [ ] Add vanilla js masking for form inputs

Muffilities (Custom Utilities)

• [ ] Rewrite generators for muffilites to increase performance
• [ ] Add optional pseudo-selectors
• [ ] Add custom selectors (Selectors like mx-[20px]. Generate them inside a separate file)
• [ ] Migrate Sass @import directives to @use directive (Visit for the detailed information)
• [ ] Make hover and pseudo selectors optional. Generate these classes depends on the user's selection
• [ ] Add additional Tailwind selectors like grid columns

[furkantaskin]

Vite is providing the JS API to implement. Vite's active support and performance compared to Rspack because of the css importing pushes it to the top for using as the core engine.

Also, flowbite is proıviding the same elements like bootstrap with native Tailwind support. Bootstrap may be completely disabled to use Flowbite.

Also, muffilities can be removed to completely support Tailwind.