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

    styled-components-mixins

    0.0.5 • Public • Published

    This project is a part of *-mixins, with goal to provide a better CSS experience to the React infected people.

    Install

    NPM

    Use

     // import classes you need from the library you need.
     import {class1, class2} from 'styled-components-mixins/{LIBRARY}';
     // use them as mixins
     const Component = styled.div`
        ${class1}
        z-index: 1;
     `;

    Includes:

    if you need more - raise an issue, open a PR, or use webpack`s css-to-js-loader.

    Demo

    Edit Styled Components

    Theory

    Atomic (or Functional) css is quite good methodology, but as long it solves many issues - it also introduces a new one.

    You can create a Button, and you can describe how it must look like.

    <button class="bg-purple f6 br3 ph3 pv2 white hover-bg-light-purple">
      Button Text
    </button>

    But you will soil HTML code with details of behavior. Both css driven by html or html driven by css is bad. Something in the middle - BEM - is also not very usable.

    You can use LESS to combine all modificators, to have single control point

    .bg-purple{
      .f6;
      .br3; 
      .ph3; 
      .pv2; 
      .white;  
      .hover-bg-light-purple;
    }

    But result CSS will be HUGE.

    But you can use client-side CSS framework, to do the same. To get a Component. And you will love the result.

    const Button = styled.button`
      ${f6};
      ${br3}
      ${ph3}
      ${pv2}
      ${white};  
      ${hover-bg-light-purple};
    `

    Limitations

    *-Mixins can provide only mixins. A single class, style, or an atom.

    If some library has selector like:

      .someclass .someanotherClass

    *-Mixins will provide only .someclass, and adding .someanotherClass to the html markup - is your duty. No magic.

    Naming conversion

    One cannot use real css names in js, so we have to convert names to a js-friendly format:

    • ".class" becomes class
    • "tag" becomes tag_tag
    • "#id" becomes $id
    • "hover-bg" becomes hover_bg
    • "block--element" becomes block$$element
    • ".class.anotherclass" becomes class_and_anotherclass

    Prior art

    Idea was found here - https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

    This is just an adoptation for a different style of CSS generation.

    idea

    Licence

    MIT

    Keywords

    none

    Install

    npm i styled-components-mixins

    DownloadsWeekly Downloads

    5

    Version

    0.0.5

    License

    MIT

    Last publish

    Collaborators

    • avatar