GitHub - kossnocorp/decss: ? Converts CSS modules into components ??
source link: https://github.com/kossnocorp/decss
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
.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
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
or .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
- @nyancss/css-modules-loader - the webpack loader for CSS Modules.
- @nyancss/css-modules - the package used to convert CSS Modules to Nyan CSS.
- @nyancss/react - the package used to convert Nyan CSS to React/Preact components.
- @nyancss/vue - the package used to convert Nyan CSS to Vue.js components.
- @nyancss/class-names - the package used to convert Nyan CSS to class names functions.
Changelog
See the changelog.
License
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK