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-cssta
Advanced tools
Experimental project. Basically CSS Modules, but puts the CSS in the files, because that might be useful for some projects.
Experimental project. Basically CSS Modules, but puts the CSS in the files, because that might be useful for some projects.
Can generate real CSS files for production (with really tiny class names).
Like CSS Modules, it
Unlike CSS Modules, it
var(--name)
, see note in composition):global
and :local
pseudosimport cssta from 'cssta';
const styles = cssta(`
.button {
color: black;
}
.button:hover {
color: red;
}
.button-large {
font-size: 2em;
}
.fade {
animation: 1s scoped-animation;
}
@keyframes scoped-animation {
0% { opacity: 0 }
}
`);
export default () => (
<button className={`${styles.button} ${styles['button-large']}`}>Test</button>
);
In dev, this will scope all class names and insert them into style elements. The cssta(...)
call will return a mapping of class name to a mangled non-conflict name. Animation names are not exported.
In production, we'll use a babel plugin that will scope all class names, generate a real CSS file, and replace the cssta(...)
call with an object of the same mapping as before.
In dev mode, you can pass an optional second argument to use as a prefix for your class names to assist in debugging. In production, the second argument is ignored.
If you're going to use babel to generate real CSS files, we can't interpolate strings. I.e.
// THIS WILL NOT WORK
cssta(`
.button {
color: ${color};
}
`);
You should use CSS variables to achieve this. Sidenote: interpolation only allows scoped variables, but in design, consistency is global property. It only makes sense that your globals follow that.
Calls to cssta
return objects. This means your styles do not have to be in the same file as your components. It's perfectly fine to have a util file,
// util.js
export default cssta(`
.text-center {
text-align: center !important;
}
`);
// button.js
import utilStyles from './util.js'
const styles = cssta(...);
export default () => (
<button className={`${styles.button} ${utilStyles['text-center']}`}>Test</button>
);
The cssta module was designed to work in a development environment, so you don't want to use it in production. You can use babel-plugin-cssta
to transform the cssta call into an object mapping and extract the CSS (and remove the import).
You can transform multiple files, and the CSS will be concatenated. However, before you run babel, you must delete the existing CSS file so you don't end up with duplicate CSS.
{
"plugins" [
["babel-plugin-cssta", {
"output": "dist/styles.css"
}]
]
}
The output is relative to your current working directory.
const styles = cssta(`
.button {
color: black;
}
`);
const styles = {
"button": "A"
};
/* File generated by babel-plugin-cssta */
.A {
color: black;
}
See cssta-demo
npm start
for dev mode.npm run build-cssta
for prod build, and see output JS and CSS files in ./dist
.FAQs
See https://www.npmjs.com/package/cssta
The npm package babel-plugin-cssta receives a total of 5 weekly downloads. As such, babel-plugin-cssta popularity was classified as not popular.
We found that babel-plugin-cssta demonstrated a not healthy version release cadence and project activity because the last version was released 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.
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.