https://github.com/ryan-haskell/css-in-elm

Write normal CSS, then generate an Elm module with all your class names.
https://github.com/ryan-haskell/css-in-elm

codegen css elm

Last synced: 23 days ago
JSON representation

Write normal CSS, then generate an Elm module with all your class names.

• Host: GitHub
• URL: https://github.com/ryan-haskell/css-in-elm
• Owner: ryan-haskell
• Created: 2023-07-10T14:55:51.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-10T17:24:54.000Z (over 1 year ago)
• Last Synced: 2024-11-27T09:29:30.748Z (27 days ago)
• Topics: codegen, css, elm
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@ryannhg/css-in-elm
• Size: 8.79 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @ryannhg/css-in-elm

> Write normal CSS, then generate an Elm module with all your class names.

## Installation

```sh

npm install -g @ryannhg/css-in-elm

```

## Usage

### Build command

Generates an `.elm` file once, then exits

```sh

# css-in-elm build  

css-in-elm build main.css dist/Css.elm

```

### Watch command

Generates an `.elm` file once, then listens for changes in the

input file, rerunning as edits come in!

```sh

# css-in-elm watch  

css-in-elm watch main.css dist/Css.elm

```

## How it works

1. Your CSS file is parsed into a list of class names

    ```css

    .row {

      display: flex;

    }

    .gap-sm { gap: 0.5rem; }

    .gap-md { gap: 1rem; }

    .gap-lg { gap: 2rem; }

    ```

    ```js

    [ "row", "gap-sm", "gap-md", "gap-lg" ]

    ```

2. Those classnames become functions in a generated Elm module

    ```elm

    -- 🤖 Generated by @ryannhg/css-in-elm ✨ --

    module Css exposing (row, gap_sm, gap_md, gap_lg)

    import Html

    import Html.Attributes

    row : Html.Attribute msg

    row =

        Html.Attributes.class "row"

    gap_sm : Html.Attribute msg

    gap_sm =

        Html.Attributes.class "gap-sm"

    -- ...

    ```

3. You can import those generated functions instead of using `String` values directly.

    ```elm

    -- BEFORE

    import Html exposing (..)

    import Html.Attributes exposing (class)

    main =

        div [ class "row gap-lg" ] [ text "Hello!" ]

    ```

    ```elm

    -- AFTER

    import Css exposing (..)

    import Html exposing (..)

    main =

        div [ row, gap_lg ] [ text "Hello!" ]

    ```

4. If you delete a CSS class later, the Elm compiler will remind you to remove the usage.

    ```txt

    -- NAMING ERROR --------------------------------------- src/Main.elm

    I cannot find a `gap_lg` variable:

    5|     div [ row, gap_lg ] [ text "Hello!" ]

                      ^^^^^^

    These names seem close though:

        gap_md

        gap_sm

        label

        map

    Hint: Read  to see how `import`

    declarations work in Elm.

    ```