Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nyancss/nyancss
🌈 Write plain CSS while reaping benefits of CSS-in-JS
https://github.com/nyancss/nyancss
css css-modules preact react styled-components webpack
Last synced: 21 days ago
JSON representation
🌈 Write plain CSS while reaping benefits of CSS-in-JS
- Host: GitHub
- URL: https://github.com/nyancss/nyancss
- Owner: nyancss
- Created: 2017-06-21T15:20:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T06:37:12.000Z (almost 2 years ago)
- Last Synced: 2024-05-21T12:28:51.814Z (6 months ago)
- Topics: css, css-modules, preact, react, styled-components, webpack
- Language: TypeScript
- Homepage: https://nyancss.com
- Size: 1.06 MB
- Stars: 555
- Watchers: 6
- Forks: 13
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌈 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](#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](#convention)** | **[Join the community](https://spectrum.chat/nyancss)**
## Installation
See [installation instructions for webpack](https://github.com/nyancss/nyancss-css-modules-loader#installation).
## Demo
### CSS
```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:
- [Plain HTML](#plain-html)
- [Vue.js](#vuejs)
- [Preact](#preact)
- [Class names](#class-names)
```jsx
import React from 'react'
import { Header, Text } from './style.css'
function Announcement() {
return (
<>
Welcome Nyan CSS!
Please, welcome Nyan CSS!
>
)
}
```
### Result
### Other options
Show all options
#### Plain HTML
```html
Welcome Nyan CSS!
Please, welcome Nyan CSS!
```
#### Vue.js
```js
import Vue from 'vue'
import { Header, Text } from './style.css'
const Announcement = {
components: {
'custom-header': Header,
'custom-text': Text
},
template: `
Welcome Nyan CSS!!
Please, welcome Nyan CSS!
`
}
```
#### Preact
```jsx
import { h } from 'preact'
import { Header, Text } from './style.css'
function Announcement() {
return (
<>
Welcome Nyan CSS!
Please, welcome Nyan CSS!
>
)
}
```
#### Class names
```js
import { Header, Text } from './style.css'
function Announcement() {
return `
Welcome Nyan CSS!
Please, welcome Nyan CSS!
`
}
```
## Convention
### Component
`.Component` is a component class.
_The name must be in ClassCase, e.g. `.FormInput` or `.UI`._
In this example, `.Button` represents ``.
```css
.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`._
```css
.Button-disabled {
opacity: 0.5;
}
```
In the example, `.Button-disabled` is applied to the component when its `disabled` prop is truthy:
```jsx
Whatever
```
### 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`._
```css
.Button-color-red {
background: red;
}
.Button-color-green {
background: green;
}
```
`.Button-color-red` is applied to the component when its `color` prop equals `"red"`:
```jsx
Click Me
```
## Related packages
- [@nyancss/css-modules-loader](https://github.com/nyancss/nyancss-css-modules-loader) - the webpack loader for CSS Modules.
- [@nyancss/css-modules](https://github.com/nyancss/nyancss-css-modules) - the package used to convert CSS Modules to Nyan CSS.
- [@nyancss/react](https://github.com/nyancss/nyancss-react) - the package used to convert Nyan CSS to React/Preact components.
- [@nyancss/vue](https://github.com/nyancss/nyancss-vue) - the package used to convert Nyan CSS to Vue.js components.
- [@nyancss/class-names](https://github.com/nyancss/nyancss-class-names) - the package used to convert Nyan CSS to class names functions.
## Changelog
See [the changelog](./CHANGELOG.md).
## License
[MIT © Sasha Koss](https://kossnocorp.mit-license.org/)