npm:@atomico/atomcss

README

@atomico/atomcss

It is an agnostic css-in-js, allows to create static styles and encapsulated by a class name generated by Atomcss.

Atomcss has a minimalist syntax inspired by SASS, but focused on the creation of components.

Syntax example

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed')
    
@global
    body
        font-family: 'Roboto Condensed', sans-serif
width: 500px
height: 500px
&:hover
    background:black

@media (max-width: 320px)
    width: 100%
    height: 100%
    box-shadow: 
        0px 0px 12px red
        0px 0px 12px black

::alert
    background:tomato

::success	
    background:teal

Example of use

let button = css`
    padding: 1rem 1.5rem
    background: transparent
    border: none
    &:hover
        background: black
        color: white
    ::alert
        color: white
        background: tomato
        &:hover
            background: tomato
`;

document.querySelector("#button").className = button;
document.querySelector("#button-alert").className = button({alert:true});

Example of use with JSX

import {h} from "@atomico/core";
import {css} from "@atomico/atomcss";

let button = css`
    padding: 1rem 1.5rem
    background: transparent
    border: none
    &:hover
        background: black
        color: white
    ::alert
        color: white
        background: tomato
        &:hover
            background: tomato
`;

export default function Button(props){
    return <button class={button({alert:props.alert})}>
        {props.children}
    </button>
}

types of selectors

state selectors

The state selectors declare with the prefix :: and their depth must not be nested, these selectors allow adding a conditional class.

let myStyles = css`
::state1
    color:red
::state2
    color:orange
::state3
    color:yellow
`

myStyles({state1:1}) // classname classname-state1
myStyles({state1:1,state2:1}) // classname classname-state1 classname-state2

states can be more complex than taught, since it is only a scope selector.

@keyframe

Animations declared with Atomcss do not have a global definition.

@keyframes 5s linear 2s infinite alternate
    0%
        background-color:red
        left:0px
        top:0px
    25%
        background-color:yellow
        left:200px
        top:0px
    50%
        background-color:blue
        left:200px
        top:200px
    75%
        background-color:green 
        left:0px
        top:200px
    100% 
        background-color:red
        left:0px
        top:0px

media

the media query are simpler to declare

::state1
    @media (max-width:320px)
        width:100%
        height:auto
    @media (max-width:720px)
        width:50%
        height:auto

utils

vscode-styled-jsx-stylus, it is designed for stylus, it allows highlight the syntax, but do not pose autocomplete.

Usage no npm install needed!