Skip to content

Feature Request: Support for vanilla-extract CSS #1902

@DavieReid

Description

@DavieReid

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions