npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cueaz/vite-plugin-inline-css-modules

v1.0.15

Published

Write CSS modules without leaving your javascript!

Downloads

1

Readme

vite-plugin-inline-css-modules

npm Code style: Prettier

[!NOTE] This package is a fork of bluskript/vite-plugin-inline-css-modules with a few incompatible changes.

  • Explicit tag function name for preprocessor
  • Runtime error on accessing undefined class names

Write CSS modules without leaving your javascript!

  • Zero Runtime
  • Contains full feature set of CSS modules (Includes PostCSS if you use that!)
    • Supports @apply and others!
    • Scopes your CSS locally to your component!
  • Supports ANY framework

Usage

pnpm add -D @cueaz/vite-plugin-inline-css-modules

vite.config.ts

import inlineCssModules from '@cueaz/vite-plugin-inline-css-modules';

export default {
  plugins: [inlineCssModules()],
};

src/env.d.ts

/// <reference types="@cueaz/vite-plugin-inline-css-modules" />

src/Root.tsx

// use sass`` scss`` less`` styl`` for preprocessors
const classes = css`
  .root {
    background-color: #1f1;
    @apply rounded-md;
  }
`

// accessing undefined classes.abc will throw a runtime error
export const Root = () => <div class={classes.root}>Hello world</div>

Why is this useful?

This was originally written for writing styles in SolidJS. I came from Vue, which already contained a special <style scoped> tag, and I wanted something just as easy to use as that. If you are using a framework that does not support writing scoped styles natively, this is for you!

Why not one of the hundreds of existing CSS-in-JS solutions?

Every single CSS-in-JS solution i've seen suffers from the same problem: it can't integrate with existing tooling. This plugin simply generates a CSS module using the contents of the string. This allows it to integrate with PostCSS and things like Tailwind or UnoCSS with ease.

In addition, a lot of solutions also have an implicit bundling cost. This differs in that it is completely based on CSS modules.

Caveats

  • This plugin does not support string interpolation. It may seem that way from the use of template strings, but all this plugin really does is move the contents of the string template into a real CSS module, meaning string interpolation can't work.

  • You can't manipulate the classes variables as normal JS variables.

    Why? because at compile time, this plugin transforms:

    const classes = css``;

    into:

    import classes from './[basename]/classes.inline.module.css.wrapper';

Plugin Options

None

Help

  • I'm getting an error like inlineCss is not defined
    • This is probably because you didn't set the tag name correctly in config. This plugin might be deleting your import of inlineCss from this plugin, so please check to make sure that the tagName option is set correctly.