Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@csstools/postcss-stepped-value-functions
Advanced tools
@csstools/postcss-stepped-value-functions is a PostCSS plugin that provides stepped value functions for CSS. It allows you to define values that change in steps, which can be useful for creating responsive designs or animations that need to change at specific intervals.
step-start
The `step-start` function allows you to define a value that changes in steps starting from the initial value. In this example, the width of the element changes in three steps from 100px to 200px.
/* Input CSS */
.element {
width: step-start(100px, 200px, 3);
}
/* Output CSS */
.element {
width: 100px;
}
.element:nth-child(2) {
width: 150px;
}
.element:nth-child(3) {
width: 200px;
}
step-end
The `step-end` function allows you to define a value that changes in steps ending at the final value. In this example, the height of the element changes in four steps from 50px to 150px.
/* Input CSS */
.element {
height: step-end(50px, 150px, 4);
}
/* Output CSS */
.element {
height: 50px;
}
.element:nth-child(2) {
height: 83.33px;
}
.element:nth-child(3) {
height: 116.67px;
}
.element:nth-child(4) {
height: 150px;
}
postcss-preset-env allows you to use future CSS features today by converting modern CSS into something most browsers can understand. It includes a variety of plugins that provide similar functionalities to @csstools/postcss-stepped-value-functions, such as custom properties and media queries.
postcss-custom-properties is a PostCSS plugin that lets you use CSS custom properties (variables) in more browsers. While it doesn't provide stepped value functions, it allows for dynamic and reusable values in your CSS, which can be combined with other plugins to achieve similar results.
npm install @csstools/postcss-stepped-value-functions --save-dev
PostCSS Stepped Value Functions lets you use round
, rem
and mod
stepped value functions, following the CSS Values 4.
.test-functions {
padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
transform: rotate(mod(-140deg, -90deg));
top: round(15px, 4px);
right: round(nearest, 15px, 4px);
bottom: round(up, 15px, 7px);
left: round(down, 15px, 4px);
width: round(to-zero, 15px, 4px);
}
/* becomes */
.test-functions {
padding: 8px 3px 1px calc(3px + 50%);
transform: rotate(-50deg);
top: 16px;
right: 16px;
bottom: 21px;
left: 12px;
width: 12px;
}
Add PostCSS Stepped Value Functions to your project:
npm install postcss @csstools/postcss-stepped-value-functions --save-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssSteppedValueFunctions = require('@csstools/postcss-stepped-value-functions');
postcss([
postcssSteppedValueFunctions(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS Stepped Value Functions runs in all Node environments, with special instructions for:
Given the dynamic nature of custom properties it's impossible to know what the variable value is, which means the plugin can't compute a final value for the stylesheet.
Because of that, any usage that contains a var
is skipped.
The preserve
option determines whether the original notation
is preserved. By default, it is not preserved.
postcssSteppedValueFunctions({ preserve: true })
.test-functions {
padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
transform: rotate(mod(-140deg, -90deg));
top: round(15px, 4px);
right: round(nearest, 15px, 4px);
bottom: round(up, 15px, 7px);
left: round(down, 15px, 4px);
width: round(to-zero, 15px, 4px);
}
/* becomes */
.test-functions {
padding: 8px 3px 1px calc(3px + 50%);
padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
transform: rotate(-50deg);
transform: rotate(mod(-140deg, -90deg));
top: 16px;
top: round(15px, 4px);
right: 16px;
right: round(nearest, 15px, 4px);
bottom: 21px;
bottom: round(up, 15px, 7px);
left: 12px;
left: round(down, 15px, 4px);
width: 12px;
width: round(to-zero, 15px, 4px);
}
FAQs
Use round, rem and mod functions in CSS
The npm package @csstools/postcss-stepped-value-functions receives a total of 3,109,365 weekly downloads. As such, @csstools/postcss-stepped-value-functions popularity was classified as popular.
We found that @csstools/postcss-stepped-value-functions demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.