npm - tadka-css - Versions diffs - 1.0.1 → 1.0.2 - Mend

tadka-css 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -1,40 +1,31 @@
 # tadka-css
-Add spice to your styles. Utility-first CSS engine in vanilla JS.
-![npm](https://img.shields.io/npm/v/tadka-css?label=npm)
-![npm downloads](https://img.shields.io/npm/dm/tadka-css)
-![license](https://img.shields.io/npm/l/tadka-css)
-![bundlephobia](https://img.shields.io/bundlephobia/minzip/tadka-css)
-![github stars](https://img.shields.io/github/stars/ashaafkhan/tadka-css)
+A lightweight, runtime utility-first CSS engine for the browser.
 - npm: https://www.npmjs.com/package/tadka-css
-- GitHub: https://github.com/ashaafkhan/tadka-css
+- GitHub repository: https://github.com/ashaafkhan/tadka-css
 - Live Demo: https://tadkacss.vercel.app/
 - Playground: https://tadkacss.vercel.app/playground/
-TypeScript typings are included out of the box through `types/index.d.ts`.
+TypeScript typings are included through `types/index.d.ts`.
-## What Is This?
+## What Is Tadka CSS?
-tadka-css is a utility-first styling engine that runs in the browser.
+tadka-css lets you style HTML using utility class names like `tadka-p-4`, `tadka-bg-orange-500`, and `tadka-rounded-lg`.
-Instead of writing custom CSS rules, you write class names like:
+At runtime, tadka-css scans the DOM, parses matching class names, and applies styles directly.
-- `tadka-p-4`
-- `tadka-bg-orange-500`
-- `tadka-text-white`
+This project is browser-first, no build step required for basic use.
-The library scans your DOM, converts those class names into style objects, and applies styles automatically.
+## Demo App Built With the npm Package
-## Why Beginners Like It
+The demo application in this repository is built using the `tadka-css` npm package (via the published CDN bundle).
-- You can style pages without writing separate CSS files.
-- You can learn utility-first thinking quickly.
-- You can inspect styles directly in browser devtools.
-- You can switch from this to Tailwind-style workflows later very easily.
+1. Demo app: https://tadkacss.vercel.app/
+2. Playground: https://tadkacss.vercel.app/playground/
+3. Demo source: https://github.com/ashaafkhan/tadka-css/blob/main/demo/index.html
-## Install
+## Installation
 ### npm
@@ -55,9 +46,7 @@ pnpm add tadka-css
 <script src="https://unpkg.com/tadka-css/dist/tadka-css.js"></script>
 ```
-## 2-Minute Quick Start
-Create an HTML file and paste this:
+## Quick Start
 ```html
 <!doctype html>
@@ -75,56 +64,145 @@ Create an HTML file and paste this:
 </html>
 ```
-If you are using npm in a module project:
+For npm/bundlers:
 ```js
 import TadkaCSS from "tadka-css";
 TadkaCSS.init();
 ```
-## How It Works Internally
+## Class Name Anatomy
+tadka-css parses class names using this grammar:
+1. Base utility: `tadka-{utility}-{value}`
+2. Responsive utility: `tadka-{breakpoint}:{utility}-{value}`
+3. Pseudo utility: `tadka-{pseudo}:{utility}-{value}`
+Examples:
+```html
+<div class="tadka-p-4 tadka-bg-orange-500 tadka-md:w-1/2 tadka-hover:scale-105"></div>
+```
+## Supported Attributes
+This list reflects currently implemented resolver support.
+### 1) Spacing Attributes
+- `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl`
+- `m`, `mx`, `my`, `mt`, `mr`, `mb`, `ml`
+- `mx-auto`
+- `gap`, `gap-x`, `gap-y`
+- Arbitrary values with `[]`
+Examples:
+```html
+<div class="tadka-p-4 tadka-mx-auto tadka-gap-3 tadka-mt-[18px]"></div>
+```
+### 2) Color Attributes
+- `bg-*`, `text-*`, `border-*`, `accent-*`, `caret-*`, `fill-*`, `stroke-*`
+- Gradient helpers: `from-*`, `to-*`, plus `bg-gradient-to-r`
+- Opacity vars: `bg-opacity-*`, `text-opacity-*`
+- Ring color var: `ring-*` (color form)
+- Arbitrary colors like `bg-[#FF5733]`
+### 3) Typography Attributes
+- Font sizes: `text-xs` to `text-9xl`, plus `text-[...]`
+- Text align: `text-left`, `text-center`, `text-right`, `text-justify`, `text-start`, `text-end`
+- Font weight: `font-thin` ... `font-black`
+- Font family: `font-sans`, `font-serif`, `font-mono`
+- Decorations and casing: `italic`, `not-italic`, `underline`, `line-through`, `no-underline`, `uppercase`, `lowercase`, `capitalize`
+- Text overflow utility: `truncate`
+- Line-height: `leading-*` including named values and scaled/arbitrary values
+### 4) Border and Ring Attributes
+- `border`, `border-{number}`
+- Border style: `border-solid`, `border-dashed`, `border-dotted`, `border-double`, `border-hidden`, `border-none`
+- Radius: `rounded`, `rounded-none`, `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl`, `rounded-2xl`, `rounded-3xl`, `rounded-full`
+- Ring size: `ring-{number}`
+- `outline-none`
+### 5) Layout Attributes
+- Display: `block`, `inline-block`, `inline`, `flex`, `inline-flex`, `grid`, `hidden`, `contents`
+- Flex direction: `flex-row`, `flex-col`, `flex-row-reverse`, `flex-col-reverse`
+- Justify: `justify-start`, `justify-end`, `justify-center`, `justify-between`, `justify-around`, `justify-evenly`
+- Align items: `items-start`, `items-end`, `items-center`, `items-baseline`, `items-stretch`
+- Grid templates: `grid-cols-{n}`, `grid-rows-{n}`
+- Flex basis: `basis-{n}`, `basis-full`, `basis-auto`
+- Flex shorthands: `flex-1`, `flex-auto`, `flex-none`, `flex-wrap`, `flex-nowrap`
+### 6) Positioning Attributes
+- Position: `static`, `relative`, `absolute`, `fixed`, `sticky`
+- Float: `float-left`, `float-right`, `float-none`
+- Side offsets: `top-*`, `right-*`, `bottom-*`, `left-*` including `auto`, `full`, scale, arbitrary
+- Insets: `inset-*`, `inset-x-*`, `inset-y-*`
+- Isolation: `isolate`, `isolation-auto`
-1. Finds classes with the configured prefix (`tadka-` by default).
-2. Parses each utility token into a CSS style object.
-3. Applies standard utilities as inline styles.
-4. Handles responsive utilities by injecting media query rules.
-5. Handles pseudo-like interactions (hover/focus/active) via JS listeners.
+### 7) Sizing Attributes
-## Most Common Utilities
+- Width: `w-*`, fractions (`w-1/2`, etc), named values (`w-full`, `w-screen`, etc), arbitrary values
+- Height: `h-*`, named viewport values (`h-screen`, `h-svh`, etc), arbitrary values
+- Combined: `size-*`
+- Min/max: `min-w-*`, `max-w-*`, `min-h-*`, `max-h-*`
+- Aspect ratio: `aspect-auto`, `aspect-square`, `aspect-video`
-### Spacing
+### 8) Effects Attributes
-- `tadka-p-4` (padding)
-- `tadka-mx-auto` (horizontal auto margin)
-- `tadka-gap-4` (gap)
-- `tadka-p-[13px]` (arbitrary value)
+- Opacity: `opacity-*`
+- Shadows: `shadow-none`, `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `shadow-inner`
+- Blur/filter: `blur*`, `brightness-*`, `contrast-*`, `grayscale`, `grayscale-0`
-### Colors
+### 9) Overflow / Interaction Attributes
-- `tadka-bg-orange-500`
-- `tadka-text-slate-900`
-- `tadka-border-blue-300`
+- Overflow: `overflow-*`, `overflow-x-*`, `overflow-y-*`
+- Scroll behavior: `scroll-smooth`, `scroll-auto`
+- Scroll spacing: `scroll-p-*`, `scroll-m-*`
+- Cursor: `cursor-pointer`, `cursor-default`, `cursor-text`, `cursor-not-allowed`
+- Selection: `select-none`, `select-text`
+- Pointer events: `pointer-events-none`, `pointer-events-auto`
+- Resize: `resize`, `resize-x`, `resize-y`, `resize-none`
+- Z-index: `z-*`, `z-auto`
-### Typography
+### 10) Transition Attributes
-- `tadka-text-sm`, `tadka-text-lg`, `tadka-text-3xl`
-- `tadka-font-bold`
-- `tadka-underline`
+- `transition`, `transition-none`, `transition-all`, `transition-colors`, `transition-opacity`, `transition-shadow`, `transition-transform`
+- Duration: `duration-*`
+- Delay: `delay-*`
+- Easing: `ease-linear`, `ease-in`, `ease-out`, `ease-in-out`
-### Layout
+### 11) Transform Attributes
-- `tadka-flex`, `tadka-items-center`, `tadka-justify-between`
-- `tadka-grid`, `tadka-grid-cols-3`
+- `scale-*`
+- `rotate-*`, `-rotate-*`
+- `translate-x-*`, `translate-y-*`, `-translate-x-*`, `-translate-y-*`
+- `skew-x-*`, `skew-y-*`
+- Origin: `origin-*` variants
+- `perspective-*`
-## Responsive Usage
+### 12) Animation Attributes
+- `animate-none`, `animate-spin`, `animate-ping`, `animate-pulse`, `animate-bounce`
+## Responsive Attributes
+Default breakpoints:
 | Prefix | Min Width |
 |---|---|
-| `tadka-sm:` | `640px` |
-| `tadka-md:` | `768px` |
-| `tadka-lg:` | `1024px` |
-| `tadka-xl:` | `1280px` |
-| `tadka-2xl:` | `1536px` |
+| `sm` | `640px` |
+| `md` | `768px` |
+| `lg` | `1024px` |
+| `xl` | `1280px` |
+| `2xl` | `1536px` |
 Example:
@@ -132,30 +210,37 @@ Example:
 <div class="tadka-w-full tadka-lg:w-1/2 tadka-xl:w-1/4"></div>
 ```
-## Interactivity Prefixes
+## Pseudo Attributes (JS-driven)
-- `tadka-hover:*`
-- `tadka-focus:*`
-- `tadka-active:*`
-- `tadka-disabled:*`
-- `tadka-checked:*`
+Parser recognizes:
-Example:
+- `hover`, `focus`, `active`, `disabled`, `checked`, `visited`, `group-hover`, `group-focus`, `peer-hover`
-```html
-<button class="tadka-bg-orange-500 tadka-hover:bg-orange-700 tadka-active:scale-95">
-  Hover me
-</button>
-```
+Runtime listeners currently implemented:
+- `hover`, `focus`, `active`, `disabled`, `checked`
-## Config and Custom Utilities
+Important caveat:
+- Pseudo support is implemented through JavaScript event listeners (not native CSS selectors).
+## Configuration
 ```js
 import TadkaCSS from "tadka-css";
 TadkaCSS.init({
   prefix: "tadka",
+  scale: 4,
+  removeClasses: false,
   watch: true,
+  breakpoints: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+  },
   extend: {
     spicy: { color: "#E8550A", fontWeight: "800" },
     btn: (value) => ({
@@ -163,65 +248,80 @@ TadkaCSS.init({
       borderRadius: "6px",
     }),
   },
-  colors: {
-    masala: { 500: "#7B3F00", 300: "#C17F3C", 100: "#F5E6D0" },
-  },
 });
 ```
+### Config Fields
+| Field | Type | Description |
+|---|---|---|
+| `prefix` | `string` | Class prefix to scan (default `tadka`) |
+| `scale` | `number` | Base spacing scale multiplier |
+| `removeClasses` | `boolean` | If true, removes tadka classes after applying styles |
+| `watch` | `boolean` | Enables MutationObserver auto re-scan |
+| `breakpoints` | `object` | Responsive breakpoint map |
+| `colors` | `object` | Override/extend palette |
+| `extend` | `object` | Add custom static/dynamic utilities |
 ## Public API
 | Method | Description |
 |---|---|
-| `init(options)` | Initialize engine, scan DOM, start observer |
-| `refresh()` | Re-scan the DOM |
-| `apply(element)` | Apply utilities to one element |
-| `applyAll(nodeList)` | Apply utilities to many elements |
-| `parse(className)` | Return parsed style object |
-| `register(name, styles)` | Register a custom utility |
-| `unregister(name)` | Remove a custom utility |
+| `init(options?)` | Build config, scan/apply, optionally start observer; returns processed element count |
+| `refresh()` | Re-scan entire document; emits `refresh` |
+| `apply(element)` | Apply utilities on one element |
+| `applyAll(nodeList)` | Apply utilities on collection |
+| `parse(className)` | Return parsed style object or `null` |
+| `register(name, styles)` | Register custom utility at runtime |
+| `unregister(name)` | Remove custom utility |
 | `getConfig()` | Get active config |
-| `setConfig(options)` | Merge and apply config changes |
-| `reset()` | Remove generated styles/listeners |
-| `on(event, handler)` | Subscribe to `ready`, `apply`, `parse-error`, `refresh` |
+| `setConfig(options)` | Merge config and rebuild parser/engine |
+| `reset()` | Restore original inline styles and clear listeners/rules |
+| `on(event, handler)` | Subscribe to events; returns unsubscribe function |
-### init Options
+### Events and Payloads
-| Option | Type | Default |
-|---|---|---|
-| `prefix` | `string` | `tadka` |
-| `scale` | `number` | `4` |
-| `removeClasses` | `boolean` | `false` |
-| `watch` | `boolean` | `true` |
-| `breakpoints` | `object` | `sm/md/lg/xl/2xl` |
-| `extend` | `object` | `{}` |
-| `colors` | `object` | generated palette |
+| Event | Payload |
+|---|---|
+| `ready` | `{ count }` |
+| `refresh` | `{ count }` |
+| `apply` | `{ element, className, styles }` |
+| `parse-error` | `{ className }` |
-## Arbitrary Values
+## TypeScript Example
-Use square brackets for direct values:
+```ts
+import TadkaCSS, { TadkaInitOptions } from "tadka-css";
-```html
-<div class="tadka-p-[13px] tadka-w-[420px] tadka-bg-[#FF5733]"></div>
+const config: TadkaInitOptions = {
+  prefix: "tadka",
+  watch: true,
+};
+TadkaCSS.init(config);
 ```
-## Troubleshooting
+## Under the Hood
-### My classes are not applying
+1. DOM scanner queries classes containing the configured prefix.
+2. Parser resolves each token through utility resolvers.
+3. Standard utilities become inline styles.
+4. Responsive utilities become generated `@media` rules scoped via data attributes.
+5. `watch: true` enables a MutationObserver on subtree/class changes.
+6. `reset()` restores original inline style values and clears listeners/rules.
-- Make sure class names start with `tadka-`.
-- If using npm import, ensure `TadkaCSS.init()` runs after DOM is ready.
-- If you add HTML dynamically, call `TadkaCSS.refresh()` (or keep `watch: true`).
+## Troubleshooting
-### Responsive classes are not showing
+### Classes are not applying
-- Confirm prefixes like `tadka-md:` are written correctly.
-- Check if viewport width actually matches breakpoint.
+1. Ensure classes start with your configured prefix.
+2. Ensure `TadkaCSS.init()` runs after DOM is available.
+3. For dynamic content, use `watch: true` or call `refresh()`.
-### npm page did not update after README edit
+### README on npm is not updating
-- npm README updates only after publishing a new version.
-- Bump version and publish again (for example, 1.0.1).
+1. README updates on npm only after publishing a new version.
+2. Run patch release (`npm version patch` + `npm publish`).
 ## Development
@@ -233,12 +333,6 @@ npm run build
 npm test
 ```
-## Demo
-- Main demo: https://tadkacss.vercel.app/
-- Playground: https://tadkacss.vercel.app/playground/
-- Demo source: https://github.com/ashaafkhan/tadka-css/blob/main/demo/index.html
 ## Contributing
 Issues and pull requests are welcome.
@@ -247,8 +341,8 @@ Before opening a PR:
 1. Run `npm test`
 2. Run `npm run build`
-3. Add or update tests for behavior changes
+3. Update docs/tests for behavior changes
 ## License
-MIT
+MIT

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "tadka-css",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Utility-first CSS engine for the DOM. Add spice to your styles.",
   "main": "dist/tadka-css.cjs.js",
   "module": "dist/tadka-css.esm.js",

package/types/index.d.ts CHANGED Viewed

@@ -39,7 +39,7 @@ interface TadkaCSSApi {
   on(event: "apply" | "parse-error" | "ready" | "refresh", handler: (payload: unknown) => void): () => void;
 }
-declare const TadkaCSS: TadkaCSSApi;
-export { TadkaCSS as default };
-export type { TadkaBreakpoints, TadkaCSSApi, TadkaDynamicStyle, TadkaInitOptions, TadkaParseResult, TadkaStyleObject };
+declare const TadkaCSS: TadkaCSSApi;
+export { TadkaCSS as default };
+export type { TadkaBreakpoints, TadkaCSSApi, TadkaDynamicStyle, TadkaInitOptions, TadkaParseResult, TadkaStyleObject };