Moon style

Moon style is a versatile CSS utility package that helps you quickly and easily generate styles for your web projects. It provides a set of predefined styles and themes that you can customize to match your project's design.

Installation

$3

``bash
yarn add moon-style --dev
`

$3

`bash
npm install moon-style --dev
`

$3

How to integrate Moon style with your project

$3

`json
import { defineConfig } from "vite";
import moonPlugin from "moon-style/dist/vite-plugin-moon";

export default defineConfig({
plugins: [moonPlugin({ useJit: true, watchPath: "./moon.config.json" })],
});
`

What this changes?

$3

What does the moon command do?

- Generate the .css files in the moon folder in your project's root directory according to the configuration in your moon.config.json file
- Watch the moon.config.json file for changes and automatically regenerate the .css files when you save the changes.
- Watch all the files in the ./src directory with the extensions html,js,jsx,tsx for generate the css on demand

- Clean the moon.css file from the unused classes

What does the moon-purge command do?

- Clean the moon.css file from the unused classes

Getting Started

$3

`html

`

$3

Moon style relies on a configuration file named moon.config.json to generate styles. If you don't already have this file in your project, Moon style will create a default configuration for you at ./moon.config.json.

The default configuration includes predefined styles for properties like padding, margin, font-size, and more. You can customize this configuration to suit your project's needs.

$3

If you want to customize the default styles or define new ones, open the moon.config.json file in your project and modify it according to your requirements. You can specify your own values for various properties, change colors, and define new themes.

$3

Moon style comes with predefined themes that you can use or modify in your moon.config.json file. Themes include color palettes and other design elements to quickly change the look and feel of your project.

$3

Here's an example of a moon.config.json file with predefined styles and themes:

`json
{
"$schema": "./node_modules/moon-style/dist/moon.config.schema.json",
"useStaticNumbers": false, // Determines whether to use static numbers or css variables
"projectDir": "./src", // The project directory
"content": ["./src/*/.{html,js,jsx,tsx}"], // the files that will be scanned for classes to be purged
"styles": [
{
"props": {
// the css property name : the generated class name
"padding": "p",
"margin": "m"
},
"variableName": "spacing", // the variable name that will be used in the generated css
"values": {
// the values of the css variable
"sm": "4px",
"md": "8px",
"custom": "23.5px"
// you can add more values here
}
}
// Add more styles here
],
"colors": {
"options": {
"*": {
"opacities": [0.05, 0.1, 0.2, 0.5, 0.7, 0.9],
"props": ["bg", "fill", "border", "text"]
// this will generate the following classes for [ each ] color
// .bg-red-50, .bg-red-100 , .bg-red-200 , .bg-red-500 , .bg-red-700 , .bg-red-900
// .fill-red-50, .fill-red-100 , .fill-red-200 , .fill-red-500 , .fill-red-700 , .fill-red-900
// .border-red-50, .border-red-100 , .border-red-200 , .border-red-500 , .border-red-700 , .border-red-900
// .text-red-50, .text-red-100 , .text-red-200 , .text-red-500 , .text-red-700 , .text-red-900
// .bg-lord-50, .bg-lord-100 , .bg-lord-200 , .bg-lord-500 , .bg-lord-700 , .bg-lord-900
// .text-lord-50, .text-lord-100 , .text-lord-200 , .text-lord-500 , .text-lord-700 , .text-lord-900
/ ...and so on /
},
"prim": {
"opacities": [0.05, 0.1, 0.2, 0.5, 0.7, 0.9],
"props": ["bg", "fill", "border"]
// this will generate the following classes for the [ prim ] color
// .bg-prim-50, .bg-prim-100 , .bg-prim-200 , .bg-prim-500 , .bg-prim-700 , .bg-prim-900
// .fill-prim-50, .fill-prim-100 , .fill-prim-200 , .fill-prim-500 , .fill-prim-700 , .fill-prim-900
// .border-prim-50, .border-prim-100 , .border-prim-200 , .border-prim-500 , .border-prim-700 , .border-prim-900
}
},
"staticColors": {
"red": "#dd3643",
"cyan": "#63cfc9",
"nice": "#83d6e1",
"cute": "#a3e4cb",
"green": "#7bc74d"
},
"themes": {
"light": {
"prim": "#FFFFFF",
"prince": "#f0f0f0",
"lord": "#909090",
"owl": "#1f1d2b",
"goat": "#c4c4c7"
},
"dark": {
"prim": "#2d303e",
"prince": "#393c4a",
"lord": "#9099bc",
"owl": "#ffffff",
"goat": "#3c4f8d"
},
"darker": {
"prim": "#0b132b",
"prince": "#1c2541",
"lord": "#3a506b",
"owl": "#5bc0be",
"goat": "#ffffff"
},
"bad": {
"prim": "#949ba0",
"prince": "#9dacb2",
"lord": "#a0b9bf",
"owl": "#c4edff",
"goat": "#bcd4de"
},
"LOL": {
"prim": "#211a1e",
"prince": "#c3423f",
"lord": "#9bc53d",
"owl": "#fde74c",
"goat": "#393c4a"
}
}
// Define more themes here
},
"screens": {
// the screens that will be used in the generated css
"xs": "0px",
"sm": "600px",
"md": "960px",
"lg": "1280px",
"xl": "1920px",
"phone": "0px",
"tablet": "600px",
"desktop": "960px",
"wide": "1280px",
"ultra": "1920px"
// you can add more screens here
}
}
`

$3

$3

`css
:root {
--red: #dd3643;
--cyan: #63cfc9;
--nice: #83d6e1;
--cute: #a3e4cb;
}
`

$3

`css
.light {
--prim: #FFFFFF;
--prince: #f6f6f6;
--owl: #1f1d2b;
--goat: #c4c4c7;
--prim-50: rgba(255, 255, 255, 0.05);/ ...and so on /
}
.dark {
--prim: #2d303e;
--prince: #393c4a;
--owl: #ffffff;
--goat: #9e9fa6;
--prim-50: rgba(45, 48, 62, 0.05);/ ...and so on /
}
.LOL {
--prim: #211a1e;
--prince: #c3423f;
--owl: #fde74c;
--goat: #393c4a;
--prim-50: rgba(33, 26, 30, 0.05);/ ...and so on /
}

.bg-prim { background-color: var(--prim) } .bg-prim-50 {var(--prim-50) } .bg-prim-100 {var(--prim-100) } .bg-prim-200 {var(--prim-200) } / ...and so on /
.fill-prim { fill: var(--prim) } .fill-prim-50 {var(--prim-50) } .fill-prim-100 {var(--prim-100) } .fill-prim-200 {var(--prim-200) } / ...and so on /
.border-prim { border-color: var(--prim) } .border-prim-50 {var(--prim-50) } .border-prim-100 {var(--prim-100) } .border-prim-200 {var(--prim-200) } / ...and so on /
.bg-prince { background-color: var(--prince) } .bg-prince-50 {var(--prince-50) } .bg-prince-100 {var(--prince-100) } .bg-prince-200 {var(--prince-200) } / ...and so on /
.bg-red { background-color: var(--red) } .bg-red-50 {var(--red-50) } .bg-red-100 {var(--red-100) } .bg-red-200 {var(--red-200) } / ...and so on /
.text-red { color: var(--red) } .text-red-50 {var(--red-50) } .text-red-100 {var(--red-100) } .text-red-200 {var(--red-200) } / ...and so on /
/ ...and so on /
`

$3

`css
:root {
--sm: 4px;
--md: 8px;
--custom: 23.5px;
}

.p-sm {
padding: var(--spacing-sm);
}
.m-sm {
margin: var(--spacing-sm);
}
.pr-md {
padding-right: var(--spacing-md);
}
.mx-sm {
margin-inline: var(--spacing-sm);
}
.mr-custom {
margin-right: var(--spacing-custom);
}
.py-custom {
padding-block: var(--spacing-custom);
}
/ ...and so on /
.pr-sm {
padding-right: var(--spacing-sm);
}
.mr-custom {
margin-right: var(--spacing-custom);
}
.pl-md {
padding-left: var(--spacing-md);
}
.ml-custom {
margin-left: var(--spacing-custom);
}
/ ...and so on /
`

$3

$3

`html


`css
.my-class {
background-color: var(--prim);
color: var(--red);
padding: var(--spacing-md);
margin: var(--spacing-custom);
}
`

Example

$3

`js
import React from "react";
import { Moon } from "moon-style";
import { Theme } from "../Moon.Types";

Moon.setTheme("dark");

const themes: Theme[] = ["dark", "light", "darker", "LOL", "bad"];

const App = () => {
const [theme, setTheme] = React.useState(Moon.currentTheme);
return (


`

$3

!example.gif

Just in time (JIT) mode

What is JIT mode?

Just-in-time (JIT) mode is a feature that allows you to generate CSS on demand. This means that you don't have to generate the CSS for all the classes in your project at once. Instead, you can generate the CSS for only the classes that you need.

How to use JIT mode?

Use it with colors like this

`html


- bg:#f00: This class sets the CSS property background-color to #f00.
- text:#ff0: This class sets the CSS property color to #ff0.
- fill:#0af: This class sets the CSS property fill to #0af.
- border:#0af: This class sets the CSS property border-color to #0af.

Use it with numbers like this

`html


- p:100px: This class sets the CSS property padding to 100px.
- m:100px: This class sets the CSS property margin to 100px.
- my:10rem: This class sets the CSS property margin-block to 10rem.
- py:20rem: This class sets the CSS property padding-block to 20rem.
- h:10%: This class sets the CSS property height to 10%.
- w:300px: This class sets the CSS property width to 300px.
- max-h:30rem: This class sets the CSS property max-height to 30rem.

Use it with pseudo classes like this

`html


- hover:[bg-cyan]: This class sets the CSS property background-color to #cyan when the element is hovered.
- hover:active:[bg-cyan]: This class sets the CSS property background-color to #cyan when the element is hovered and active.
- hover:[bg-cyan,text-red]: This class sets the CSS property background-color to #cyan and the color to #red when the element is hovered.
- hover:active:[bg-cyan,text-red,p-xl,m-sm]: This class sets the CSS property background-color to #cyan and the color to #red when the element is hovered and active, and also sets the padding to var(--spacing-xl) and the margin to var(--spacing-sm).

Use it with media queries like this

`html


- hover:md:[bg-cyan,text-red,p-xl,m-sm]: This class sets the CSS property background-color to #cyan and the color to #red when the element is hovered and the screen size is medium.
- hover:md:[bg-cyan,text-red,p-xl,m-sm] md:[bg-cyan,text-red,p-xl,m-sm]: This class sets the CSS property background-color to #cyan and the color to #red when the element is hovered and the screen size is medium, and also sets the padding to var(--spacing-xl) and the margin to var(--spacing-sm) when the screen size is medium.
- hover:md:[bg-cyan,text-red,p-xl,m-sm] md:[bg-cyan,text-red,p-xl,m-sm] lg:[bg-cyan,text-red,p-xl,m-sm]: This class sets the CSS property background-color to #cyan and the color to #red when the element is hovered and the screen size is medium, and also sets the padding to var(--spacing-xl) and the margin to var(--spacing-sm) when the screen size is medium and large.

Use it with static classes like this

`html


- disable:[opacity-10,bg-red]: This class sets the CSS property opacity to 0.1 and the background-color to #red when the element is disabled.

Use it with pseudo elements like this

`html


- before:[bg-red,h:20px,w:20px,display:block]: This class sets the CSS property background-color to #red, the height to 20px, the width to 20px, and the display to block for the ::before pseudo-element.
- hover:after:[bg-red,text#f00,h:20px,w:20px,display:block]: This class sets the CSS property background-color to #red, the color to #f00, the height to 20px, the width to 20px, and the display to block for the ::after pseudo-element when the element is hovered.

PurgeCss

What is PurgeCss?

PurgeCSS is a tool to remove unused CSS. It can be used as part of your development workflow. PurgeCSS comes with a JavaScript API, a CLI, and plugins for popular build tools learn more about PurgeCss here.

How to use PurgeCss with Moon style?

PurgeCSS is already included as a dependency in this project, so there's no need to install it separately
so you just need to add the content property to your moon.config.json file and specify the files that you want to scan for classes to be purged.

$3

`json
{
"content": ["./src/*/.{html,js,jsx,tsx}"]
}
`

$3

How to run PurgeCss?

$3

`bash
yarn moon-purge
`

$3

`bash
npm run moon-purge
`

$3

How to restore the purged classes?

$3

`bash
yarn moon
`

$3

`bash
npm run moon
`

$3

API

$3

The Moon object is a utility provided by Moon style to manage themes and colors. You can use the following methods and properties:

- Moon.init: This method initializes the Moon style. It sets the current theme to the one specified in the theme parameter. If no theme is specified, it uses the theme specified in the localStorage object. If no theme is specified in the localStorage object, it uses the theme specified in the prefers-color-scheme media query. If no theme is specified in the prefers-color-scheme media query, it uses the light theme.

`javascript
import { Moon } from "moon-style";
Moon.init(); // Initializes Theme
`

- Moon.currentTheme: Returns the current active theme.

`javascript
import { Moon } from "moon-style";
const theme = Moon.currentTheme; // Returns the current theme (e.g., "light", "dark", "great")
`

- Moon.setTheme(theme: string): Sets the specified theme as the current theme.

`javascript
import { Moon } from "moon-style";
Moon.setTheme("dark"); // Sets the "dark" theme
`

- Moon.setColors(colors: { [key: string]: string }): Sets the specified colors as CSS variables.

`javascript
import { Moon } from "moon-style";
Moon.setColors({ red: "#dd3643", cyan: "#63cfc9", prim: "#FFFFFF" }); // Sets the "red" and "cyan" colors
`

- Moon.setColor(key: string, value: string): Sets the specified color as a CSS variable.

`javascript
import { Moon } from "moon-style";
Moon.setColor("red", "#dd3643"); // Sets the "red" color
`

- Moon.removeColors(): Removes all custom colors.

`javascript
import { Moon } from "moon-style";
Moon.removeColors(); // Removes all custom colors
Moon.removeColors(["cyan", "prim"]); // Removes the custom colors "cyan" and "prim"
`

- Moon.removeColor(key: string): Removes the specified custom color.

`javascript
import { Moon } from "moon-style";
Moon.removeColor("red"); // Removes the custom "red" color
`

Examples of useing the API

$3

`js
import React from "react";
import { Moon } from "moon-style";
import { Theme } from "../Moon.Types";

let dynimcColors: any = {
prim: "#0b132b",
prince: "#1c2541",
lord: "#3a506b",
owl: "#5bc0be",
goat: "#ffffff",
};

Moon.setColors(dynimcColors);
const themes: Theme[] = ["dark", "light"];

const App = () => {
const [theme, setTheme] = React.useState(Moon.currentTheme || "dynamic");
return (


`

!example.gif

Static Classes

This classes will always be generated in the css file

`css
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: -webkit-sticky;
position: sticky;
}
.static {
position: static;
}
.initial {
position: initial;
}
.inherit {
position: inherit;
}
.unset {
position: unset;
}
`

- fixed: This class sets the CSS property position to fixed, which positions the element relative to the viewport.
- absolute: This class sets the CSS property position to absolute, which positions the element relative to its closest positioned ancestor.
- relative: This class sets the CSS property position to relative, which positions the element relative to its normal position.
- sticky: This class sets the CSS property position to sticky, which positions the element based on the user's scroll position.
- static: This class sets the CSS property position to static, which positions the element according to the normal flow of the document.
- initial: This class sets the CSS property position to initial, which sets the position to its default value.
- inherit: This class sets the CSS property position to inherit, which inherits the position from its parent element.
- unset: This class sets the CSS property position to unset, which resets the position to its default value.

`css
.flex-grow {
flex-grow: 1;
}
`

This class sets the CSS property flex-grow to 1, which allows the element to grow to fill the available space.

`css
.flex,
.row,
.col,
.wrap,
.center {
display: flex;
}
`

These classes set the CSS property display to flex, which allows you to use flexbox to control the layout of elements. For example, flex makes the element a flex container, while row makes the element a flex container with a row layout.

`css
.flex,
.row,
.col,
.wrap,
.center,
.row-center,
.col-center {
display: flex;
}
`

`css
.row-center,
.center {
align-items: center;
}
.row-start {
align-items: flex-start;
}
.row-end {
align-items: flex-end;
}
`

- row-center, center: These classes vertically align the items in a flex container to the center.
- row-start: These classes vertically align the items in a flex container to the start.
- row-end: These classes vertically align the items in a flex container to the end.

`css
.col,
.col-center,
.col-start,
.col-end {
flex-direction: column;
}
`

`css
.col-center,
.center {
justify-content: center;
}
.col-start {
justify-content: flex-start;
}
.col-end {
justify-content: flex-end;
}
`

- col-center, center: These classes horizontally align the items in a flex container to the center.
- col-start: These classes horizontally align the items in a flex container to the start.
- col-end: These classes horizontally align the items in a flex container to the end.

`css
.wrap {
flex-wrap: wrap;
}
`

wrap: This class sets the CSS property flex-wrap to wrap, allowing flex containers to wrap their items to the next line if they exceed the container's width.

`css
.select-none {
user-select: none;
}
.select-text {
user-select: text;
}
.select-all {
user-select: all;
}
.select-auto {
user-select: auto;
}
`

- select-none: This class sets the CSS property user-select to none, which prevents text selection on elements with this class.
- select-auto: This class sets the CSS property user-select to auto, allowing the default user-select behavior on elements with this class.
- select-text: This class sets the CSS property user-select to text, allowing text selection on elements with this class.
- select-all: This class sets the CSS property user-select to all, enabling the selection of all content within elements with this class.

`css
.overflow-auto {
overflow: auto;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
`

- overflow-auto: This class sets the CSS property overflow to auto, allowing the element to scroll when its content overflows.
- overflow-scroll: This class sets the CSS property overflow to scroll, forcing the element to have a scroll bar when its content overflows.
- overflow-hidden: This class sets the CSS property overflow to hidden, hiding any content that overflows the element's boundaries.
- overflow-visible: This class sets the CSS property overflow to visible, making all content within the element visible, even if it overflows the container.

`css
.overflow-x-auto {
overflow-x: auto;
}
.overflow-x-scroll {
overflow-x: scroll;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-x-visible {
overflow-x: visible;
}
`

These classes control horizontal overflow behavior, similar to the previous set of classes, but specifically for the overflow-x property.

`css
.overflow-y-auto {
overflow-y: auto;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.overflow-y-visible {
overflow-y: visible;
}
`

These classes control vertical overflow behavior, similar to the previous set of classes, but specifically for the overflow-y property.

`css
.hide-scroller::-webkit-scrollbar {
display: none;
}
`

hide-scroller: This class uses the ::-webkit-scrollbar pseudo-element to hide the scroll bar in WebKit-based browsers (like Safari and Chrome) for elements with this class. It effectively removes the scroll bar's appearance.

`css
.h-screen {
height: 100vh;
}
.w-screen {
width: 100vw;
}
.w-fill {
width: 100%;
}
.h-fill {
height: 100%;
}
`

These classes set the CSS properties height and width to specific values, allowing you to control the element's height and width. For example, h-screen sets the element's height to 100vh, while w-screen sets the element's width to 100vw.

`css
.min-w-max {
min-width: max-content;
}
`

min-w-max: This class sets the CSS property min-width to max-content, allowing the element to have a minimum width based on its content.

`css
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
`

- items-center: This class aligns the items in a flex container vertically and horizontally to the center.
- items-start: This class aligns the items in a flex container vertically to the start.
- items-end: This class aligns the items in a flex container vertically to the end.

`css
.justify-center {
justify-content: center;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
`

- justify-center: This class horizontally aligns the items in a flex container to the center.
- justify-start: This class horizontally aligns the items in a flex container to the start.
- justify-end: This class horizontally aligns the items in a flex container to the end.
- justify-between: This class evenly distributes the items along the main axis with space between them.
- justify-around: This class evenly distributes the items along the main axis with space around them.
- justify-evenly: This class evenly distributes the items along the main axis with equal space between them.

`css
.self-start {
align-self: flex-start;
}
.self-center {
align-self: center;
}
.self-end {
align-self: flex-end;
}
.self-stretch {
align-self: stretch;
}
`

- self-start: This class aligns an individual flex item to the start within a flex container.
- self-center: This class aligns an individual flex item to the center within a flex container.
- self-end: This class aligns an individual flex item to the end within a flex container.
- self-stretch: This class stretches an individual flex item to fill the container along the cross-axis.

`css
.col-span-full {
grid-column: 1 / -1;
}
.col-span-1 {
grid-column: span 1 / span 1;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.row-span-full {
grid-row: 1/-1;
}
.row-span-1 {
grid-row: span 1 / span 1;
}
.row-span-2 {
grid-row: span 2 / span 2;
}
.row-span-3 {
grid-row: span 3 / span 3;
}
`

These classes are used for creating grid layouts:

- col-span-full: This class spans a grid column from the first to the last column.
- col-span-1, col-span-2, col-span-3: These classes span grid columns by a specific number of columns.
- row-span-full: This class spans a grid row from the first to the last row.
- row-span-1, row-span-2, row-span-3: These classes span grid rows by a specific number of rows.

`css
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
`

- text-center: This class sets the text alignment to center.
- text-left: This class sets the text alignment to left.
- text-right: This class sets the text alignment to right.

`css
.pointer {
cursor: pointer;
}
.cursor-default {
cursor: default;
}
.cursor-cursor {
cursor: w-resize;
}
.pointer-none {
pointer-events: none;
}
.pointer-auto {
pointer-events: auto;
}
.pointer-all {
pointer-events: all;
}
`

- pointer: This class changes the cursor to a pointer hand when hovering over an element, indicating it's clickable.
- cursor-default: This class sets the default cursor.
- cursor-cursor: This class sets the cursor to a horizontal resize cursor, typically used for resizing elements horizontally.
- pointer-none: This class makes the element non-interactable by setting pointer events to none.
- pointer-auto: This class restores the default pointer events behavior.
- pointer-all: This class allows all pointer events on the element.

`css
.display-none {
display: none;
}
.display-block {
display: block;
}
.display-inline {
display: inline;
}
.display-inline-block {
display: inline-block;
}
.display-flex {
display: flex;
}
.display-grid {
display: grid;
}
.display-table {
display: table;
}
`

- display-none: This class sets the CSS property display to none, hiding the element.
- display-block: This class sets the CSS property

``css
.opacity-0 {
opacity: 0;
}
.opacity-10 {
opacity: 0.1;
}
.opacity-20 {
opacity: 0.2;
}
.opacity-30 {
opacity: 0.3;
}
.opacity-40 {
opacity: 0.4;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-70 {
opacity: 0.7;
}
.opacity-80 {
opacity: 0.8;
}
.opacity-90 {
opacity: 0.9;
}
.opacity-100 {
opacity: 1;
}
`

These classes set the CSS property opacity to specific values, allowing you to control the element's transparency or visibility. For example, opacity-0 makes the element completely transparent (invisible), while opacity-100 makes it fully opaque (visible).

Documentation

coming soon... 😅