Quick Overview

What is Shilp CSS?

Shilp CSS is a logic-driven wrapper built on top of SCSS, Purge CSS and Lightning CSS, designed to integrate seamlessly as a bundler plugin.

It works by transforming your styles through multiple explicit stages, and what the browser receives is just plain CSS.

At a high level:

1. Shilp CSS reads your .css files
2. Parses them using SCSS
3. Identifies intents using Regular Expression
4. Replaces those intents with real CSS
5. Outputs plain, static CSS

At build time, it additionally:

1. Removes unused CSS using Purge CSS
2. Applies CSS transforms using Lightning CSS
   • Transform modern css features
   • Adds vendor prefixes
   • Minifies output
   • Browser compatibility enforcement

What Shilp CSS Is Not

Shilp CSS is not:

• A runtime library
• A CSS-in-JS solution
• A framework-specific styling system
• A class generator you use in HTML

There is no runtime binding.
There is no magic in templates.

Working With Shilp CSS

You write styles the traditional way.

The stpes are:

1. Define styles in .css files
   • Use intents inside CSS to compose behavior

   • .custom-btn {
     	@layout shadow-sm;
     	@text size-md;
     	@bg color-primary/90;
     }
     

2. Bind them using class names, IDs, or attributes
   • HTML stays simple: <button class="custom-btn"> Save </button>

SCSS Support

Shilp CSS uses the SCSS parser internally. an important part among many in the system.

This means:

• Nesting works
• Mixins work
• Variables work
• Any valid SCSS syntax inside .css works

However:

• Files must use the .css extension
• You do not write .scss or .sass files
• Don't forget to import the module
  • for example, when using list @use "sass:list";
• Don't use reserved keywords for intent names
  • See, Reserved Names

Output

Shilp CSS always outputs Plain CSS, No runtime dependencies and No framework assumptions.

This makes it:

• Cacheable
• Inspectable
• Debuggable
• Easy to exit if you ever choose to
  • though you likely won’t need to :)

Framework & Bundler Support

Shilp CSS is framework-agnostic by design. It integrates at the bundler level, not the framework level.

Frameworks only matter during purging, where Shilp CSS needs access to the final build source: HTML, CSS and JS.

Defaults sources are provided for:

• ReactJS
• VueJS

All source paths are configurable though.

The Core Promise

Shilp CSS makes one promise:

Styling decisions live in CSS, remain explicit, and age predictably.

Everything else is to protect that promise.