# CSS in Marko

## External Stylesheets

### Autodiscovered

Css files are automatically discovered according to Marko's naming conventions.

_style.css_

.foo {
    color: red;
}

_index.marko_

<div class="foo"/>

### Imported

Css files can also be explicitly imported:

_something.css_

.foo {
    color: red;
}

_index.marko_

import "./something.css";

<div class="foo"/>

### CSS Modules

Since you have to use Marko with a bundler and most bundlers are autoconfigured to support css modules for `.module.css`, this should work out of the box. If it is not supported by a bundler there is almost certainly a plugin.

The above methods of including css add the styles globally. CSS Modules allow you to import a css file with scoped class names, so they won't conflict with other styles:

_something.module.css_

.foo {
    color: red;
}

_index.marko_

import styles from "./something.module.css";
<div class=styles.foo/>

## `<style>`

Style tags are externalized as separate css files.

<style>
    .foo {
        color: red;
    }
</style>

<div class="foo"/>

### CSS Modules

If you want scoped styles, you can opt-in to CSS Modules by using a tag variable. This requires your bundler to support it, but again, it should work out of the box.

<style/style>
    .foo {
        color: red;
    }
</style>

<div class=style.foo/>

### Future: Interpolated Values

If you want dynamic styles, just interpolate in a value:

<style>
    .foo {
        color: ${input.color};
    }
</style>
<div class="foo"/>

Marko will compile this to a css custom property and define that property for the component:

<style>
    .foo {
        color: var(--color_kjh4kj24);
    }
</style>
<div class="foo" style=`--color_kjh4kj24: ${input.color}`/>

<details>
<summary>However...</summary>

Depending on the analysis done we may not know which node to apply the `style` attribute to. Dylan has [suggested](https://discord.com/channels/725013179465203793/725021901457457193/987830452247232523) we compile to somrthing like this for the general case:

<!--bundled-->
<style>
    .foo {
        color: var(--color_kjh4kj24);
    }
</style>
<!--inline-->
<style class="tjk23kj234kj23">
  .tjk23kj234kj23 ~ * {
    --color_kjh4kj24: ${input.color}
  }
</style>

The first style with the user's css is bundled as an external file. If there are dynamic values injected, a `<style>` tag is inlined in the output HTML to define those static values.

Concerns:
- Selector performance
- Recursive components with different dynamic values

</details>

## Future: `#css`

We have introduced the concept of directives: compile-time attributes. The `#css` directive would compile to pull its contents out into a `<style>` block that uses CSS Modules, and apply the resulting `class` (and a `style` attribute if there are dynamic values).

<div #css=`color: ${input.color}`/>

compiles to

<style/style_fj2b>
    .lksdf32n {
        color: var(--color_kjh4kj24);
    }
</style>
<div 
    class=style_fj2b.lksdf32n 
    style=`--color_kjh4kj24: ${input.color}`
/>

If you enable PostCSS plugins that support nesting (or any other features), those become available within the `#css` directive:

<a #css=`
   color: $blue_400; 
   &:hover { 
       color: $blue_600
   }
`/>