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.
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)
