
Research
Security News
Lazarus Strikes npm Again with New Wave of Malicious Packages
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
babel-plugin-enhanced-react-style
Advanced tools
Splitting dynamic and static styles into style and css prop.
Split static and constant styles.
The first thing to know is that you are going to write all your styling inline. This might sound crazy, but you have to leave your deep knowledge of styling vs css, classnames and everything else behind. Think about the best possible developer experience you can imagine, where none of this knowledge and mental overhead is needed. You just define your styles:
import React from 'react'
function App() {
const [toggle, setToggle] = React.useState(false)
return (
<h1
onClick={() => setToggle(!toggle)}
style={{
color: 'green',
background: toggle ? 'blue' : 'white'
}}
>
Hello World
</h1>
)
}
Note that we are defining one static style, named color. We are also defining a dynamic style named background. This tool understands the difference and will make the static part a class and the dynamic part an inline style.
import React from 'react'
function App() {
const [toggle, setToggle] = React.useState(false)
return (
<h1
onClick={() => setToggle(!toggle)}
className="emotion-efoie3"
style={{ background: toggle ? 'blue' : 'white' }}
>
Hello World
</h1>
)
}
What is also important to notice here is that you can still just import React as normal. You do not need any special jsx
imports or similar.
import React from 'react'
function App() {
const [toggle, setToggle] = React.useState(false)
return (
<h1
onClick={() => setToggle(!toggle)}
style={{
color: 'red',
'&': {
':hover': {
color: 'blue'
}
}
}}
>
Hello World
</h1>
)
}
The "&" property is used to identify that you are using a selector. This is especially important for typing.
Yeah! Because that means there is only one way to define styling. It is the most straight forward and simplest way to think about styling. But you might worry about messy code? That is just a matter of structure. For example, emotion and other libraries allows:
import styled from '@emotion/styled'
export const Wrapper = styled.div({
color: 'red'
})
But there is no need for a custom API taking too many assumptions, causing issues with dynamic behaviour and leaking props to the DOM. Any time you think an element has too many inline styling, just move it to a function component:
import React from 'react'
const Header = ({ onClick, children }) => (
<h1
onClick={onClick}
style={{
color: 'red',
'&': {
':hover': {
color: 'blue'
}
}
}}
>
{children}
</h1>
)
function App() {
const [toggle, setToggle] = React.useState(false)
return <Header onClick={() => setToggle(!toggle)}>Hello World</Header>
}
This is exactly what styled.div
does, but you are in control of it.
The important thing here is the developer experience. You never think about underlying technologies, you just use the style
attribute and style up your components. They are automatically optimized for dynamic/static behaviour and even doing server side rendering automatically extracts critical CSS for you.
FAQs
Splitting dynamic and static styles into style and css prop.
The npm package babel-plugin-enhanced-react-style receives a total of 1 weekly downloads. As such, babel-plugin-enhanced-react-style popularity was classified as not popular.
We found that babel-plugin-enhanced-react-style demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 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
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.