Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
babel-plugin-short-css-vars
Advanced tools
Optimization plugin to shorten the names of CSS variables
Babel plugin using short-css-vars to shorten the names of CSS variables in JavaScript code.
CSS variables are renamed with a unique hash that is consistent across processed files. This allows you to have common style files that reference variables with varying values defined in theme files.
$ npm install babel-plugin-short-css-vars --save-dev
Input
const sheet = document.createElement('style');
sheet.innerHTML = `
:root { --long-variable-name-that-defines-a-particular-color: blue; }
`;
const div = document.createElement('div');
div.style.color = "var(--long-variable-name-that-defines-a-particular-color)";
Output
const sheet = document.createElement('style');
sheet.innerHTML = `
:root { --vf2dsn: blue; }
`;
const div = document.createElement('div');
div.style.color = "var(--vf2dsn)";
This plugin also works with JSX/React source.
{
"plugins": [
"babel-plugin-short-css-vars"
]
}
See the babel docs for more configuration details.
This plugin supports all the utility options. Because these options will need to be a RegExp or function, the Babel config willl need to be a JavaScript configuration file.
See the utility for how the default formatting works. If you wish to use a different pattern, simply provide a different formatter function via options.
// babel.config.js
const fnv1a = require('fnv1a');
module.exports = {
"plugins": [
[
"babel-plugin-short-css-vars",
{
formatter: name => fnv1a(name).toString(36)
}
]
]
}
The name
provided to the formatter is the variable name WITHOUT the '--'
prefix. The return value should also be name-only. So my-custom-var
rather
than --my-custom-var
.
If you need to avoid hashing certain variable names, you can ignore them with this option by either RegExp, function, or string (which will be turned into RegExp). This can be useful if you are referencing CSS Variables in an app, yet you do not have control over some of the declarations.
// babel.config.js
module.exports = {
"plugins": [
[
"babel-plugin-short-css-vars",
{
ignore: /^third-party-theme/
}
]
]
}
In another scenario, if you have several short variable names (for example
--blue
) you can use a function to ignore names by length.
postcss([shortCssVars({
ignore: name => name.length <= 4
})])
The name
provided to ignore is the variable name WITHOUT the '--' prefix. So
blue
rather than --blue
.
FAQs
Optimization plugin to shorten the names of CSS variables
We found that babel-plugin-short-css-vars demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.