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

csvars

v0.0.4

Published

CSS variable suggestions while you code

Downloads

155

Readme

CSVars - VSCODE CSS Variable Completions

A Visual Studio Code extension that provides intelligent autocompletion for CSS custom properties (CSS variables) across your entire workspace. Get suggestions for all your CSS variables with their values and documentation while you type.

Features

  • 🎨 Auto-completion for CSS variables across your entire workspace
  • 🌈 Special handling for color variables with color indicators
  • 📝 Shows variable values and comments in completions
  • 📍 Displays source file location for each variable
  • 🔄 Real-time updates when CSS files change
  • ⚡ Works in CSS, SCSS, LESS, HTML, JSX, TSX, and Astro files

CSVars Demo

Usage

  1. Start typing var( in any supported file
  2. The extension will automatically show completions for all CSS variables defined in your workspace
  3. Select a variable to insert it
  4. Hover over a variable to see its value, documentation, and source location

Example completion:

.example {
  /* Start typing var( here */
  color: var( /* Completions will appear */
}

Supported File Types

  • CSS (.css)
  • SCSS (.scss)
  • LESS (.less)
  • HTML (.html)
  • React (.jsx, .tsx)
  • Astro (.astro)

Variable Detection

The extension detects CSS variables defined in the following format:

--variable-name: value; /* Optional comment */

It automatically indexes:

  • Variable name
  • Value
  • Inline comments
  • Source file and line number

Features in Detail

Smart Completions

  • Shows variable name and value in the completion list
  • Differentiates between color and other variables
  • Provides inline preview for color values

Documentation View

When you highlight a completion, you'll see:

--variable-name         value

Along with:

  • Any associated comments
  • Source file location (filename:line)

Real-time Updates

  • Automatically detects changes to CSS files
  • Updates completions when variables are added, modified, or removed
  • Debounced updates to prevent performance issues

Installation

  1. Open VS Code
  2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
  3. Search for "CSVars"
  4. Click Install

Configuration

Currently, the extension works out of the box with no configuration needed. It automatically scans all CSS, SCSS, and LESS files in your workspace for variables.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Known Issues

  • When using completions within the same CSS file where variables are defined, VS Code's built-in completions may also appear. This is handled by filtering out current file variables to prevent duplicates.

Release Notes

1.0.0

  • Initial release
  • Basic CSS variable completion
  • Support for multiple file types
  • Real-time file watching
  • Documentation view with source information

License

MIT

Support

If you encounter any problems or have suggestions, please open an issue on our GitHub repository.


Enjoy! 🎨