LollipopCSS IntelliSense

Official editor support for LollipopCSS in Visual Studio Code.

LollipopCSS is a tiny CSS preprocessor for reusable values, utilities, and snippets. This extension makes .lcss files easier to read and write while keeping normal CSS familiar.

Live Demo

Try LollipopCSS Live

Features

• Syntax highlighting for .lcss files
• LollipopCSS highlighting inside CSS and SCSS files
• Autocomplete for utilities and snippets
• Hover previews showing expanded CSS
• Go to Definition for values, utilities, and snippets
• Ctrl+Click and F12 navigation for @importlollipop paths
• Live compiled CSS preview
• Automatic workspace token scanning

LollipopCSS syntax

Define reusable values and utilities inside an @lollipop block:

@lollipop {
    colorPink #ffafcc
    spacing 16px

    BGpink background colorPink
    displayFlex display flex
    gapDefault gap spacing
}

.card {
    displayFlex
    BGpink
    gapDefault
}

The compiled CSS is:

.card {
    display: flex;
    background: #ffafcc;
    gap: 16px;
}

Configured values can also be used in normal CSS declarations:

.card {
    color: colorPink;
    padding: spacing;
}

Reusable snippets

Define a group of declarations once:

@lollipop {
    cardLayout {
        display: grid;
        gap: 16px;
        border-radius: 12px;
    }
}

.product-card {
    ...cardLayout
}

Typing ... opens snippet completion suggestions.

Imports

Split values and utilities into reusable files:

@importlollipop "./tokens.lcss"
@importlollipop "./utilities.lcss"

Hold Ctrl and click an import path, or place the cursor on it and press F12, to open the imported file.

IntelliSense

The extension scans .lcss, .css, and .scss files in the current workspace for @lollipop definitions.

When you type a known utility such as:

displayFlex

the completion and hover preview show:

display: flex;

Use F12 on a value, utility, or snippet to jump to its definition.

Compiled Preview

Open a CSS, SCSS, or LCSS document, then run:

LollipopCSS: Show Compiled Preview

from the Command Palette (Ctrl+Shift+P). A live preview opens beside the editor and updates as you type.

The preview uses the official LollipopCSS compiler and supports relative @importlollipop files in the current workspace.

Commands

Configuration

Use lollipopCss.tokenFiles to control which workspace files are scanned:

{
  "lollipopCss.tokenFiles": [
    "**/*.lcss",
    "**/*.css",
    "**/*.scss"
  ]
}

File support

• .lcss
• .css
• .scss

For the compiler, browser integration, examples, and complete language documentation, visit the LollipopCSS project.

License

MIT