madskristensen / csstools2019

CSS Tools

Download this extension from the VS Marketplace or get the CI build.

---

Provides additional features to the CSS editor in Visual Studio.

See the change log for changes and road map.

Features

• Color adornments
• Image and font preview
• Selector specificity tooltip
• Drag 'n drop of font files
• Darken/lighten hex colors
• Vendor property synchronization
• Media query Intellisense powered by Browser Link

Color adornments

All color types are supported, including the new CSS 3 formats.

Image and font preview

Darken/lighten hex colors

Place the caret on a hex color value and hit Ctrl+Shift+Up/Down to darken or lighten the color value.

The same can be done with any number value such as 1.2px to increase or decrease the value.

Vendor property synchronization

Media query Intellisense

Contribute

Check out the contribution guidelines if you want to contribute to this project.

For cloning and building this project yourself, make sure to install the Extensibility Tools 2015 extension for Visual Studio which enables some features used by this project.

License

Apache 2.0

csstools2019's Issues

Strange behavior with equality operator (==)

Installed product versions

• Visual Studio: 2019 Enterprise 16.7.7
• This extension: 1.1.4

Description

Typing an equality operator (==) in razor (c# .cshtml) is not working properly after installing this extension. When extention is disabled/uninstalled the strange behavior is gone.

Steps to recreate

1. Create an empty c# view and edit the .cshtml markup.
2. Add an empty div with style attribute (can be empty): <div style=""></div>.
3. On next line, try typing this code in razor syntax: @{ int n = 0; if (n == 0) { } }
4. After typing the == (+ space) the intellisense makes it look like this: @{ int n = 0; if (n =n=n

Current behavior

Unable to type == operator in razor syntax due to unexpected behavior of intellisense. This happens only when inline style is applied.

Expected behavior

Proper working intellisense after typing == operator.

Color adornments are not displayed anymore

Installed product versions

• Visual Studio: Professional 2019 Version 16.10.0
• This extension: 1.1.4

Description

After updating Visual Studio 2019 to version 16.10.0 the color adornments in razor/cshtml files are not shown anymore.

Steps to recreate

1. Create an empty c# view and edit the .cshtml markup.
2. Add an empty div with style attribute : <div style="color:"></div>.
3. Add a color in hex or rgb

Current behavior

After adding a hex or rgb color to a cshtml file the color adornment(color preview square) is not shown anymore.

Expected behavior

Display color previews in razor/cshtml files.

Is there a 2022 CSS Tools version planned?

Or there is a replacement?