Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Last update: May 30, 2022

Stilr Build Status npm version

Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

  • Unique class names (Content Hash Based)
  • Useable on the server
  • Allows nested pseudo selectors
  • Allows nested media queries
  • No namespacing / Class name collisions.
  • Plays nicely with React Hot Loader and autoprefixer.

...oh, and did I mention you get duplicate style elimination for free?

Note: This library fits really nice with React but should work with other libraries like Angular 2 or Deku

API

object StyleSheet.create(object spec)

Stilr extracts the styles from the style object and returns an object with the same keys mapped to class names.

Example

import StyleSheet from 'stilr';

const palm = '@media screen and (max-width:600px)';

const styles = StyleSheet.create({
  container: {
    color: '#fff',
    ':hover': {                 // Pseudo Selectors are allowed
      color: '#000'
    },
    [palm]: {                   // Media Queries are allowed
      fontSize: 16,
      ':hover': {
        color: 'blue'  		// Pseudo selectors inside media queries.
      }
    }
  }
});

console.log(styles.container);  // => '_xsrhhm' -- (The class name for this style.)

string StyleSheet.render()

Stilr outputs the contents of its internal stylesheet as a string of css

Example

import StyleSheet from 'stilr';

StyleSheet.create({
  container: {
    color: '#fff'
  }
});

const CSS = StyleSheet.render();

console.log(CSS);             // => '._yiw79c{color:#fff;}'

bool StyleSheet.clear()

Clear Stilr internal stylesheet

Example

import StyleSheet from 'stilr';

const styles = StyleSheet.create({
  container: {
    color: '#fff'
  }
});

StyleSheet.clear();

const CSS = StyleSheet.render();

console.log(CSS);             // => ''

Examples

Basic Button Component Example.

Let's start of by creating our styles. If you have ever used React Native, this will be familiar to you:

import StyleSheet from 'stilr';
import { palm } from './breakpoints';
import { color, font } from './theme';

const styles = StyleSheet.create({
  base: {
    transition: 'background-color .25s',
    borderRadius: 2,
    textAlign: 'center',
    fontSize: 20,
    padding: 6,
    color: '#fff',
    border: `${ color.border } 1px solid`,
    [palm]: {
      fontSize: 18
    }
  },
  primary: {
    backgroundColor: color.primary,
    ':hover': {
      color: 'tomato'
    }
  },
  secondary: {
    backgroundColor: 'tomato',
    color: '#eee'
  }
});

Stilr will now generate a set of class names based on the content of your styles and return an object with the same keys mapped to those classes.

Note that you're able to use pseudo selectors and media queries. Pseudo selectors are written like you normally would in CSS, e.g.: :hover, :active, :before etc. Media queries are the same, e.g. palm in the example is just a string: @media screen and (max-width:600px). Any valid media query is allowed.

Since we just have a bunch of class names now, we can use these in our React Component.

import React, { PropTypes } from 'react';

class Button extends React.Component {
  static propTypes = {
    type: PropTypes.oneOf(['primary', 'secondary'])
  }

  render() {
    const { type, children } = this.props;
    const buttonStyles = [
      styles.base,
      styles[ type ]
    ].join(' ');

    return (
      <button className={ buttonStyles }>
        { children }
      </button>
    );
}

Next up, let's render our css and mount our app:

import React from 'react';
import Button from './button';
import StyleSheet from 'stilr';

React.render(
  <Button type='primary' />,
  document.getElementById('root')
);

document.getElementById('stylesheet').textContent = StyleSheet.render();

This step could also have been done on the server. Since StyleSheet.render just returns a string of css. In our case, it would look something like this in a prettified version:

@media screen and (max-width:600px) {
  ._82uwp6 {
    font-size: 18px;
  }
}

._82uwp6 {
  transition: background-color .25s;
  border-radius: 2px;
  text-align: center;
  font-size: 20px;
  padding: 6px;
  color: #fff;
  border: #fff 1px solid;
}

._11jt6vs:hover {
  color: tomato;
}

._11jt6vs {
  background-color: red;
}

._1f4wq27 {
  background-color: tomato;
  color: #eee;
}

In case you were wondering: Yes, this would would be an ideal place to add something like autoprefixer, minification etc.

Duplicate Style Elimation

import StyleSheet from 'stilr';

const styles = StyleSheet.create({
  same: {
    fontSize: 18,
    color: '#000'
  },
  sameSame: {
    fontSize: 18,
    color: '#000'
  }
});

console.log( styles.same );        => '_1v3qejj'
console.log( styles.sameSame );    => '_1v3qejj'

...magic.

Under the hood, stilr creates class names based on a content hash of your style object which means that when the content is the same, the same hash will always be returned.

Extracting your styles.

Server

If you do serverside rendering, you should be able to extract your styles right after you load your app.

import React from 'react';
import StyleSheet from 'stilr';
import App from '../your-app.js';

const css = StyleSheet.render();
const html = React.renderToStaticMarkup(<App />);

// Extract css to a file or insert it in a file at the top of your html document

Apply autoprefixer here, or other preprocess goodness here. If you're really fancy, you only do the required autoprefixes based on the user agent.

Development

When working with Stilr in development, the preferred way to extract styles would be the following way, just before you initialize your app.

import App from '../app';
import React from 'react';
import StyleSheet from 'stilr';

let stylesheet = document.createElement('style');
stylesheet.textContent = StyleSheet.render();
document.head.appendChild(stylesheet);

React.render(<App />, document.getElementById('root'));

React Hot Loader + Autoprefixer

If you're using React Hot Loader. Use the following approach in development to get hot loading styles and autoprefixer awesomeness.

import React from 'react';
import StyleSheet from 'stilr';
import autoprefixer from 'autoprefixer';
import postcss from 'postcss';


// Make sure you have a style element with the ID: 'stylesheet' in your html.
const stylesheet = document.getElementById('stylesheet');

class App extends React.Component {
   render() {
     if (process.env !== 'production') {
       const prefixedCSS = postcss(autoprefixer()).process( StyleSheet.render() ).css;
       stylesheet.textContent = prefixedCSS;
     }
     
     return (
        ...snip...
     );
   }
}

If you're using Webpack, you have to add node: { fs: 'empty' } to your config file. Otherwise autoprefixer will throw an error when trying to use it on the client.

Production

Makefile

Add this as a build step in your makefile.

./bundle.css ">
extract-styles:
	@node -p "require('babel/register')({ignore: false}); var s = require('stilr'); require('./your-app.js'); s.render()" > ./bundle.css

The following snippet can also be executed anywhere to extract the styles. Remember to replace ./your-app.js with the entry file of your app. node -p "require('babel/register')({ignore: false}); var s = require('stilr'); require('./your-app.js')

TODO:

  • Remove React as a dependency
  • More examples

GitHub

https://github.com/kodyl/stilr
Comments
  • 1. Support for Maps in isEmpty function. (refactoring)

    Line 93 should check if the styles are empty or not. Until now the isEmpty function only supports objects and no Maps. So this PR adds a Map support to the isEmpty function and replaces:

    if (!isMap && isEmpty(styles)) continue;
    

    with

    if (isEmpty(styles)) continue;
    
    Reviewed by webpapaya at 2016-04-01 07:23
  • 2. React shouldn't be a dependency

    React isn't needed for this module to work + including React as a dependency means under some conditions it'll get required twice which leads to weird bugs.

    Reviewed by KyleAMathews at 2015-07-20 21:23
  • 3. test two levels deep

    sometimes when using both a media query and a pseudo-selector, it may be important to change the styles with the pseudo selector within a media query.

    For this, it is important to support styles that are nested more that one level deep.

    Reviewed by nmn at 2015-05-27 00:29
  • 4. Remove react as a dependency

    This PR closes #12

    This PR adds the missing pieces in order to be able to remove react as a dependency from stilr. I had a look if react really did some module splitting as @ericelliott proposed but sadly the modules we need aren't split up.

    So I decided to reimplement the createMarkup method so we don't rely on react. Before implementing the new create markup I wrote a couple of tests to verify that the new implementation is doing the same things as the old one did. I also went through the source of react to not miss anything.

    One big issue I currently see is the lib/properties.js which is used to detect if a value should be suffixed with a px or not.

    {opacity: 0} => opacity: 0;
    {fontSize: 10} => opacity: 10px;
    

    This list needs to be maintained somehow, because it's currently just copied and pasted from the react source. Therefor the copyright license is added at the top of this file (I have no idea if we need this).

    Reviewed by webpapaya at 2016-04-02 22:32
  • 5. export Map

    In my case I need this bacuase the instanceof Map checks in separate files doesn't work at the moment. Maybe there are some incompatible "babel-runtime"s somewhere in the project, but it can be useful in other ways too.

    Reviewed by mpal9000 at 2015-07-27 08:57
  • 6. In hot-load mode, what if doesn't re-render but a child of its does?

    Your suggestion for making Stilr work in a hot-loaded environment is to include some code in the root component of the entire app that re-renders the content of <style>.

    This idea works well, except when: the root component doesn't re-render but a child of its does. Such a case happens, for example, when react-router is used.

    How do you work around this issue? An obvious workaround is to include the code updating <style> in every style-changing component. But this is tedious.

    Am I missing something?

    A better workaround is to make Stilr an EventEmitter. If this idea makes sense to you, I can submit a PR.

    Reviewed by why-jay at 2015-09-05 07:31
  • 7. neccesary nesting?

    Stilr supports pseudo elements by nesting them:

    StyleSheet.create({
      x: {
        color: 'red',
        ':hover': {
          color: 'green'
        }
      }
    })
    

    However, it doesn't work if you don't nest the pseudo selectors:

    StyleSheet.create({
      x: {
        color: 'red',
      },
      'x:hover': {
        color: 'green'
      }
    })
    

    This, creates two keys, with none of them with a :hover pseudo selector.

    Is this on purpose? If not, perhaps it should be documented. (I'll do a pull request, just need your answer first)

    Reviewed by nmn at 2015-06-04 00:14
  • 8. Multiple values using arrays?

    There is a similar project, called JSS (https://github.com/jsstyles/jss) It has this great feature for dealing with the limitation of JS objects with unique keys: https://github.com/jsstyles/jss#multiple-declarations-with-identical-property-names

    I can't think of many situations where this would be useful when already using autoprefixr, but I think it would be a good feature to have to be feature complete.

    Perhaps using JSS would make this simpler, but word of warning, JSS doesn't support features such as nested pseudo selectors and media queries etc.

    Reviewed by nmn at 2015-06-04 00:07
  • 9. v1.2.2 not working on internet explorer

    Currently in version 1.2.2, dist/util.js Number.isInteger is used as is.

    It should be used with babel, so it output something like var _Number$isInteger = require('babel-runtime/core-js/number/is-integer')['default'];

    Currently, it's failing on internet explorer because of that.

    Reviewed by louiscloutierdakis at 2016-04-13 19:55
  • 10. Why use className as interface

    This seems like the strictly the wrong way to inject styles.

    1. Now to apply styles you must set a class attribute
    2. Your class attributes must not consider they don't conflict with your "style class" attributes

    I'd prefer the react-style method, where they shim in a new property (styles) and you pass them in. Or alternatively, why not just have an interface where I can pass them directly into style={}? Or is that already possible?

    Reviewed by natew at 2015-05-30 00:01
  • 11. `content=""` is not rendered properly

    Input

    Stylesheet.create({
      heading: {
        ':before': {  content: "" }
      }
    });
    

    Output

    ._3TCwqu:before{content:;}
    

    Expected Output

    ._3TCwqu:before{content:"";}
    

    I don't know if we can generalize this concept for empty strings that they're rendered as "" or if content should have a special behaviour?

    Reviewed by webpapaya at 2016-04-29 12:12
  • 12. Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-11 21:08
  • 13. Bump normalize-url from 4.5.0 to 4.5.1

    Bumps normalize-url from 4.5.0 to 4.5.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-06-10 20:30
  • 14. Bump browserslist from 4.8.3 to 4.16.6

    Bumps browserslist from 4.8.3 to 4.16.6.

    Changelog

    Sourced from browserslist's changelog.

    4.16.6

    • Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

    4.16.5

    • Fixed unsafe RegExp (by Yeting Li).

    4.16.4

    • Fixed unsafe RegExp.
    • Added artifactory support to --update-db (by Ittai Baratz).

    4.16.3

    • Fixed --update-db.

    4.16.2

    4.16.1

    • Fixed Chrome 4 with mobileToDesktop (by Aron Woost).

    4.16

    • Add browserslist config query.

    4.15

    • Add TypeScript types (by Dmitry Semigradsky).

    4.14.7

    • Fixed Yarn Workspaces support to --update-db (by Fausto Núñez Alberro).
    • Added browser changes to --update-db (by @​AleksandrSl).
    • Added color output to --update-db.
    • Updated package.funding to have link to our Open Collective.

    4.14.6

    • Fixed Yarn support in --update-db (by Ivan Storck).
    • Fixed npm 7 support in --update-db.

    4.14.5

    • Fixed last 2 electron versions query (by Sergey Melyukov).

    4.14.4

    • Fixed Unknown version 59 of op_mob error.

    4.14.3

    • Update Firefox ESR.

    4.14.2

    • Fixed --update-db on Windows (by James Ross).
    • Improved --update-db output.

    4.14.1

    • Added --update-db explanation (by Justin Zelinsky).

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-25 23:34
  • 15. Bump lodash from 4.17.15 to 4.17.21

    Bumps lodash from 4.17.15 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-10 23:38
  • 16. Bump hosted-git-info from 2.8.5 to 2.8.9

    Bumps hosted-git-info from 2.8.5 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    2.8.8 (2020-02-29)

    Bug Fixes

    • #61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66

    2.8.7 (2020-02-26)

    Bug Fixes

    • Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62
    • Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60

    2.8.6 (2020-02-25)

    Commits
    • 8d4b369 chore(release): 2.8.9
    • 29adfe5 fix: backport regex fix from #76
    • afeaefd chore(release): 2.8.8
    • 5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
    • 7440afa chore(release): 2.8.7
    • 2d0bb66 fix: Do not attempt to use url.URL when unavailable
    • f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
    • e1b83df chore(release): 2.8.6
    • ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-05-09 06:07
  • 17. Bump ini from 1.3.5 to 1.3.8

    Bumps ini from 1.3.5 to 1.3.8.

    Commits
    • a2c5da8 1.3.8
    • af5c6bb Do not use Object.create(null)
    • 8b648a1 don't test where our devdeps don't even work
    • c74c8af 1.3.7
    • 024b8b5 update deps, add linting
    • 032fbaf Use Object.create(null) to avoid default object property hazards
    • 2da9039 1.3.6
    • cfea636 better git push script, before publish instead of after
    • 56d2805 do not allow invalid hazardous string as section name
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for ini since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2020-12-12 05:00
Related tags
Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS.

Stail Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS. Why it's needed? First of all, I'm tired fr

Jun 18, 2022
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??️ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

May 6, 2022
🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!

Aesthetic Start using Aesthetic now! aestheticsuite.dev Aesthetic is an end-to-end, multi-platform styling and design suite, that offers the following

Jun 14, 2022
Court.css - A naive CSS Utility framework based on JSX and css custom properties

court.css ?? A (work in progress) JSX-based, CSS utility framework with a predic

Mar 14, 2022
A toolchain for React component styling.

Radium yarn add radium # or npm install --save radium Radium is a set of tools to manage inline styles on React elements. It gives you powerful stylin

Jun 23, 2022
TailwindCSS plugin that helps styling radix state

TailwindCSS Radix TailwindCSS plugin that helps styling radix state. Installation yarn yarn add tailwindcss-radix npm npm i tailwindcss-radix Usage Yo

Jun 22, 2022
Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021
Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

Jun 21, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Jun 19, 2022
JSS is an authoring tool for CSS which uses JavaScript as a host language.

JSS A lib for generating Style Sheets with JavaScript. For documentation see our docs. Backers Support us with a monthly donation and help us continue

Jun 23, 2022
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ?? Looking for v5? The master branch is un

Jun 27, 2022
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Jun 20, 2022
Seamless mapping of class names to CSS modules inside of React components.
Seamless mapping of class names to CSS modules inside of React components.

React CSS Modules React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global un

Jun 19, 2022
Vite plugin that emulates Scoped CSS for React components

vite-react-css Vite plugin that emulates Scoped CSS for React components (using generated class names) Compatible with SSR Automatic code-splitting Ho

Feb 7, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

Feb 27, 2022
Typograpy components for react and styled-components
Typograpy components for react and styled-components

styled-typography Typograpy components for react and styled-components styled-typography is a small set of components, using styled-components, to bet

May 1, 2022
CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version >= IE6* Demo The best s

Jun 21, 2022
🏠 Airbnb website using React, Next.js and Tailwind CSS
🏠 Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

May 2, 2022
CSS-in-JS solution with style-to-state bindings, SSR, and a next-level developer experience.

A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SRR and next-level developer experience. It includes a framework-agnostic implementation

Mar 23, 2022