Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
postcss-rem
Advanced tools
Readme
PostCSS plugin to use rem units with optional pixel fallback. Based on sass-rem.
Breaking change in 3.0: changed default function name to rem-convert
as CSS now use rem()
for calculating the remainder.
See also: startijenn-rem, vanilla JavaScript version.
.demo {
font-size: rem-convert(24px); /* Simple */
padding: rem-convert(5px 10px); /* Multiple values */
margin: rem-convert(10px 0.5rem); /* Existing rem */
border-bottom: rem-convert(1px solid black); /* Multiple mixed values */
box-shadow: rem-convert(
0 0 2px #ccc,
inset 0 0 5px #eee
); /* Comma-separated values */
text-shadow: rem-convert(1px 1px) #eee, rem-convert(-1px) 0 #eee; /* Alternate use */
}
.demo {
font-size: 1.5rem; /* Simple */
padding: 0.3125rem 0.625rem; /* Multiple values */
margin: 0.625rem 0.5rem; /* Existing rem */
border-bottom: 0.0625rem solid black; /* Multiple mixed values */
box-shadow: 0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee; /* Comma-separated values */
text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem 0 #eee; /* Alternate use */
}
With baseline
to 10
(html { font-size: 62.5%; }
) and fallback
to true
:
.demo {
font-size: 24px;
font-size: 2.4rem; /* Simple */
padding: 5px 10px;
padding: 0.5rem 1rem; /* Multiple values */
margin: 10px 5px;
margin: 1rem 0.5rem; /* Existing rem */
border-bottom: 1px solid black;
border-bottom: 0.1rem solid black; /* Multiple mixed values */
box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee; /* Comma-separated values */
text-shadow: 1px 1px #eee, -1px 0 #eee;
text-shadow: 0.1rem 0.1rem #eee, -0.1rem 0 #eee; /* Alternate use */
}
With convert
to px
(for a lt-ie9 only stylesheet for example):
.demo {
font-size: 24px; /* Simple */
padding: 5px 10px; /* Multiple values */
margin: 10px 8px; /* Existing rem */
border-bottom: 1px solid black; /* Multiple mixed values */
box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee; /* Comma-separated values */
text-shadow: 1px 1px #eee, -1px 0 #eee; /* Alternate use */
}
Install with npm i postcss-rem
and use with PostCSS:
postcss([require("postcss-rem")]);
Example with custom options:
postcss([
require("postcss-rem")({
name: "convert-rem", // Default to 'rem-convert'
baseline: 10, // Default to 16
// convert: "px", // Default to 'rem'
fallback: true, // Default to false
precision: 6, // Default to 5
}),
]);
See PostCSS docs for examples for your environment.
FAQs
PostCSS plugin to use rem units with optional pixel fallback.
The npm package postcss-rem receives a total of 3,749 weekly downloads. As such, postcss-rem popularity was classified as popular.
We found that postcss-rem demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.