npm package: @iyio/at-dot-css
Description: A fast and lightweight css-in-js library. The at-dot-css is a superset of css with a few simple additions to make it a little easier to scope component styles, work with variables and define responsive breakpoints.
Latest version: 0.8.18

# at-dot-css
A fast and lightweight css-in-js library. The at-dot-css is a superset of css with a few simple
additions to make it a little easier to scope component styles, work with variables and define
responsive breakpoints.

The syntax is designed to be vary simple to implement, only requiring a simple find and
replace algorithm which keeps parsing times to a minimum. There is no nesting, functions or mixins,
just good old css with a couple of extra goodies 🤓

## Usage
AtDot styles are defined using the `atDotCss` function. The `atDotCss` function returns a ParseAtDotStyle
object with functions that correspond to each of the `@.` selectors defined in the style. After the
first call to a selector function the style is parsed and a new style sheet is inserted into the
head of the document or added to a custom style sheet renderer.


![at-dot-css example](https://raw.githubusercontent.com/iyioio/common/main/assets/at-dot-css/at-dot-example.png)
*(note - css-in-js syntax highlighting is provided by the `high-js` vscode extension)*

The css in the example above is converted to the css below.
``` css
.Example{
    display:flex;
    flex-direction:row;
    align-items:center;
    padding:1rem;
    border-radius:12px;
    border:1px solid var(--Example-color);
    gap:1rem;
}

.Example-header{
    margin:0;
}

.Example-button{
    border:none;
    background-color:#ccc;
    padding:1rem;
    border-radius:12px;
}
.Example-button.active{
    background-color:var(--Example-color);
}

@media(max-width:768px){
    .Example{
        flex-direction:column;
        align-items:flex-start;
    }
}
```


## Using with NextJs
When using at-dot-css in a NextJS project and rending server side or at build time styles are added
to a style queue that is then rendered using the `NextJsStyleSheets` component from the
`@iyio/nextjs-common` package. Using the `NextJsStyleSheets` component allows css generated by
at-dot-css to be included in the css bundles generated by NextJs.

## Installation
``` sh
npm install @iyio/at-dot-css
```

## Configuration
There is no configuration 🥹, no extra build steps, no messing with webpack. Just install the package
and start using it 🥳

## The Syntax
All the code examples below assume the name of the current style is "Example".

### Root Selector
`@.root`  - The root selector is replaced with the current style name.

``` css
/* at-dot */
@.root{
    padding:1rem;
}

/* converted css*/
.Example{
    padding:1rem;
}
```


### Named Selector
`@.{selector-name}` - Named selectors are prefixed with the name of the current style.

``` css
/* at-dot */
@.title{
    margin:1rem 0;
}

/* converted css*/
.Example-title{
    margin:1rem 0;
}
```

### Variables
`@@{variable-name}` - Variable names are prefixed with the current style name and wrapped in a var function call.

``` css
/* at-dot */
.some-name{
    color:@@color;
    width:calc( 100% - @@extraMargin )
}

/* converted css*/
.some-name{
    color:var(--Example-color);
    width:calc( 100% - var(--Example-extraMargin) )
}
```
*(note - when using vars in calculations a space after the var name is required for typescript intellisense to function correctly)*

### Breakpoint Media Queries
`@{break-point}` - Breakpoint media queries allow you to quickly define media queries for standard
breakpoints.

``` css
/* at-dot */
@tabletSmDown{
    .my-component{
        flex-direction:column;
    }
}
@tabletSmUp{
    .my-title{
        font-size:2rem;
    }
}

/* converted css*/
@media(max-width:768px){
    .my-component{
        flex-direction:column;
    }
}
@media(min-width:577px){
    .my-title{
        font-size:2rem;
    }
}
```

Breakpoints:
- `@mobileSmUp` - Small mobile breakpoint and up - (all breakpoints)
- `@mobileUp` - Mobile breakpoint and up
- `@tabletSmUp` - Small tablet breakpoint and up
- `@tabletUp` - Tablet breakpoint and up
- `@desktopSmUp` - Small desktop breakpoint and up
- `@desktopUp` - Desktop breakpoint and up
- `@mobileSmDown` - Small mobile breakpoint and down
- `@mobileDown` - Mobile breakpoint and down
- `@tabletSmDown` - Small tablet breakpoint and down
- `@tabletDown` - Tablet breakpoint and down
- `@desktopSmDown` - Small desktop breakpoint and down
- `@desktopDown` - Desktop breakpoint and down - (all breakpoints)


## Syntax Highlighting
Syntax highlighting is provided using the [high-js](https://marketplace.visualstudio.com/items?itemName=IYIO.high-js) vscode extension


## Type Safety
When using at-dot-css with TypeScript you get full type safety and intellisense.

![intellisense](https://raw.githubusercontent.com/iyioio/common/main/assets/at-dot-css/intellisense.png)