Nerds Publishing Monstrosities
    Wondering what’s next for npm?Check out our public roadmap! »

    free-style
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.0 • Public • Published

    Free-Style

    NPM version NPM downloads Build status Test coverage Bundle size

    Free-Style is designed to make CSS easier and more maintainable by using JavaScript.

    Installation

    npm install free-style --save
    

    Why?

    There's a great presentation by Christopher Chedeau you should check out.

    Solved by using CSS in JS

    • No global variables (What and where is .button? Why is it conflicting?)
    • Defined dependency systems (CommonJS, Require.js, <script />)
    • Dead code elimination automatically removes unused styles
    • Minification through JavaScript tooling
    • Shared constants and reusable styles
    • Every style is isolated, tested and namespaced to the JS component
    • Extensible - everything from Math to color manipulation already exists!

    Also solved with Free-Style

    • Works with third-party DOM components (You can nest regular .class-name in your styles)
    • Consistently generates styles and class names, and will automatically merge duplicate styles
    • Develop components alongside the style (No more hunting CSS files for estranged ul > li > a)
    • Create universal applications and serve styles for only the components rendered (see React Free-Style)
    • Use the CSS you already know ({ '&:hover': { ... } })
    • Automatically namespace @-rule styles ({ '@media (min-width: 500px)': { ... } })
    • Overload CSS properties using arrays ({ backgroundColor: ['red', 'linear-gradient(to right, red 0%, blue 100%)'] })
    • Small and powerful API that works with any ecosystem (~360 SLOC)

    But How?

    Free-Style generates a consistent hash from the style, after alphabetical property ordering and formatting, to use as the class name. This allows duplicate styles to automatically be merged on duplicate hashes. Every style is "registered" and assigned to a variable, which gets the most out of linters that will warn on unused variables and features like dead code minification. Using "register" returns the class name used for the Style instance and style instances (returned by create()) can be merged together at runtime to output only the styles on page (e.g. React Free-Style). Styles should usually be created outside of the application run loop (e.g. render()) so the CSS string and hashes are only generated once.

    Ways to Use

    • typestyle - Popular type-safe interface for working with CSS
    • react-free-style - React implementation that renders styles on the current page (for universal apps)
    • stylin - Simplest abstraction for creating styles, rules, and keyframes, and keeps <style /> in sync
    • ethcss - Library for writing CSS with literal objects
    • This module! - Manually create, compose and manipulate style instances

    Usage

    var FreeStyle = require("free-style");
    
    // Create a stylesheet instance.
    var Style = FreeStyle.create();
    
    // Register a new style, returning a class name to use.
    var backgroundStyle = Style.registerStyle({
      backgroundColor: "red",
    }); //=> "f14svl5e"
    
    // Inject `<style>` into the `<head>`.
    var styleElement = document.createElement("style");
    styleElement.textContent = Style.getStyles();
    document.head.appendChild(styleElement);
    
    // Render the style by using the class name.
    React.render(
      <div className={backgroundStyle}>Hello world!</div>,
      document.body
    );

    Style

    var buttonStyle = Style.registerStyle({
      $displayName: "button",
      backgroundColor: "red",
      padding: 10,
    });
    
    console.log(buttonStyle); //=> "button_f65pi0b"

    Tip: The string returned by registerStyle is a unique hash of the content and used as the HTML class name. The $displayName is only used during development, and stripped in production (process.env.NODE_ENV === 'production').

    Overload CSS Properties

    Style.registerStyle({
      background: [
        "red",
        "-moz-linear-gradient(left, red 0%, blue 100%)",
        "-webkit-linear-gradient(left, red 0%, blue 100%)",
        "-o-linear-gradient(left, red 0%, blue 100%)",
        "-ms-linear-gradient(left, red 0%, blue 100%)",
        "linear-gradient(to right, red 0%, blue 100%)",
      ],
    }); //=> "f1n85iiq"

    Nested Rules

    Style.registerStyle({
      color: "red",
      "@media (min-width: 500px)": {
        //=> "@media (min-width: 500px){.fk9tfor{color:blue}}"
        color: "blue",
      },
    }); //=> "fk9tfor"

    Nested Selectors

    Style.registerStyle({
      color: "red",
      ".classy": {
        //=> ".fc1zv17 .classy"
        color: "blue",
      },
    }); //=> "fc1zv17"

    Parent Selector Reference

    Style.registerStyle({
      color: "red",
      "&:hover": {
        //=> ".f1h42yg6:hover"
        color: "blue",
      },
    }); //=> "f1h42yg6"

    Tip: The ampersand (&) will be replaced by the parent selector at runtime.

    Use JavaScript

    const ellipsisStyle = {
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis",
    };
    
    const redEllipsisStyle = Style.registerStyle({
      color: "red",
      ...ellipsisStyle,
    }); //=> "fvxl8qs"
    
    // Share rule between styles using computed properties.
    const mediaQuery = "@media (min-width: 400px)";
    
    const style = Style.registerStyle({
      backgroundColor: "red",
      [mediaQuery]: {
        backgroundColor: "pink",
      },
    });

    Unique Style Output

    Sometimes you need to skip the de-duping behavior of free-style. Use $unique to force separate styles:

    Style.registerStyle({
      color: "blue",
      "&::-webkit-input-placeholder": {
        color: `rgba(0, 0, 0, 0)`,
        $unique: true,
      },
      "&::-moz-placeholder": {
        color: `rgba(0, 0, 0, 0)`,
        $unique: true,
      },
      "&::-ms-input-placeholder": {
        color: `rgba(0, 0, 0, 0)`,
        $unique: true,
      },
    }); //=> "f13byakl"
    
    Style.getStyles(); //=> ".f13byakl{color:blue}.f13byakl::-webkit-input-placeholder{color:rgba(0, 0, 0, 0)}.f13byakl::-moz-placeholder{color:rgba(0, 0, 0, 0)}.f13byakl::-ms-input-placeholder{color:rgba(0, 0, 0, 0)}"

    Rules

    const colorAnimation = Style.registerStyle({
      $global: true,
      "@keyframes &": {
        from: { color: "red" },
        to: { color: "blue" },
      },
    }); //=> "h1j3ughx"
    
    const style = Style.registerStyle({
      animationName: colorAnimation,
      animationDuration: "1s",
    }); //=> "fibanyf"

    Global Rules

    Style.registerStyle({
      $global: true,
      "@font-face": {
        fontFamily: '"Bitstream Vera Serif Bold"',
        src: 'url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf")',
      },
    });
    
    Style.registerStyle({
      $global: true,
      "@media print": {
        body: {
          color: "red",
        },
      },
    });
    
    Style.registerStyle({
      $global: true,
      body: {
        margin: 0,
        padding: 0,
      },
    });

    Global Styles

    Style.registerStyle({
      $global: true,
      body: {
        margin: 0,
        padding: 0,
        "@print": {
          color: "#000",
        },
      },
      h1: {
        fontSize: "2em",
      },
    });

    CSS String

    Style.getStyles(); //=> ".f65pi0b{background-color:red;padding:10px}"

    Useful Libraries

    Implementation Details

    Debugging

    Display names will automatically be removed when process.env.NODE_ENV === "production".

    Changes

    The only argument to create() is a map of change function handlers. All functions are required:

    • add(style: Container<any>, index: number)
    • change(style: Container<any>, oldIndex: number, newIndex: number)
    • remove(style: Container<any>, index: number)

    All classes implement Container, so you can call getStyles(), clone() or get id.

    Other Properties and Methods

    var OtherStyle = Style.create();
    
    Style.merge(OtherStyle); // Merge the current styles of `OtherStyle` into `Style`.
    Style.unmerge(OtherStyle); // Remove the current styles of `OtherStyle` from `Style`.

    Legacy Browsers

    Version 3 requires support for class, see #82. As of April 2020, that's 95% of browsers. You can import from free-style/dist.es5 for a version compatible with ES5 (IE 11).

    License

    MIT

    Install

    npm i free-style

    DownloadsWeekly Downloads

    53,982

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    277 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar