I have an older CSS project that primarily uses px as the default unit of measurement.
Now, I am looking to revamp the project and need to change all instances of px to rem using the search and replace feature in VSCode. The conversion ratio is set at 10px = 1rem
In this conversion process, 20px should be transformed to 2rem. However, having it displayed as 2.0rem is also acceptable, as I can easily remove any trailing zeros afterwards.
If the measurement in pixels is less than 5px, then it should not be replaced.
Keep in mind that some rules may contain decimal points for pixel values, which can be omitted if needed.
- Sample data
font-size: 10px;
border: 0px;
margin-top: 4px; // dont touch
margin-bottom: 12px;
margin-right: 50%;
margin-left: -12px;
padding-left: 120px;
padding-right: 8px;
border-radius: calc(50% - 1px); // dont touch
grid-template-columns: 1fr 44px 1fr;
... (remaining code unchanged)
- Desired output after replacement
font-size: 1rem;
border: 0rem;
margin-top: 4px; // dont touch
margin-bottom: 1.2rem;
margin-right: 50%;
margin-left: -1.2rem;
padding-left: 12rem;
padding-right: .8rem;
border-radius: calc(50% - 1px); // dont touch
grid-template-columns: 1fr 4.4rem 1fr;
... (modified lines only shown above)
The attempted regex pattern so far has been:
\b(?![1234]px)(\d*)(\d)(?:\.(\d+))?px\b
Replacing with:
$1.$2$3rem
To test the regex pattern, visit this link