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.
@stylexjs/stylex
Advanced tools
StyleX is a JavaScript library for defining styles for optimized user interfaces.
To start playing with StyleX without having to set up any build settings you can install just two packages:
npm install --save @stylexjs/stylex
StyleX is designed to extract styles to a static CSS style sheet during an app's build process. StyleX provides a Babel plugin along with plugin integrations for Webpack, Rollup and NextJS.
npm install --save-dev @stylexjs/babel-plugin
For more information on working with the compiler, please see the documentation for @stylexjs/babel-plugin
.
The runtime compiler should only be used for development and testing purposes.
npm install --save-dev @stylexjs/dev-runtime
Import @stylexjs/dev-runtime
in your JS entry-point to set everything up.
import inject from '@stylexjs/dev-runtime';
if (process.env.NODE_ENV !== 'production') {
inject({
// configuration options
classNamePrefix: 'x-',
dev: true,
test: false,
});
}
For more information on working with the compiler, please see the documentation for @stylexjs/dev-runtime
.
Styles are defined as a map of CSS rules using stylex.create()
. In the example below, there are 2 different CSS rules. The names "root" and "highlighted" are arbitrary names given to the rules.
import stylex from '@stylexjs/stylex';
const styles = stylex.create({
root: {
width: '100%',
color: 'rgb(60,60,60)',
},
highlighted: {
color: 'yellow',
}
});
Pseudo-classes and Media Queries can be nested within style definitions:
import stylex from '@stylexjs/stylex';
const styles = stylex.create({
root: {
width: '100%',
color: 'rgb(60,60,60)',
'@media (min-width: 800px)': {
maxWidth: '800px',
},
},
highlighted: {
color: 'yellow',
':hover': {
opacity: '0.9',
}
}
});
The compiler will extract the rules to CSS and replace the rules in the source code with a "compiled style" object.
Applying style rules to specific elements is done using stylex.spread
. Each argument to this function must be a reference to a compiled style object, or an array of compiled style objects. The function merges styles from left to right.
<div {...stylex.spread(styles.root, styles.highlighted)} />
The stylex.spread
function returns React props as required to render an element. StyleX styles can still be passed to other components via props, but only the components rendering host platform elements will use stylex.spread()
. For example:
const styles = stylex.create({
internalRoot: {
padding: 10
},
exportedRoot: {
position: 'relative'
}
});
function InternalComponent(props) {
return <div {...props} {...stylex.spread([ styles.internalRoot, props.style ])} />
}
export function ExportedComponent(props) {
return <InternalComponent style={[ styles.exportedRoot, props.style ]} />
}
Styles can be conditionally included using standard JavaScript.
<div {...stylex.spread(styles.root, isHighlighted && styles.highlighted)} />
And the local merging of styles can be used to control the relative priority of rules. For example, to allow a component's local styles to take priority over style property values passed in via props.
<div {...stylex.spread(props.style, styles.root)} />
You can even mix compiled styles with inline styles
<div {...stylex.spread(styles.root, { opacity })} />
Defining fallback styles is done with stylex.firstThatWorks()
. This is useful for engines that may not support a specific style property.
import stylex from '@stylexjs/stylex';
const styles = stylex.create({
header: {
position: stylex.firstThatWorks('sticky', '-webkit-sticky', 'fixed'),
},
});
This is equivalent to defining CSS as follows:
.header {
position: fixed;
position: -webkit-sticky;
position: sticky;
}
StyleX comes with full support for Static Types.
XStyle<>
The most common type you might need to use is XStyle<>
. This lets you accept an object of arbitrary StyleX styles.
type Props = {
...
style?: XStyle<>,
};
function MyComponent({style, ...}: Props) {
return (
<div {...stylex.spread(localStyles.foo, localStyles.bar, style)} />
);
}
XStyleWithout<>
To disallow specific style properties, use the XStyleWithout<>
type.
type Props = {
// ...
style?: XStyleWithout<{
postion: unknown,
display: unknown
}>
};
XStyleValue<>
To accept specific style properties only, use the XStyle<{...}>
and XStyleValue
types. For example, to allow only color-related style props:
type Props = {
// ...
style?: XStyle<{
color?: StyleXValue,
backgroundColor?: StyleXValue,
borderColor?: StyleXValue,
borderTopColor?: StyleXValue,
borderEndColor?: StyleXValue,
borderBottomColor?: StyleXValue,
borderStartColor?: StyleXValue,
}>,
};
XStyleValueFor<>
To limit the possible values for style properties, use the XStyleValueFor<>
type. Pass in a type argument with a union of literal types that provide the set of possible values that the style property can have. For example, if a component should accept marginTop
but only accept one of 0
, 4
, or 8
pixels as values.
type Props = {
...
style?: XStyle<{
marginTop: XStyleValueFor<0 | 4 | 8>
}>,
};
StyleX produces atomic styles, which means that each CSS rule contains only a single declaration and uses a unique class name. For example:
import stylex from '@stylexjs/stylex';
const styles = stylex.create({
root: {
width: '100%',
color: 'red',
}
}
From this code, StyleX will generate 2 classes. One for the width: '100%'
declaration, and one for the color: 'red'
declaration. If you use the declaration width: '100%'
anywhere else in your application, it will reuse the same CSS class rather than creating a new one.
One of the benefits of this approach is that the generated CSS file grows logarithmically as you add new styled components to your app. As more style declarations are added to components, they are more likely to already be in use elsehwere in the app. As a result of this CSS optimization, the generated CSS style sheet for an app is usually small enough to be contained in a single file and used across routes, avoiding style recalculation and layout thrashing as users navigate through your app.
FAQs
A library for defining styles for optimized user interfaces.
The npm package @stylexjs/stylex receives a total of 15,232 weekly downloads. As such, @stylexjs/stylex popularity was classified as popular.
We found that @stylexjs/stylex 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.
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.