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-react-pug-classnames
Advanced tools
[react-pug] Transform className property using BEM classnames-like function
Solves the problem of calling sub-components in react-pug
(improved version of https://github.com/ezhlobo/babel-plugin-transform-jsx-classname-components)
And also automatically parses the array or object value of className
(styleName
)
and transforms it through classnames
-like function. Which adds BEM-type naming of modifiers by automatically prefixing all classnames with the Element name.
It must be installed into the actual dependencies, NOT the devDependencies.
The reason is that it does classnames processing through a dynamic runtime function which is require()
'd from the package itself.
npm i babel-plugin-react-pug-classnames
Add plugin to your babel config right after the transform-react-pug
:
{
"plugins": [
["transform-react-pug", {
"classAttribute": "styleName"
}],
["react-pug-classnames", {
"classAttribute": "styleName"
}]
]
}
classAttribute
-- name of the attribute to use (for example styleName
). Default: className
classnamesFunction
-- classnames function to use to transform the className's object/array value. Default: babel-plugin-react-pug-classnames/classnames
-
is used as the separator between Element and Modifier. Examples:
root
, root-active
, button-hover
, button-disabled
, button-primary
This library is intended to be used with modular css (react-css-modules
and react-native-css-modules
). So there is actually no concept of Block
. Only Elements
and Modifiers
.
Let's say we have the following Pug template:
Modal.Actions.controls.full(className=[color, {isOpened, isClosed}])
What we intend that template to do is:
to use Modal.Actions
component
it is an Element
(BEM) called controls
, so it should have that class unmodified
it should also have an additional class full
, also unmodified
and we want to autoprefix all Modifiers
(BEM) in the className
value with the name of the Element
(BEM).
The following is going to happen:
If the first class starts from the Capital letter -- it's considered to be the property of the tag you are calling (in this case it's going to be .Actions
).
The first non-capital class is considered to be the Element
(BEM). All classes specified in the object/array value of className
will be prefixed with the Element
name (in this case it will be controls-
)
All classes which you write through .
(other than the first Capital class, if it exists) are not modified.
The final effective output will be similar to:
<Modal.Actions
className={
'controls full ' + classnames([
'controls-' + color,
{
'controls-isOpened': isOpened,
'controls-isClosed': isClosed
}
])
}
/>
MIT
(c) Decision Mapper - http://decisionmapper.com
FAQs
[react-pug] Transform className property using BEM classnames-like function
The npm package babel-plugin-react-pug-classnames receives a total of 0 weekly downloads. As such, babel-plugin-react-pug-classnames popularity was classified as not popular.
We found that babel-plugin-react-pug-classnames 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.