jpmorganchase / modular

A modular front end development framework

Home Page:https://modular.js.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature Request: Support for vanilla-extract CSS

DavieReid opened this issue · comments

commented

This feature request is to add support for vanilla-extract CSS in modular.

vanilla-extract provides a way to create stylesheets using TypeScript with zero-runtime cost. It runs at compile time and outputs CSS stylesheets. There are plugins for many build systems/tools but the 2 relevant for modular are:

A key feature of modular is minimal configuration for users but the cost of this is that there is no way to use the vanilla-extract plugin for either webpack or esbuild.

Support for vanilla-extract can potentially be achieved by:

  1. Allowing modular users to extend/overwrite the built-in webpack and esbuild configs. In this particular case, the simple addition of a plugin is sufficient but there may be other plugins that would benefit from this feature and would require additional config/settings. The downside is that this leaves plenty scope for users to configure things incorrectly and may make upgrades harder.

  2. Add a command that allows users to specify the styling solution they are using. e.g. modular --style "vanilla-extract" and this command adds in the necessary plugins. Other styling solutions like SCSS could also be supported. A similar feature is supported in the angular-cli e.g. ng new my-app --style=scss

I welcome additional thoughts/solutions to this issue that I may have overlooked.