lollipop-css README

The project's README from github.com/nickhuang1121/lollipop-css. As one markdown file: README.md.

🍭 LollipopCSS

Version License

Current version: 0.2.0 Write less CSS. Stay lazy.

LollipopCSS is a tiny CSS preprocessor for defining your own reusable values, shortcuts, and style snippets.

🍭 Live Demo

Try LollipopCSS →

SCSS can already do all of this. That's not the problem.

The problem is that when I'm maintaining a large project, I'm too lazy to keep writing @mixin and @include over and over again.

So I made LollipopCSS.

Yes, I'm lazy. Very lazy. 🍭

I have better things to do — like eating McFlurries and lollipops. 🍦🍭

Why LollipopCSS?

CSS and SCSS already have variables.

CSS

Native CSS variables work perfectly fine:

:root {
    --normal-red: #FF0000;
    --normal-size: 10px;
}

.button {
    color: var(--normal-red);
    font-size: var(--normal-size);
    padding-left: var(--normal-size);
}

.card {
    color: var(--normal-red);
    font-size: var(--normal-size);
    padding-left: var(--normal-size);
}

Nothing wrong with that.

It's just more typing than I want to do.

SCSS

SCSS makes variables shorter:

$normalRed: #FF0000;
$normalSize: 10px;

.button {
    color: $normalRed;
    font-size: $normalSize;
    padding-left: $normalSize;
}

.card {
    color: $normalRed;
    font-size: $normalSize;
    padding-left: $normalSize;
}

And of course, SCSS can go further with mixins:

$normalRed: #FF0000;
$normalSize: 10px;

@mixin normalStyle {
    color: $normalRed;
    font-size: $normalSize;
    padding-left: $normalSize;
}

.button {
    @include normalStyle;
}

.card {
    @include normalStyle;
}

SCSS can already do all of this.

That's not the problem.

The problem is that I'm lazy.

I don't want to keep typing:

@include normalStyle;

when this would do:

...normalStyle

And sometimes I don't even want to type:

color: var(--normal-red);

when this would do:

colorRed

That's where LollipopCSS comes in.

LollipopCSS 🍭

Define your values and shortcuts once:

@lollipop {
    normalRed #FF0000
    normalSize 10px

    colorRed color normalRed
    fontSizeMd font-size normalSize
    paddingLNormal padding-left normalSize
    padding padding normalSize
}

Then use them anywhere:

.button {
    colorRed
    fontSizeMd
    paddingLNormal
}

.card {
    colorRed
    fontSizeMd
    padding
}

LollipopCSS compiles it to normal CSS:

.button {
    color: #FF0000;
    font-size: 10px;
    padding-left: 10px;
}

.card {
    color: #FF0000;
    font-size: 10px;
    padding: 10px;
}

Define once. Type less everywhere else.

Features

Values

A value is the simplest LollipopCSS definition.

@lollipop {
    normalRed #FF0000
    normalSize 10px
    largeSize 24px
}

Syntax:

<name> <value>

For example:

normalRed #FF0000

Values can then be referenced by shortcuts.

Shortcuts

A shortcut maps your own command to a CSS property and value.

Syntax:

<name> <css-property> <value>

For example:

@lollipop {
    normalRed #FF0000
    normalSize 10px

    colorRed color normalRed
    fontSizeMd font-size normalSize
    padding padding normalSize
}

Now instead of:

.button {
    color: #FF0000;
    font-size: 10px;
    padding: 10px;
}

you can write:

.button {
    colorRed
    fontSizeMd
    padding
}

The names are completely up to you.

Want shorter names?

@lollipop {
    red #FF0000
    md 10px

    cr color red
    fs font-size md
    p padding md
}

.button {
    cr
    fs
    p
}

Go for it.

LollipopCSS doesn't care what you call them.

Your shortcuts. Your rules.

Snippets

Sometimes even shortcuts are too much typing.

Define an entire reusable CSS block:

@lollipop {
    normalStyle {
        color: #FF0000;
        font-size: 10px;
        padding-left: 10px;
    }
}

Then use it with ...:

.button {
    ...normalStyle
}

.card {
    ...normalStyle
}

.dialog {
    ...normalStyle
}

Compiled CSS:

.button {
    color: #FF0000;
    font-size: 10px;
    padding-left: 10px;
}

.card {
    color: #FF0000;
    font-size: 10px;
    padding-left: 10px;
}

.dialog {
    color: #FF0000;
    font-size: 10px;
    padding-left: 10px;
}

No @mixin.

No @include.

Just:

...normalStyle

Because I'm lazy.

Mix Everything Together

Values, shortcuts, snippets, and normal CSS can all live together:

@lollipop {
    primaryColor #FF0000
    normalSize 10px
    cardRadius 8px

    textPrimary color primaryColor
    fontNormal font-size normalSize

    flexCenter {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.button {
    ...flexCenter

    textPrimary
    fontNormal

    width: 200px;
    height: 50px;
    border-radius: 8px;
}

.card {
    ...flexCenter

    background: white;
    border-radius: 8px;
}

LollipopCSS only expands the things it recognizes.

Everything else stays normal CSS.

Normal CSS Is Still CSS

LollipopCSS isn't trying to replace CSS.

You don't have to create a shortcut for everything.

This is perfectly valid:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    textPrimary
    fontNormal
}

Use shortcuts where they save you time.

Use normal CSS everywhere else.

Browser Usage

LollipopCSS can compile styles directly in the browser.

External .lcss File

Create a LollipopCSS stylesheet:

style.lcss

Then load it with:

<script src="lollipop-css.js"></script>

<link
    rel="lollipop-stylesheet"
    href="style.lcss"
>

LollipopCSS will fetch the file, compile it, and inject the resulting CSS into the document.

Inline LollipopCSS

You can also write LollipopCSS directly inside HTML:

<script src="lollipop-css.js"></script>

<style type="text/lollipop">
@lollipop {
    red #FF0000
    normalSize 10px

    colorRed color red
    fontNormal font-size normalSize
}

.title {
    colorRed
    fontNormal
}
</style>

LollipopCSS automatically compiles it when the document is ready.

JavaScript Usage

You can compile LollipopCSS manually:

const compiler = new LollipopCSS();

const source = `
@lollipop {
    red #FF0000
    colorRed color red
}

.title {
    colorRed
}
`;

const css = compiler.compile(source);

console.log(css);

Output:

.title {
    color: #FF0000;
}

Apply Compiled CSS

Compiled CSS can be injected into the document:

const compiler = new LollipopCSS();

const css = compiler.compile(source);

LollipopCSS.apply(css);

Load an .lcss File

You can also load a stylesheet manually:

LollipopCSS.load("./style.lcss");

Or get the compiled CSS as text:

const css = await LollipopCSS.load("./style.lcss", {
    output: "text"
});

Download Compiled CSS

LollipopCSS can generate a normal .css file in the browser:

const compiler = new LollipopCSS();
const css = compiler.compile(source);

LollipopCSS.download(css, {
    filename: "style.css"
});

CSS vs SCSS vs LollipopCSS

They aren't competitors trying to solve exactly the same problem.

CSS

color: var(--normal-red);

Powerful, native, and standard.

SCSS

color: $normalRed;

More concise and much more powerful as a preprocessor.

LollipopCSS

colorRed

Less typing.

For reusable blocks:

SCSS

@include normalStyle;

LollipopCSS

...normalStyle

That's basically the philosophy.

LollipopCSS isn't trying to beat SCSS on features.

It is trying to beat me at being lazy.

Philosophy

LollipopCSS isn't trying to replace CSS.

It isn't trying to replace SCSS.

SCSS is mature, powerful, and can already accomplish the same kinds of things.

LollipopCSS has a much smaller goal:

If you're tired of typing something, make it shorter.

Define your own vocabulary.

colorRed
fontSizeMd
padding
...flexCenter

LollipopCSS turns it back into boring, normal CSS.

Your shortcuts. Your naming. Your CSS.

Why "Lollipop"?

Because it's syntax sugar. 🍭

That's pretty much it.

Also, I needed an excuse to put a lollipop in the logo.

Live Demo

Want to see it in action?

🍭 Try LollipopCSS Live

Project Status

🚧 Experimental — v0.2.0

LollipopCSS is currently under development.

🚧 Experimental

LollipopCSS is currently under development.

The syntax and API may change before the first stable release.

If something breaks, congratulations — you may have found a bug.

🍭 VS Code IntelliSense

LollipopCSS has an optional VS Code extension that makes working with .lcss files easier.

Features

👉 Install LollipopCSS IntelliSense from the VS Code Marketplace

This is especially useful when your LollipopCSS definitions grow larger and are reused across many selectors.

Contributing

Issues, ideas, bug reports, and pull requests are welcome.

Especially ideas that require me to type less.

License

MIT License

🍭 LollipopCSS

Write less CSS. Stay lazy.

I have better things to do — like eating McFlurries and lollipops. 🍦🍭

lollipop-css (nickhuang1121/lollipop-css)

Searching Database…

612 ·GitHub
Lollipop-css
What is this?LollipopCSS is a tiny CSS preprocessor that lets you define your own reusable values, shortcuts, and style snippets, which it then compiles back into normal CSS.
Is this a full framework or just a thin preprocessor layer on top of CSS?It's a thin, optional layer: it only expands the shortcuts and values you define, and leaves any CSS it doesn't recognize completely untouched, so you can mix it freely with plain CSS.
How do I start using it in a project?You can write definitions in an external .lcss stylesheet and load it with a script tag, write LollipopCSS inline in your HTML, or compile it manually through the JavaScript API.
Do I need any build tools or packages to use it?No, LollipopCSS has zero dependencies and runs directly as a browser script or via its JavaScript API.
Is it safe to rely on for a production project right now?Not yet fully — it's at version 0.2.0 and explicitly marked experimental, meaning the syntax and API may still change before a stable release.
How is LollipopCSS different from just using SCSS?SCSS already supports variables and mixins just fine; LollipopCSS doesn't try to out-feature SCSS, it just lets you define shorter custom shortcuts so you type less for the same reusable patterns.
What exactly are 'snippets' in LollipopCSS?A snippet is an entire reusable CSS block you define once and then insert anywhere with a spread-like syntax, giving you the effect of SCSS's @mixin/@include without that syntax.
Is there editor tooling for .lcss files?Yes, an optional VS Code extension called 'LollipopCSS IntelliSense' adds syntax highlighting, autocomplete for your custom shortcuts, hover info, and find-usages.
Why is it called 'Lollipop'?Because it's syntax sugar — the author picked the pun partly as an excuse to put a lollipop in the project logo.
What are similar projects?classnames, prism, core-js, validator.js, date-fns, impress.js, joi, hyalite--liquid-glass
Which topics is it in?no-dependencies, vscode-extension, lightweight, npm-package, vscode, node, javascript-library, css, browser, utility, web-development, npm
Creator
nickhuang1121
Size
0.1 MB
Stars
612
Updated
CommitSep 01
Age
1mo
Commits · 90 Days