Naughty Pinching Mannequins

    @essence/react-stylesheet

    1.2.4 • Public • Published

    🎨 React Stylesheet

    @essence/react-stylesheet
    Stylesheet as a React Component
    by Essence

    Why React Stylesheet?

    React Stylesheet brings the full power of CSS to React.

    Components throughout your app feed into a global stylesheet, giving you dynamic control. This is great for creating a CSS reset, building a theme, or adding styles not supported by React.

    Controlling your styles from React makes stylesheets dynamic, allowing for adding styles to your stylesheet "just in time," or altering styles values based on theme changes. React Stylesheet also supports all CSS selectors, including pseudo classes and pseudo elements, as well as media queries and server-side rendering, and is fully typed.

    Pseudo Classes
    Pseudo Elements
    Media Queries
    Dynamic Themeing
    Server-side Rendering
    Fully Typed

    Examples

    Stylesheet Provider

    import { StylesheetProvider, Stylesheet } from "@essence/react-stylesheet";
    
    const sheets = [];
    
    <StylesheetProvider id="my-stylesheet" sheets={sheets}>
      // nested a few layers down...
      <Stylesheet
        styles={{
          "button:hover": {
            backgroundColor: "#f00"
          }
        }} />
    </StylesheetProvider>

    Pseudo Classes

    React Stylesheet adds support for pseudo classes, such as :hover. No more setting state with onHover just to change background color:

    import { Stylesheet } from "@essence/react-stylesheet";
    
    //...
    
    <Stylesheet
      styles={{
        "button:hover": {
          backgroundColor: "#f00"
        }
      }} />

    Pseudo Elements

    React Stylesheet also supports pseudo elements, such as ::placeholder:

    import { Stylesheet } from "@essence/react-stylesheet";
    
    //...
    
    <Stylesheet
      styles={{
        "::placeholder": {
          color: "#f00"
        }
      }} />

    Any selector you can use in CSS, you can use with React Stylesheet:

    Commas: "h1,h2,h3"
    Brackets: "input[type=button]"
    etc.

    Media Queries

    React Stylesheet also allows for responsive styling through media queries without loading an external stylesheet:

    import { Stylesheet } from "@essence/react-stylesheet";
    
    //...
    
    <Stylesheet
      styles={{
        "html": {
          backgroundColor: "#fff"
        }
      }},
      mediaQueries={{
        "@media(min-width: 420px)": {
          backgroundColor: "#f00"
        },
        "@media(min-width: 720px)": {
          backgroundColor: "#0f0"
        },
        "@media(min-width: 1200px): {
          backgroundColor: "#00f"
        }
      }} />

    Dynamic Theming

    Use style changes on state trigger to create multiple themes. This can be done through simple toggles, or by switching out larger style objects.

    import { Stylesheet } from "@essence/react-stylesheet";
    
    //...
    
    const [darkMode, setDarkMode] = useState(false);
    
    //...
    
    <Stylesheet
      styles={{
        "html": {
          backgroundColor: darkMode ? "#000" : "#fff"
        },
        ...(darkMode ? darkModeStyles : lightModeStyles)
      }} />

    Server Side Rendering

    React Stylesheet also works on the server:

    import { serverStyle } from "@essence/react-stylesheet";
    
    const sheets = [];
    const id = "my-stylesheet";
    const stylesheetString = serverStyle(sheets, id);
    
    const html = `
      <!doctype html>
      <html>
          <head>
              ${stylesheetString}
          </head>
          <body>
              <div>
                  // React stuff here
              </div>
          </body>
      </html>
    `;

    TypeScript

    React Stylesheet comes fully typed:

    import { Sheet, MediaQueries, StyleSet, Style } from "@essence/react-stylesheet";
    
    type Sheet = {
      default?: StyleSet;
      mediaQueries?: MediaQueries;
    }
    
    type MediaQueries = {
      [mediaQuery: string]: StyleSet;
    }
    
    type StyleSet = {
      [selector: string]: Style;
    }
    
    type Style = CSSProperties;
    // This is the same CSSProperties type used by React, which means that all
    // styles which normally work with React components will work with React Stylesheet.

    Utility Functions

    import { combineSheets } from "@essence/react-stylesheet";
    
    const sheet1 = {
      default: {
        "html": {
          backgroundColor: "#fff"
        }
      }
    };
    
    const sheet2 = {
      "@media(min-width: 720px)": {
        "html": {
          backgroundColor: "#000"
        }
      }
    };
    
    const sheet = combineSheets([sheet1, sheet2]);
    // sheet = {
    //   default: {
    //     "html": {
    //       backgroundColor: "#fff"
    //     }
    //   }
    //   "@media(min-width: 720px)": {
    //     "html": {
    //       backgroundColor: "#000"
    //     }
    //   }
    // }

    FAQ

    Why not use an external stylesheet?

    • Controlling your stylesheet in React allows for styles to be created and changed dynamically.

    Why not use the inline style prop provided by React?

    • React Stylesheet adds support for pseudo classes, pseudo elements, and media queries.

    Install

    npm i @essence/react-stylesheet

    DownloadsWeekly Downloads

    2

    Version

    1.2.4

    License

    MIT

    Unpacked Size

    23.8 kB

    Total Files

    20

    Last publish

    Collaborators

    • bconnorwhite