# StyleD CSS

Styled CSS is support in web atoms, in following ways. You can utilize vs code extension for styled to enable intellisense.

### Support
1. Comments are not supported.
2. Only selector expansion with & sign is suppported.
3. You can use simple expressions inside template literal. But there is no support for props.

## Local
Local installation should only be used for end Pages, and not for reusable components as selectors in this style will be prefixed with `styled-r${id}` id and it will be automatically generated.

```tsx
const css = styled.css `
    display: grid;
    & > button {
        background-color: blue;
        color: white;
        cursor: pointer;
        text-decoration: ${ isMobileView ? "underline" : "none" }
    }
`.installLocal();

export default class TaskList extends ContentPage {

    public async init() {
        // apply the class here..
        this.render(<div class={css}>
        </div>);
    }

}

```

The above code will translate to,
```html
<style>
.styled-r1 {
    display: grid;
}
.styled-r1 > button {
    background-color: blue;
    color: white;
    cursor: pointer;
    text-decoration: ... ;
}
</style>
```

Text decoration in above example will be different based on the evaluation.


## Global

```jsx
// intellisense will not work if styled.css does not have tab before it.
    styled.css `
        html,body {
            margin: 0;
            padding: 0;
        }
        button {
            background-color: transparent;
            & > img {
                border: none;
            }
        }
    `.installGlobal();
```

The method `installGlobal` will install this css globally as it is. It will expand `&` prefixed selectors.

The above code will result in following css
```html
<style>
html,body {
    margin: 0;
    padding: 0;
}
button {
    background-color: transparent;
}
button > img {
    border: none;
}
</style>
```

## Global Selector
To create reusable components, we recommend using `data-component` attribute and create styled css with this attribute name instead of class. Since class has highest specificity, class name should be used mostly on the end page.

For exmaple, we will create a calendar style, in a reusable `Calendar` component.

```jsx
    styled.css `
        display: grid;
        ...
        & > [data-element=week-day] {
            background-color: gray;
            
        }
    `.installGlobal("[data-component-calendar]");
```

Above code will translate into following.
```html
<style>
[data-component-calendar] {
    display: grid;
    ...
}
[data-component-calendar] > [data-element=week-day] {
    background-color: gray;
}
</style>
```

# Sample
For more, please visit,
https://stackblitz.com/~/github.com/web-atoms-samples/styled-css