@geekie/css

    1.0.0 • Public • Published

    @geekie/css

    npm License Travis Codecov Prettier

    A simple CSS-in-JS solution that extracts CSS files.

    About

    This library was created at Geekie when we started porting parts of our RN app to a web version. We evaluated most existing libraries and none would accomplish all our requirements:

    • extract final CSS to a static file
    • an API very similar to RN styling
    • support for dynamic styles

    Usage

    A simple example of the API:

    import { StyleSheet, css } from "@geekie/css";
    
    const styles = StyleSheet.create({
      header: {
        fontSize: 18,
        fontWeight: "bold"
      },
      bordered: {
        border: "1px solid #000"
      }
    });
    
    function Header({ children }) {
      return (
        <span className={css(styles.header, styles.bordered)}>{children}</span>
      );
    }

    When used with our Webpack plugin, the StyleSheet.create() call will be replaced by a simple object, where the keys are kept and each value is a string of [atomic classnames] separated by an space. Each classname correspond to a single style defined in the object passed to StyleSheet.create. See the following output for an illustration:

    import { css } from "@geekie/css";
    
    // these classnames are just an example
    const styles = {
      header: "gkcss0_a4bcdef gkcss1_b9cdk4l",
      bordered: "gkcss2_a84ifj"
    };
    
    function Header({ children }) {
      return (
        <span className={css(styles.header, styles.bordered)}>{children}</span>
      );
    }

    And the css() function will select one classname from each "type", to prevent non-deterministic behavior caused by the order of CSS rules order.

    In the cases where the styles can't be computed statically, the StyleSheet.create() will simply return the first argument, and when the css() function receives an object as argument, it will fallback to add class dynamically, very similar to the [glamor] (and others) behavior. An example:

    css(
      // assume these are the output of a `StyleSheet.create()` call
      "gkcss0_a4bcdef gkcss1_b9cdk4l",
      "gkcss0_g83nvn",
    
      // these are dynamic styles
      { color: "red" },
      { fontFamily: "Verdana", color: "black" }
    );

    The call above will return:

    "gkcss0_g83nvn gkcss1_b9cdk4l css-839fn39"

    And a corresponding CSS rule will be created:

    .css-839fn39 {
      font-family: Verdana;
      color: black;
    }

    Webpack integration

    In order to benefit from the build time CSS compilation, you need to use the companion loader and plugin. Example:

    // webpack.config.js
    
    const GkCssPlugin = require("@geekie/css/webpack");
    
    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            use: [
              // we recommend adding the loader as the last loader
              {
                loader: GkCssPlugin.loader,
                options: {
                  globals: {
                    // include any globals that may affect the CSS styles
                    // so they can be evaluated statically
                    __DEV__: process.env.NODE_ENV !== "production"
                  }
                }
              }
            ]
          }
        ]
      },
      plugins: [
        // define the filename of the compiled CSS
        new GkCssPlugin("style.css")
      ]
    };

    TODO

    • Manage "conflicts" between general vs specific styles (e.g. border vs border-left)

    Install

    npm i @geekie/css

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    35.9 kB

    Total Files

    21

    Last publish

    Collaborators

    • zonetti
    • mattbarros
    • izabelamelo
    • thomaz.morais
    • carlateo
    • leocpadua
    • rsalmeidafl
    • danielbucher
    • duailibe