LayerCSS (.lyc) Syntax guide

To write a valid .lyc file, you need to follow specific syntax and structural rules so that the compiler or preprocessor can correctly interpret it. These rules are based on the examples and logic implemented in the LayerCSS compilers and preprocessors.

Below are the key rules to follow:

1. General Structure

• A .lyc file must be organized into blocks following a hierarchical structure.
• Blocks can contain:
  • Global variables.
  • CSS rules.
  • Special directives such as @layer, @mixin, @include, and @extend.

2. Comments

• Comments follow the same conventions as JavaScript or CSS:
  • Single-line comments: Start with //.
  • Multi-line comments: Enclosed between /* and */.

Example:

// This is a single-line comment
/* This is a
   multi-line comment */

3. Global Variables

• Global variables must be declared at the beginning of the file or within a specific block.
• Syntax for declaring a variable:

  --variable-name: value;

• Variable names must start with -- and can include letters, numbers, and hyphens (-).
• The value can be any valid expression (colors, numbers, strings, etc.).

Example:

--primary-color: #FF69B4;
--font-size: 16px;

4. @layer Blocks

• @layer blocks are used to organize CSS rules into layers.
• Syntax:

  @layer layer-name {
      /* Block content */
  }

• The layer name must be a valid identifier (letters, numbers, hyphens).
• The block content must be correctly enclosed with {}.

Example:

@layer base {
    body {
        background: var(--primary-color);
    }
}

5. CSS Rules

• CSS rules follow the standard syntax:

  selector {
      property: value;
  }

• Values can reference global variables using the var(--variable-name) syntax.

Example:

body {
    background: var(--primary-color);
    font-size: var(--font-size);
}

6. Block Nesting

• Blocks can be nested to represent hierarchical relationships between selectors.
• Each nested block must be correctly enclosed with {}.

Example:

div {
    color: blue;

    span {
        color: red;
    }
}

7. Special Directives

a) @mixin

• Defines reusable blocks of code.
• Syntax:

  @mixin mixin-name {
      /* Mixin content */
  }

b) @include

• Includes a previously defined mixin.
• Syntax:

  @include mixin-name;

c) @extend

• Inherits properties from another selector.
• Syntax:

  @extend base-selector;

Complete Example:

@mixin button-style {
    border: none;
    padding: 10px;
}

.button {
    @include button-style;
    background: var(--primary-color);
}

.alert-button {
    @extend .button;
    color: white;
}

8. Block Validation

• All {} blocks must be properly balanced.
• If an opening { or closing } is missing, the compiler will throw an error indicating an unbalanced block.

Example of an Error:

@layer base 
    body {
        background: var(--primary-color);
    }

In this case, { is missing after @layer base.

9. Invalid Characters

• Non-printable or invalid characters are not allowed in a .lyc file.
• These characters are removed during preprocessing.

10. Complete Example of a Valid .lyc File

--primary-color: #FF69B4;
--font-size: 16px;

@layer base {
    body {
        background: var(--primary-color);
        font-size: var(--font-size);
    }

    div {
        color: blue;

        span {
            color: red;
        }
    }
}

@mixin button-style {
    border: none;
    padding: 10px;
}

.button {
    @include button-style;
    background: var(--primary-color);
}

.alert-button {
    @extend .button;
    color: white;
}

Summary of Rules

1. Use comments with // or /* */.
2. Declare global variables with --variable-name: value;.
3. Use @layer blocks to organize rules.
4. Write CSS rules with the standard syntax.
5. Properly balance all {} blocks.
6. Use directives like @mixin, @include, and @extend as needed.
7. Avoid invalid characters.

By following these rules, a .lyc file will be valid and can be correctly processed by the compiler or preprocessor.