Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

aesthetic

Package Overview
Dependencies
Maintainers
1
Versions
81
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

aesthetic - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

5

CHANGELOG.md

@@ -0,1 +1,6 @@

# 2.1.0
#### 🚀 New
* Style names (usually the component name) are now passed to adapters during the stylesheet
creation phase.
# 2.0.0

@@ -2,0 +7,0 @@ Aesthetic has been rewritten to properly support specificity, new at-rules, and global styles.

2

esm/Adapter.js

@@ -18,3 +18,3 @@ import _extends from 'babel-runtime/helpers/extends';

key: 'create',
value: function create(styleSheet) {
value: function create(styleSheet, styleName) {
return styleSheet;

@@ -21,0 +21,0 @@ }

4

esm/Aesthetic.js

@@ -46,3 +46,3 @@ import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';

return this.adapter.create(this.getStyles(styleName, themeName, props));
return this.adapter.create(this.getStyles(styleName, themeName, props), styleName);
}

@@ -121,3 +121,3 @@ }, {

var globalStyleSheet = this.adapter.create(globals);
var globalStyleSheet = this.adapter.create(globals, ':root');

@@ -124,0 +124,0 @@ this.transformStyles(Object.values(globalStyleSheet));

2

lib/Adapter.js

@@ -32,3 +32,3 @@ 'use strict';

key: 'create',
value: function create(styleSheet) {
value: function create(styleSheet, styleName) {
return styleSheet;

@@ -35,0 +35,0 @@ }

4

lib/Aesthetic.js

@@ -72,3 +72,3 @@ 'use strict';

return this.adapter.create(this.getStyles(styleName, themeName, props));
return this.adapter.create(this.getStyles(styleName, themeName, props), styleName);
}

@@ -147,3 +147,3 @@ }, {

var globalStyleSheet = this.adapter.create(globals);
var globalStyleSheet = this.adapter.create(globals, ':root');

@@ -150,0 +150,0 @@ this.transformStyles(Object.values(globalStyleSheet));

2

package.json
{
"name": "aesthetic",
"version": "2.0.0",
"version": "2.1.0",
"description": "Aesthetic is a powerful React library for styling components through the use of adapters.",

@@ -5,0 +5,0 @@ "keywords": [

536

README.md

@@ -5,3 +5,3 @@ # Aesthetic

Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS
using objects, importing stylesheets, or simply referencing external class names.
using style objects, importing stylesheets, or simply referencing external class names.
Simply put, Aesthetic is an abstraction layer that utilizes higher-order-components for

@@ -14,4 +14,4 @@ the compilation of styles via third-party libraries, all the while providing customizability,

import PropTypes from 'prop-types';
import { classes, ClassNamesPropType } from 'aesthetic';
import style from '../path/to/styler';
import { StylesPropType } from 'aesthetic';
import withStyles, { classes } from '../path/to/styler';

@@ -21,3 +21,3 @@ class Carousel extends React.Component {

children: PropTypes.node,
classNames: ClassNamesPropType.isRequired,
styles: StylesPropType.isRequired,
};

@@ -28,3 +28,3 @@

render() {
const { children, classNames } = this.props;
const { children, styles } = this.props;
const { animating } = this.state;

@@ -36,7 +36,7 @@

className={classes(
classNames.carousel,
animating && classNames.carousel__animating,
styles.carousel,
animating && styles.carousel__animating,
)}
>
<ul className={classNames.list}>
<ul className={classes(styles.list)}>
{children}

@@ -48,3 +48,3 @@ </ul>

onClick={this.handlePrev}
className={classes(classNames.button, classNames.prev)}
className={classes(styles.button, styles.prev)}
>

@@ -57,3 +57,3 @@ ←

onClick={this.handleNext}
className={classes(classNames.button, classNames.next)}
className={classes(styles.button, styles.next)}
>

@@ -67,3 +67,3 @@ →

export default style({
export default withStyles({
carousel: {

@@ -101,3 +101,4 @@ position: 'relative',

* React 15/16+
* IE 10+
* IE 11+
* `WeakMap`

@@ -123,3 +124,3 @@ ## Installation

* [Customizing Styles](#customizing-styles)
* [Combining Classes](#combining-classes)
* [Using Classes](#using-classes)
* [Styling Components](#styling-components)

@@ -136,8 +137,16 @@ * [External Classes](#external-classes)

* [Pseudos](#pseudos)
* [Fallbacks](#fallbacks)
* [Media Queries](#media-queries)
* [Supports](#supports)
* [Font Faces](#font-faces)
* [Animations](#animations)
* [Selectors](#selectors)
* [Global At-rules](#global-at-rules)
* [@charset](#charset)
* [@font-face](#font-face)
* [@global](#global)
* [@import](#import)
* [@keyframes](#keyframes)
* [@namespace](#namespace)
* [@page](#page)
* [@viewport](#viewport)
* [Local At-rules](#local-at-rules)
* [@fallbacks](#fallbacks)
* [@media](#media)
* [@supports](#supports)
* [Competitors Comparison](#competitors-comparison)

@@ -181,13 +190,14 @@ * [Features](#features)

| Adapter | Unified Syntax | Globals | Pseudos | Fallbacks | Fonts | Animations | Media Queries | Supports |
| :--- | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [CSS class names](#external-classes) | | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| [CSS modules][css-modules] | | | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| [Aphrodite][aphrodite] | ✓ | ✓¹ | ✓ | | ✓ | ✓ | ✓ | |
| [Fela][fela] | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| [Glamor][glamor] | ✓ | | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| [JSS][jss] | ✓ | | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| [TypeStyle][typestyle] | ✓ | | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Adapter | Unified Syntax | Globals¹ | Pseudos | Fallbacks | Fonts | Animations | Media Queries | Supports | Specificity |
| :--- | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [CSS class names](#external-classes) | | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| [CSS modules][css-modules] | | | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| [Aphrodite][aphrodite] | ✓ | ✓² | ✓ | | ✓ | ✓ | ✓ | | ✓ |
| [Fela][fela] | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| [Glamor][glamor] | ✓ | | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| [JSS][jss] | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| [TypeStyle][typestyle] | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
> 1. Only supports `@font-face` and `@keyframes`.
> 1. Unified syntax only.
> 2. Is accomplished through a custom [global selector handler](https://github.com/Khan/aphrodite#creating-extensions).

@@ -208,8 +218,7 @@ The following libraries are currently not supported.

([HOC](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e)).
These HOC's are used in transforming styles via adapters and passing down CSS
class names to the original wrapped component.
These HOC's are used in passing down styles to the original wrapped component.
To begin, we must create an instance of `Aesthetic` with an [adapter](#style-adapters),
pass it to `createStyler`, and export the new function. I suggest doing this an a file
that can be imported for reusability.
To begin, we must instantiate `Aesthetic` with an [adapter](#style-adapters), and pass it to
`createStyler` to create the `style` and `transform` functions. The `style` function is the HOC
factory, while `transform` will combine and process multiple style objects into a CSS class name.

@@ -220,7 +229,12 @@ ```javascript

export default createStyler(new Aesthetic(new JSSAdapter()));
const { style, transform } = createStyler(new Aesthetic(new JSSAdapter()));
export const classes = transform; // Or another utility name
export default style;
```
> I suggest doing this an a file that can be imported for reusability.
Once we have a styler function, we can import it and wrap our React components.
The styler function accepts a [style declaration](#styling-components) as its first argument,
The styler function accepts a [style sheet](#styling-components) as its 1st argument,
and an object of configurable options as the second. The following options are supported.

@@ -232,5 +246,5 @@

creating a new component in the process. Defaults to `false`.
* `stylesPropName` (string) - Name of the prop in which the compiled class names or styles
object is passed to. Defaults to `classNames`.
* `themePropName` (string) - Name of the prop in which the theme style declaration is passed to.
* `stylesPropName` (string) - Name of the prop in which the style sheet is passed to.
Defaults to `styles`.
* `themePropName` (string) - Name of the prop in which the theme sheet is passed to.
Defaults to `theme`.

@@ -241,3 +255,3 @@ * `pure` (boolean) - When true, the higher-order-component will extend `React.PureComponent`

```javascript
export default style({
export default withStyles({
button: { ... },

@@ -248,3 +262,3 @@ }, {

pure: true,
stylesPropName: 'classes',
stylesPropName: 'styleSheets',
themePropName: 'appTheme',

@@ -261,3 +275,3 @@ })(Button);

pure: true,
stylesPropName: 'classes',
stylesPropName: 'styleSheets',
themePropName: 'appTheme',

@@ -271,15 +285,15 @@ })

the component declaration with the styler function and passing an object of styles.
When this component is rendered, the style object is transformed into an object of class names,
and passed to the `classNames` prop.
When this component is rendered, the style sheet is passed to the `styles` prop,
and we can generate a class name using the `transform` function (`classes` in the example).
```javascript
import React, { PropTypes } from 'react';
import { ClassNamesPropType } from 'aesthetic';
import style from '../path/to/styler';
import { StylesPropType } from 'aesthetic';
import withStyles, { classes } from '../path/to/styler';
function Button({ children, classNames, icon }) {
function Button({ children, styles, icon }) {
return (
<button type="button" className={classNames.button}>
<button type="button" className={classes(styles.button)}>
{icon && (
<span className={classNames.icon}>{icon}</span>
<span className={classes(styles.icon)}>{icon}</span>
)}

@@ -294,7 +308,7 @@

children: PropTypes.node,
classNames: ClassNamesPropType.isRequired,
styles: StylesPropType.isRequired,
icon: PropTypes.node,
};
export default style({
export default withStyles({
button: { ... },

@@ -307,3 +321,3 @@ icon: { ... }

Since styles are isolated and colocated within a component, they can be impossible to
Since styles are isolated and co-located within a component, they can be impossible to
customize, especially if the component comes from a third-party library. If a component

@@ -334,29 +348,25 @@ styled by Aesthetic is marked as `extendable`, styles can be customized by calling

Parent styles (the component that was extended) are available when using a
[style function](#style-functions), allowing multiple layers of styles to be inherited.
Parent styles (the component that was extended) are automatically merged with the new styles.
#### Combining Classes
#### Using Classes
When multiple class names need to be applied to a single element, the `classes`
function provided by Aesthetic can be used. This function accepts an arbitrary
number of arguments, all of which can be strings, arrays, or objects that evaluate to true.
When applying or combining class names to a component, the `transform` function provided by
`createStyler` must be used. This function accepts an arbitrary number of arguments, all of
which can be strings or style objects that evaluate to truthy.
```javascript
import { classes } from 'aesthetic';
import withStyles, { classes } from '../path/to/styler';
classes(
'foo',
expression && 'bar',
{
baz: false,
qux: true,
},
); // foo qux
styles.foo,
expression && styles.bar,
expression ? styles.baz : styles.qux,
);
```
Using our `Button` examples above, let's add an active state and combine classes
like so. Specificity is important, so define styles from top to bottom!
Using our `Button` examples above, let's add an active state and combine classes like so.
Specificity is important, so define styles from top to bottom!
```javascript
function Button({ children, classNames, icon, active = false }) {
function Button({ children, styles, icon, active = false }) {
return (

@@ -366,8 +376,8 @@ <button

className={classes(
classNames.button,
active && classNames.button__active,
styles.button,
active && styles.button__active,
)}
>
{icon && (
<span className={classNames.icon}>{icon}</span>
<span className={classes(styles.icon)}>{icon}</span>
)}

@@ -384,7 +394,7 @@

As mentioned previously, to style a component, an object or function must be passed
as the first argument to the [styler function](#creating-a-styler). This object
as the 1st argument to the [styler function](#creating-a-styler). This object
represents a mapping of selectors (and modifiers) to declarations. For example:
```javascript
style({
withStyles({
button: { ... },

@@ -403,3 +413,3 @@ button__active: { ... },

```javascript
style({
withStyles({
button: 'button',

@@ -411,10 +421,4 @@ button__active: 'button--active',

To make use of class names, the provided `ClassNameAdapter` must be used.
> To only make use of class names, the provided `ClassNameAdapter` must be used.
```javascript
import Aesthetic, { createStyler, ClassNameAdapter } from 'aesthetic';
export default createStyler(new Aesthetic(new ClassNameAdapter()));
```
#### Style Objects

@@ -427,3 +431,3 @@

```javascript
style({
withStyles({
button: {

@@ -448,7 +452,7 @@ background: '#eee',

Style functions are simply functions that return a style object. The benefits of using a
function is that it provides the [current theme](#using-themes) as the first argument,
and the [previous styles](#customizing-styles) as the second argument.
function is that it provides the [current theme](#using-themes) as the 1st argument,
and the current React component props as the 2nd argument.
```javascript
style((theme, prevStyles) => {
withStyles((theme, props) => {
// ...

@@ -475,2 +479,9 @@ })(Button)

}, {
'@global': {
body: {
margin: 0,
padding: 0,
height: '100%',
},
},
'@font-face': {

@@ -480,3 +491,3 @@ 'Open Sans': {

fontWeight: 'normal',
src: ['fonts/OpenSans.woff'],
srcPaths: ['fonts/OpenSans.woff'],
},

@@ -487,3 +498,3 @@ },

> Global styles are immediately compiled and attached the DOM. Be wary of conflicts.
> Global styles are immediately compiled and attached to the DOM. Be wary of conflicts.

@@ -504,8 +515,8 @@ If you'd like to extend a base theme to create a new theme, use `extendTheme`. This

Once a theme has been registered, we can access the style parameters by using a
[style function](#style-functions). The parameters object is passed as the first
Once a theme has been registered, we can access the theme parameters by using a
[style function](#style-functions). The parameters object is passed as the 1st
argument to the function.
```javascript
style(theme => ({
withStyles(theme => ({
button: {

@@ -602,21 +613,23 @@ fontSize: `${theme.unitSize}${theme.unit}`,

```javascript
button: {
margin: 0,
padding: 5,
display: 'inline-block',
lineHeight: 'normal',
textAlign: 'center',
cursor: 'pointer',
backgroundColor: '#ccc',
color: '#000',
},
buttonGroup: {
// ...
},
{
button: {
margin: 0,
padding: 5,
display: 'inline-block',
lineHeight: 'normal',
textAlign: 'center',
cursor: 'pointer',
backgroundColor: '#ccc',
color: '#000',
},
buttonGroup: {
// ...
},
}
```
> Fela requires the `fela-plugin-unit` plugin.
> JSS requires the `jss-default-unit`, `jss-camel-case`, and `jss-global` plugins.
> Fela requires the `fela-plugin-unit` plugin.
#### Pseudos

@@ -627,13 +640,15 @@

```javascript
button: {
// ...
':hover': {
backgroundColor: '#eee',
{
button: {
// ...
':hover': {
backgroundColor: '#eee',
},
'::before': {
content: '"★"',
display: 'inline-block',
marginRight: 5,
},
},
'::before': {
content: '"★"',
display: 'inline-block',
marginRight: 5,
},
},
}
```

@@ -643,118 +658,220 @@

#### Fallbacks
#### Selectors
Property fallbacks for old browsers are defined under the `@fallbacks` object.
Each property accepts a single value or an array of values.
Parent, child, and sibling selectors are purposefully not supported. Use unique and
isolated element selectors and style declarations instead.
#### Global At-rules
Not to be confused with global styles, global at-rules are at-rules that must be defined in the
root of a style sheet and cannot be defined within a selector.
> Not all adapters support every global at-rule.
##### @charset
Supported by JSS.
```javascript
wrapper: {
// ...
background: 'linear-gradient(...)',
display: 'flex',
'@fallbacks': {
background: 'red',
display: ['box', 'flex-box'],
{
'@charset': 'utf8',
}
```
##### @font-face
Supported by all adapters.
```javascript
{
'@font-face': {
'Open Sans': {
fontStyle: 'normal',
fontWeight: 'normal',
srcPaths: ['fonts/OpenSans.woff2', 'fonts/OpenSans.ttf'],
},
},
},
button: {
// ...
fontFamily: 'Open Sans',
},
}
```
> Aphrodite does not support fallback styles.
> The `fontFamily` property can be omitted as it'll be inherited from the property name.
> Fela requires the `fela-plugin-fallback-value` plugin.
To support multiple font variations, like bold and italics, pass an array of declarations.
#### Media Queries
```javascript
{
'@font-face': {
'Open Sans': [
{
fontStyle: 'normal',
fontWeight: 'normal',
srcPaths: ['fonts/OpenSans.woff2', 'fonts/OpenSans.ttf'],
},
{
fontStyle: 'italic',
fontWeight: 'normal',
srcPaths: ['fonts/OpenSans-Italic.woff2', 'fonts/OpenSans-Italic.ttf'],
},
{
fontStyle: 'normal',
fontWeight: 'bold',
srcPaths: ['fonts/OpenSans-Bold.woff2', 'fonts/OpenSans-Bold.ttf'],
},
],
},
}
```
Media queries are defined inside a selector using a `@media` object,
with the query conditional as the key, and style declarations as the value.
Lastly, to define `local()` source aliases, pass an array of strings to a `local` property.
```javascript
tooltip: {
// ...
maxWidth: 300,
'@media': {
'(min-width: 400px)': {
maxWidth: 'auto',
{
'@font-face': {
'Open Sans': {
fontStyle: 'normal',
fontWeight: 'normal',
local: ['OpenSans', 'Open-Sans'],
srcPaths: ['fonts/OpenSans.ttf'],
},
},
},
}
```
> JSS requires the `jss-nested` plugin.
##### @global
#### Supports
Supported by Aphrodite, Fela, JSS, and TypeStyle.
Feature queries are defined inside a selector using a `@supports` object,
with the feature conditional as the key, and style declarations as the value.
```javascript
{
'@global': {
body: {
margin: 0,
padding: 0,
fontSize: 16,
},
'body, html': {
height: '100%',
},
a: {
color: 'red',
':hover': {
color: 'darkred',
},
},
},
}
```
> JSS requires the `jss-global` plugin.
##### @import
Supported by JSS.
```javascript
grid: {
// ...
float: 'left',
'@supports': {
'(display: flex)': {
float: 'none',
display: 'flex',
{
'@import': 'css/reset.css',
}
```
##### @keyframes
Supported by all adapters.
```javascript
{
'@keyframes': {
fade: {
from: { opacity: 0 },
to: { opacity: 1 },
},
},
},
button: {
// ...
animationName: 'fade',
animationDuration: '3s',
},
}
```
#### Font Faces
##### @namespace
Font faces are defined outside the selector (in the root) using a `@font-face` object
and are referenced by the font family name (the object key).
Supported by JSS.
```javascript
'@font-face': {
'Open Sans': {
fontStyle: 'normal',
fontWeight: 'normal',
src: ['fonts/OpenSans.woff2', 'fonts/OpenSans.ttf'],
{
'@namespace': 'url(http://www.w3.org/1999/xhtml)',
}
```
##### @page
Currently supported by no adapters.
```javascript
{
'@page': {
margin: '1cm',
},
},
button: {
// ...
fontFamily: 'Open Sans',
},
tooltip: {
// ...
fontFamily: 'Open Sans, sans-serif',
},
}
```
> The `fontFamily` property can be omitted as it'll be inherited from the property name.
> `:left`, `:right`, and other pseudos are not supported.
To support multiple font variations, like bold and italics, pass an array of properties.
##### @viewport
Supported by JSS.
```javascript
'@font-face': {
'Open Sans': [
{
fontStyle: 'normal',
fontWeight: 'normal',
src: ['fonts/OpenSans.woff2', 'fonts/OpenSans.ttf'],
{
'@viewport': {
width: 'device-width',
orientation: 'landscape',
},
}
```
#### Local At-rules
Local at-rules are at-rules that must be defined within a selector and cannot be defined in the
root of a style sheet.
##### @fallbacks
Supported by Fela, Glamor, JSS, and TypeStyle.
```javascript
{
wrapper: {
// ...
background: 'linear-gradient(...)',
display: 'flex',
'@fallbacks': {
background: 'red',
display: ['box', 'flex-box'],
},
{
fontStyle: 'italic',
fontWeight: 'normal',
src: ['fonts/OpenSans-Italic.woff2', 'fonts/OpenSans-Italic.ttf'],
},
{
fontStyle: 'normal',
fontWeight: 'bold',
src: ['fonts/OpenSans-Bold.woff2', 'fonts/OpenSans-Bold.ttf'],
},
],
},
},
}
```
Lastly, to define `local()` source aliases, pass an array of strings to a `local` property.
> Aphrodite does not support fallback styles.
> Fela requires the `fela-plugin-fallback-value` plugin.
##### @media
Supported by all adapters.
```javascript
'@font-face': {
'Open Sans': {
fontStyle: 'normal',
fontWeight: 'normal',
local: ['OpenSans', 'Open-Sans'],
src: ['fonts/OpenSans.ttf'],
tooltip: {
// ...
maxWidth: 300,
'@media': {
'(min-width: 400px)': {
maxWidth: 'auto',
},
},

@@ -764,26 +881,23 @@ },

#### Animations
> Nested `@media` are currently not supported.
Animation keyframes are defined outside the selector (in the root) using a `@keyframes` object
and are referenced by animation name (the object key).
##### @supports
Supported by Fela, Glamor, JSS, and TypeStyle.
```javascript
'@keyframes': {
fade: {
from: { opacity: 0 },
to: { opacity: 1 },
grid: {
// ...
float: 'left',
'@supports': {
'(display: flex)': {
float: 'none',
display: 'flex',
},
},
},
button: {
// ...
animationName: 'fade',
animationDuration: '3s',
},
```
#### Selectors
> Nested `@supports` are currently not supported.
Parent, child, and sibling selectors are purposefully not supported. Use unique and
isolated element selectors and style declarations instead.
### Competitors Comparison

@@ -814,3 +928,3 @@

| [JSS][jss] | ✓ | ✓ | | |
| [TypeStyle][typestyle] | ✓ | | | |
| [TypeStyle][typestyle] | ✓ | | | ||

@@ -817,0 +931,0 @@ [css-modules]: https://github.com/milesj/aesthetic/tree/master/packages/aesthetic-adapter-css-modules

2

src/Adapter.js

@@ -19,3 +19,3 @@ /**

*/
create(styleSheet: StyleSheet): StyleSheet {
create(styleSheet: StyleSheet, styleName: string): StyleSheet {
return styleSheet;

@@ -22,0 +22,0 @@ }

4

src/Aesthetic.js

@@ -56,3 +56,3 @@ /**

createStyleSheet(styleName: string, themeName?: string = '', props?: Object = {}): StyleSheet {
return this.adapter.create(this.getStyles(styleName, themeName, props));
return this.adapter.create(this.getStyles(styleName, themeName, props), styleName);
}

@@ -152,3 +152,3 @@

// Create global styles
const globalStyleSheet = this.adapter.create(globals);
const globalStyleSheet = this.adapter.create(globals, ':root');

@@ -155,0 +155,0 @@ // $FlowIgnore

aesthetic.js.flow

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc