🧠 Logical Properties installs statistics

🧠 Logical Properties

Identify and replace CSS 💪 physical properties with 🧠 logical properties.

Please leave a rating and review

Features

This extension contributes the following:

• Command pallet - Replace all 💪 physical properties with 🧠 logical properties. • Replaces all of the detected physical properties with logical properties in the current file. • • keybindings: ctrl+shift+L/cmd+shift+L • Replaces all of the detected physical properties with logical properties in the current file. • • Editor Context Menu: Replace all 💪 physical properties with 🧠 logical properties. • Replaces all of the detected physical properties with logical properties in the current file. • • Problems • Shows any warning(s) if an open file contains physical properties. • • Quick Fix/Light Bulb • Quickly change a single physical property to its equivalent logical property. • • Status Bar • Shows the number of physical properties detected in the current file. • • Indicates if no physical properties were detected in the current file. • • Click to replace all of the detected physical properties with logical properties in the current file. • Ignore Properties • The logicalProperties.ignoreProperties configuration setting can be used to ignore specific css properties. • Use, for example, "logicalProperties.ignoreProperties": ["min-width", "max-width"] to ignore min-width and max-width. • • • • Ignore Language IDs • The logicalProperties.ignoreLanguageIds configuration setting can be used to ignore specific files. • Use, for example, "logicalProperties.ignoreLanguageIds": ["typescript"] to ignore Typescript or .ts files. • • • • Supported Languages • Testing has only been done on .css, .html, and .jsx files. • In theory the following languages are supported: • coffeescript • css • html • javascript • javascriptreact • less • markdown • php • plaintext • sass • scss • stylus • typescript • typescriptreact • vue • vue-html • xml • xsl

Gotchas

A few things to be aware of when using this extension:

• False positives/negatives are possible. • For example, in an HTML file if you use an image tag with the height attribute, the extension will currently detect the height attribute as a physical property. • Double check your file after using the replace all feature. • Changing a physical property to a logical property may or may not have an effect on styles that override styles from other files and third-party files.

Known Issues

Limited testing of this extension has been done.

Release Notes

0.1.15

• Ignore specific files • Added a way to ignore specific files through ignoreLanguageIds. • See: https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers • Renamed ignoreList to ignoreProperties. • ignoreList is now depricated and will be removed from a future version.

0.1.14

• Fixed the extension to no longer check for or update values within media queries. • Logical properties aren't supported in media queries. • See #4 • Note that the check is very simple and checks for parenthesis to determine if a replacement should be made. This could lead to false positives or false negatives. • Ignore specific CSS properties • Added a way to ignore specific properties through ignoreList (depricated, see: v0.1.15) • See #14

0.1.12

• Fixed border-top-right-radius --> border-start-end-radius and Fixed border-bottom-left-radius --> border-end-start-radius • See #7 • See #8 • See #9

0.1.11

Fix an issue related to regex matching indices not currently supported in node.js

• VSCode uses Electron • Electron uses node.js for local apis • node.js does not currently support regex matching indices (d flag, hasIndices) • Using a polyfill • See #2

0.1.10

Fixed which files diagnostics are shown for

• Previously .git files were showing diagnostics • Files that were closed were still showing in Problems

0.1.9

Fixed activation

• Fixes a bug where the extension would not work on the first time it was installed. • See #1

0.1.0

Initial release

TODO

• Update additional checks and logic for logical properties that do not map to physical properties • Write Tests • Link to or document basic info about logical properties

Description from the VS Code Marketplace listing.