DyeScript-Light

Command Line Interface of lightweight (& pre-published) version of @yokgs/DyeScript with integrated css utilities

Powered by @yokgs/bluedyejs

Installation

npm install -g @yokgs/dyescript-light

Usage

To compile myfile.dye and save the resulting css to /dist/css folder use the following command

dyec -p myfile -o ./dist/css

For incremental builds, use the -w option:

dyec -p myfile -o ./dist/css -w

To specify an appropriate target for the build, use the -t option followed by the target code:

-t default: Generates both regular CSS and minified CSS files (default).
-t c: Generates a Cascading Style Sheet file (.css).
-t m: Generates a minified CSS file (.min.css).
-t s: Generates a Static DyeScript file (.static.dye) (experimental).
-t r: Generates a React StyleSheet file (.js) (experimental).
-t a: Generates all supported targets (.css, .dye, and .js) (experimental).

Remember that some targets are experimental and may not be fully supported.

Syntax

Import (`@@` operator)

include a utility file Margin.dye

@@ <Margin>
or
import <Margin>

include a dye file my-buttons.dye

@@ ./my-buttons
or
import ./my-buttons

Style definitions

You can define styles using the following syntax:

style <selector> <property> <value> <property> <value>...

You can also use the style shorthand version $:

$ <selector> <property> <value> <property> <value>...

For example, to set the background color to red and the text color to black for a button with the class 'styled':

Similar to CSS styles

style button.styled backgroundColor red color black

Or, you can format it like this:

$ button.styled backgroundColor red
    color black

You can attribute the same value to different properties using a concise syntax:

$ button color, borderColor black
$ body margin, padding 0px

DyeScript classes

Define the class bordered with the following properties

border width 4px
border color gold
border style solid

class bordered borderWidth 4px
    borderColor gold
    borderStyle solid

Alternatively, you can use the class shorthand .$:

.$ bordered borderWidth 4px
    borderColor gold
    borderStyle solid

You can apply the bordered class to elements like buttons, images, and elements with the .card class:

$bordered button img .card

Additionally, you can apply the bordered class to another class:

$bordered $anotherClass

The class anotherClass will inherit all the properties of bordered

Note : DyeScript classes do not appear in the final output

Utility-First Classes

DyeScript provides a set of utility classes that accelerate the creation of custom styles. You can recreate the bordered class from the previous example using utility classes:

@@ <Borders>

$Border|3 $bordered
$Border|solid $bordered
.$ bordered borderColor gold

Animations

DyeScript offers animation support, allowing you to create animations using the @keyframes keyword or its shorthand @keys. Here's how you can define an animation:

@keyframes <animation name> 
    <state> <property> <value> 
    <state> <property> <value>...

For instance, creating a colorful rotation animation:

@keyframes colorfull-rotation
    from rotate 0deg
    to rotate 359deg
    from,to backgroundColor red
    33% backgroundColor green
    66% backgroundColor blue

You can also associate classes with animation states:

.$ Initial rotate 0deg backgroundColor red
.$ Final rotate 359deg backgroundColor red

@keyframes colorfull-rotation 
    from $Initial
    to $Final
    33% backgroundColor green
    66% backgroundColor blue

CSS variables

DyeScript offers a convenient way to define global variables. Instead of the traditional approach:

$ :root --primary-color blue --secondary-color gray

You can use the following syntax:

+ primary-color blue secondary-color gray

When using variables in your styles:

$ button.primary backgroundColor --primary-color

instead of var(--primary-color)

License

Apache 2.0

yokgs/DyeScript-Light