Skip to content
🌈 Write plain CSS while reaping benefits of CSS-in-JS
TypeScript Makefile JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Hello, cruel world! Jun 3, 2019
docs Write docs Aug 8, 2019
src Extract utils to a package Jun 10, 2019
.gitignore Hello, cruel world! Jun 3, 2019
.prettierrc Hello, cruel world! Jun 3, 2019
Makefile Write docs Aug 8, 2019
README.md Fix another typo in README Aug 9, 2019
babel.config.js Hello, cruel world! Jun 3, 2019
jest.config.js Hello, cruel world! Jun 3, 2019
package.json Extract utils to a package Jun 10, 2019
tsconfig.json Hello, cruel world! Jun 3, 2019
yarn.lock Extract utils to a package Jun 10, 2019

README.md

🌈 Nyan CSS

Best of both worlds. Nyan CSS lets you write plain CSS while reaping benefits of CSS-in-JS.

Write a universal design system. You can reuse the same code anywhere starting from static HTML+CSS and ending with React and Vue.js without actually changing the CSS.

Minimalistic. BEM-inspired Nyan CSS convention consists just of 3 rules but it as bulletproof as BEM.

Use modern CSS. CoffeeScript long gone from the radars, yet we all loved it ;-) Stick to the platform to ensure the longevity of your code.

Skip to the convention | Join the community

Installation

See installation instructions for webpack.

Demo

CSS

.Header,
.Text {
  font-family: monospace;
}

.Header {
  font-size: 2rem;
}

.Header-size-large {
  font-size: 2.2rem;
}

.Text-italic {
  font-style: italic;
}

React code

See other options:

import React from 'react'
import { Header, Text } from './style.css'

function Announcement() {
  return (
    <>
      <Header tag="h1" size="large">
        Welcome Nyan CSS!
      </Header>
      <Text tag="marquee" italic>
        Please, welcome Nyan CSS!
      </Text>
    </>
  )
}

Result

A page in a browser with large "Welcome Nyan CSS" and moving italic "Please, welcome Nyan CSS!"

Other options

Show all options

Plain HTML

<h1 class="Header Header-size-large">
  Welcome Nyan CSS!
</h1>

<marquee class="Text Text-italic">
  Please, welcome Nyan CSS!
</marquee>

Vue.js

import Vue from 'vue'
import { Header, Text } from './style.css'

const Announcement = {
  components: {
    'custom-header': Header,
    'custom-text': Text
  },

  template: `
    <main>
      <custom-header tag='h1' size='large'>Welcome Nyan CSS!!</custom-header>
      <custom-text tag='marquee' italic='true'>Please, welcome Nyan CSS!</custom-text>
    </main>
  `
}

Preact

import { h } from 'preact'
import { Header, Text } from './style.css'

function Announcement() {
  return (
    <>
      <Header tag="h1" size="large">
        Welcome Nyan CSS!
      </Header>
      <Text tag="marquee" italic>
        Please, welcome Nyan CSS!
      </Text>
    </>
  )
}

Class names

import { Header, Text } from './style.css'

function Announcement() {
  return `
<h1 class='${Header({ size: 'large' })}'>Welcome Nyan CSS!</h1>
<marquee class='${Text({
    italic: true
  })}'>Please, welcome Nyan CSS!</marquee>
`
}

Convention

Component

.Component is a component class.

The name must be in ClassCase, e.g. .FormInput ror .UI.

In this example, .Button represents <Button />.

.Button {
  color: white;
}

Boolean prop

.Component-disabled is a boolean prop class.

The name extension must be in camelCase, e.g. .FormInput-autoFocus or .UI-dev.

.Button-disabled {
  opacity: 0.5;
}

In the example, .Button-disabled is applied to the component when its disabled prop is truthy:

<Button tag="button" disabled>
  Whatever
</Button>

Enum prop

.ComponentName-color-gray is an enum prop class.

The name extensions must be in camelCase, e.g. .FormInput-borderColor-lightGray or .UI-env-dev.

.Button-color-red {
  background: red;
}

.Button-color-green {
  background: green;
}

.Button-color-red is applied to the component when its color prop equals "red":

<Button tag="button" color="red">
  Click Me
</Button>

Related packages

Changelog

See the changelog.

License

MIT Β© Sasha Koss

You can’t perform that action at this time.