g-style

v1.2.12

Published

2 years ago

This library was strongly inspired by [CXS](https://github.com/cxs-css/cxs),

Downloads

0High
0Medium
0Low

lucasrainett

global-style

This library was strongly inspired by CXS,

But it is not a fork,

It is a complete new implementation

And there are some key differences on how it works compared to CXS.

Object Oriented

import { GlobalStyle } from "g-style";
const globalStyle = new GlobalStyle({});
const className = globalStyle.getClassNames({ color: "gold" });
// this would have more configurations available

Functional

import { css } from "g-style";
const className = css({ color: "gold" });
// this way it is the simpler, it just works

Features

Small
Typescript Support
100% Unit tested
Zero dependencies
High performance
Deduplicates repeated styles
Dead-code elimination
Framework independent
Media queries
Pseudoclasses
Nesting
No CSS files
CSP
Run from CDN
Auto append "px" (similar to react)

Install

npm install g-style

yarn add g-style

CDN

Run from CDN

<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>
<script>
const {css} = GlobalStyle;
const className = css({margin: 0});
</script>

Run from CDN with webpack

webpack.config.js

export default {
  ...
  externals: {"g-style": "GlobalStyle"}
  ...
};

Usage

Example with React

import React from "react"
import { GlobalStyle } from "g-style";
const globalStyle = new GlobalStyle();
const className = globalStyle.getClassNames({ color: "gold" });

export const Box = (props) => <div {...props} className={className} />

import React from "react"
import { css } from "g-style";
const className = css({ color: "gold" });

export const Box = (props) => <div {...props} className={className} />

Pseudo-classes

####This is one of the main differences comparing to CXS, pseudo-classes should have the & symbol similar to SCSS/SASS

const className = globalStyle.getClassNames({
  color: "gold",
  "&:hover": {
    border: "1px solid #ccc"
  }
})

Media Queries

const className = globalStyle.getClassNames({
  fontSize: 32,
  "@media screen and (min-width: 40em)": {
    fontSize: 48
  }
})

Multi value Array for vendor prefixing

const className = globalStyle.getClassNames({
  display: ["flex", "-webkit-flex"]
})

Child Selectors

####One more difference comparing to CXS, child selectors don't need to start with a space symbol.

const className = globalStyle.getClassNames({
  color: "gold",
  ".link": {
    color: "red"
  }
})

Static/Server-Side Rendering

For Node.js environments, use the globalStyle.getFullCss() method to return the static CSS string after rendering a view.

import React from "react";
import ReactDOMServer from "react-dom/server";
import { GlobalStyle } from "g-style";
import App from "./App";

...
// Create a new instance of globalStyle for each render
const globalStyle = new GlobalStyle();
...

const html = ReactDOMServer.renderToString(<App />);
const css = globalStyle.getFullCss();

const doc = `<!DOCTYPE html>
<style>${css}</style>
${html}
`

Keyframe support

const className = globalStyle.getClassNames({
    "@keyframes spin": {
        "0%": {
            transform: "rotate(0deg)"
        },
        "100%": {
            transform: "rotate(360deg)"
        }
    },
    animation: "spin 5s infinite",
})

Support comma separated style key

const globalStyle = new GlobalStyle();
const className = globalStyle.getClassNames({
    "code,kbd,samp": { fontSize: "1em" },
});

Will create all style rules

.t0 code{font-size:1em;}
.t1 kbd{font-size:1em;}
.t2 samp{font-size:1em;}

Memory Only

This option will stop the style/css to be injected in the page, useful if you are going to use the style in Iframes/WebComponents etc...

const globalStyle = new GlobalStyle({memoryOnly: true});

Security

Global Style will read the csp nonce from meta tag automatically

<meta property="csp-nonce" content="random-nonce">

You can optionally provide a nonce when creating the instance

const globalStyle = new GlobalStyle({nonce:"random-nonce"});

Auto append px to numeric size rules

const globalStyle = new GlobalStyle();
const className = globalStyle.getClassNames({
  margin: 10
})

// will create a margin: 10px

API

`const globalStyle = new GlobalStyle()`

Create a new globalStyle instance

`const globalStyle = new GlobalStyle({...options})`

All options

{
prefix:"prefix",
nonce:"random",
debug: true,
memoryOnly: true
}

Create a new globalStyle instance with custom prefix

`globalStyle.getClassNames(styleObject)`

Accepts one style object a className string.

`globalStyle.getFullCss()`

Returns the rendered CSS string for static and server-side rendering.

`css(styleObject)`

Returns the rendered CSS string for static and server-side rendering.

MIT License

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme