Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Please check the reshadow.dev website to get more information and examples.
reshadow provides the Shadow DOM developer experience, but for the Virtual DOM with the Component way.
import React from 'react';
import styled, {css} from 'reshadow';
// Write styles:
const styles = css`
button {
width: 200px;
}
content {
font-size: 14px;
}
`;
export const Button = ({children, ...props}) => {
// connect the styles to the markup:
return styled(styles)(
<button {...props}>
<content as="span">{children}</content>
</button>,
);
};
This project has
alpha
status, so the API and the implementation could be changed.
css-in-js
and css-modules
approaches or choose which fits you betterThere are some examples on the Сodesandbox:
There are also some css-in-js benchmarks, that are available on the codesandbox.
npm i --save reshadow
.babelrc
{"plugins": ["reshadow/babel"]}
Check the Setup page to get more details (including setup with Create React App)
import React from 'react';
import styled from 'reshadow';
import {readableColor, rgba} from 'polished';
const Button = ({
bgcolor = 'lightgray',
size = 's',
children,
...props
}) => styled`
button {
cursor: pointer;
padding: 5px 10px;
border-radius: 5px;
border: 2px solid ${bgcolor};
background-color: ${rgba(bgcolor, 0.7)};
color: ${readableColor(bgcolor)};
transition: background-color 0.5s;
&:hover {
background-color: ${rgba(bgcolor, 0.9)};
}
}
/**
* Match on the 'disabled' prop,
* not the DOM attribute
**/
button[disabled] {
opacity: 0.5;
pointer-events: none;
}
/**
* Match on the 'use:size' prop
*/
button[use|size='s'] {
font-size: 12px;
}
/* The 'use' namespace can be omitted */
button[|size='m'] {
font-size: 14px;
}
`(
/* use:size property would not pass to the DOM */
<button {...props} use:size={size}>
{children}
</button>,
);
const Container = () => styled`
Button + Button {
margin-left: 10px;
}
`(
<div>
<Button size="m" bgcolor="lightgray">
lightgray
</Button>
<Button size="m" bgcolor="orange">
orange
</Button>
<Button size="m" bgcolor="rebeccapurple">
rebeccapurple
</Button>
</div>,
);
Button/index.js
import React from 'react';
import styled from 'reshadow';
import styles from './styles.css';
export const Button = ({size, children}) => styled(styles)(
<button use:size={size}>{children}</button>,
);
Button/styles.css
button {
/* button styles */
}
button[|size='m'] {
/* button styles for the size */
}
import React from 'react';
import styled, {css} from 'reshadow';
const anotherStyles = css`
button[disabled] {
/* disabled button styles */
}
`;
export const Button = ({size, children}) => styled(
props.another && anotherStyles,
)`
button {
/* button styles */
}
button[|size='m'] {
/* button styles for the size */
}
`(<button use:size={size}>{children}</button>);
With CRA 2 (Create React App) or babel-plugin-macros usage you can just use reshadow/macro
out of the box.
import React from 'react';
import styled from 'reshadow/macro';
export const Button = ({children}) => styled`
button {
/* button styles */
}
`(<button>{children}</button>);
Options (via babel-plugin-macros config) are the same as reshadow
babel options, but with different defaults:
option | default value |
---|---|
postcss | true |
files | /.shadow.css$/ |
Add reshadow/babel
to the plugin list.
babel.config.js
module.exports = {
plugins: ['reshadow/babel'],
};
option | type | default value | description |
---|---|---|---|
postcss | boolean | {plugins: Plugin[]} | false | Use PostCSS to process CSS code. You can add your custom PostCSS plugins (they should be sync) |
files | boolean | RegExp | false | Resolve and process css files imports that match to the RegExp |
elementFallback | boolean | string | 'div' | Use fallback for the custom elements |
Add reshadow/postcss
to the plugin list.
postcss.config.js
module.exports = {
plugins: ['reshadow/postcss'],
};
Use reshadow/webpack/loader
to extract styles in separate files.
webpack.config.js
{
test: /\.js$/,
use: [
'reshadow/webpack/loader',
'babel-loader',
]
}
Use reshadow/eslint
if you want to have more control about reshadow
usage.
Rules:
Use reshadow/prettier
if you want to improve your Developer Experience with prettier.
prettier.config.js
module.exports = {
plugins: ['reshadow/prettier'],
};
FAQs
reshadow
The npm package reshadow receives a total of 47 weekly downloads. As such, reshadow popularity was classified as not popular.
We found that reshadow demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 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.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.