Styler

Tool to generate CSS classes, a bit like tailwind but less strict and dependency-free.

Install

If you have Go installed, you can install styler with:

go install github.com/devOpifex/styler@latest

Otherwise, you can download the binary from the releases page.

Setup

Create a .styler file in your project root.

styler -create

Usage

First, edit .styler config file, then add a class attribute to your HTML elements.

ui <- fluidPage(
  div(
    class = "display-flex padding-2 margin-bottom-2 width-40",
    div(
      class = "flex-grow-1",
      h1("Hello, world!", class = "color-red-400 hover:color-cyan-500")
    ),
    div(
      class = "flex-shrink-1 md@display-none",
      h2("This is hidden on medium and larger screens", class = "color-blue hover:color-green")
    )
  )
)

Call styler to generate the CSS.

styler

Configuration

Styler can be customized through the .styler configuration file. You can create a default configuration with:

styler -create

The configuration allows you to customize:

• Output: File path where generated CSS is saved
• Input: File patterns to search for class attributes (e.g., **/*.html, *.js)
• Unit: CSS unit to use for numeric values (default: rem)
• Divider: Number to divide numeric values by (default: 4)
• Media Queries: Custom breakpoint definitions
• Colors: Custom color palette definitions

Property Values

• Media queries are suffixed with @ e.g.: md@, lg@
• States are suffixed with :, e.g.: hover:, active:
• Numeric values are set as unit specified in the config (defaults to rem) and are divided by the divider specified in the config (defaults to 4), e.g.: padding-top-2 will result in padding-top: 0.5rem
• Numerics preceded by ~ are treated as strict and are not divided or suffixed with unit e.g.: flex~1 results in flex: 1
• Media queries can be edited in .styler config file
• Colors can be edited in .styler config file
• Extracted CSS properties are checked against the W3C CSS Properties table
• Multiple Value Parts: Create properties with multiple values like box-shadow-1-2-4-red which becomes box-shadow: 0.25rem 0.5rem 1rem red
• Selective Strict Values: Use ~ to mark specific parts as "strict" (no division or unit):
  • border-1-solid-red → border: 0.25rem solid red (number is divided by 4, unit added)
  • border-~1-solid-red → border: 1 solid red (strict number, no division or unit)
  • border-1~solid-red → border: 0.25rem solid red (only affects the part with ~)
  • box-shadow~1-2-2-grey → box-shadow: 1 0.5rem 0.5rem grey (strict property name)

Documentation

• GitHub Repository