strata-css 1.0.0

package/bin/strata.js

@@ -0,0 +1,139 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const fs       = require('fs')
+const path     = require('path')
+const chokidar = require('chokidar')
+const strata   = require('../src/index')
+const { getWatchFiles } = require('../src/scanner/scanner')
+
+const args = process.argv.slice(2)
+const cwd  = process.cwd()
+
+function loadConfig() {
+  const configPath = path.resolve(cwd, 'strata.config.js')
+  try { return require(configPath) } catch { return {} }
+}
+
+// ─── JS minifier ──────────────────────────────────────────────────────
+// Strips block comments (preserving /*! banners), line comments,
+// and collapses unnecessary whitespace — no external dependency needed.
+
+function minifyJS(src) {
+  return src
+    // preserve /*! banner */ comments, strip all other /* ... */ blocks
+    .replace(/\/\*(?!!)([\s\S]*?)\*\//g, '')
+    // strip // line comments (not inside strings — conservative: only at line start or after whitespace)
+    .replace(/(?:^|\s)\/\/[^\n]*/gm, '')
+    // collapse runs of whitespace/newlines to a single space
+    .replace(/[ \t]+/g, ' ')
+    .replace(/\n\s*\n+/g, '\n')
+    .trim()
+}
+
+// ─── Build ────────────────────────────────────────────────────────────
+// --watch  → unminified CSS, unminified JS  (fast rebuilds for dev)
+// --build  → unminified CSS, minified JS    (production-ready JS)
+// --minify → minified CSS + minified JS     (smallest possible output)
+
+async function build(cssMinify = false, jsMinify = true) {
+  const config     = loadConfig()
+  const inputFile  = config.input  || path.join(cwd, 'strata.css')
+  const outputFile = config.output || path.join(cwd, 'dist', 'strata.output.css')
+
+  const start = process.hrtime.bigint()
+  const css   = await strata.build(inputFile, outputFile, { cwd, sourceMap: !cssMinify })
+
+  // CSS minification
+  if (cssMinify) {
+    const cssnano = require('cssnano')
+    const postcss = require('postcss')
+    const result  = await postcss([cssnano({ preset: 'default' })]).process(css, { from: outputFile })
+    fs.writeFileSync(outputFile, result.css)
+  }
+
+  // Bundle + optionally minify JS components
+  const componentsDir = path.join(__dirname, '..', 'src', 'components', 'modules')
+  const jsDest        = path.join(path.dirname(outputFile), 'strata.components.js')
+  if (fs.existsSync(componentsDir)) {
+    const files  = fs.readdirSync(componentsDir).filter(f => f.endsWith('.js')).sort()
+    const banner = `/*! Strata Components — built ${new Date().toISOString().slice(0,10)} */\n`
+    const raw    = files.map(f => fs.readFileSync(path.join(componentsDir, f), 'utf8')).join('\n')
+    const output = jsMinify ? banner + minifyJS(raw) : banner + raw
+    fs.mkdirSync(path.dirname(jsDest), { recursive: true })
+    fs.writeFileSync(jsDest, output)
+  }
+
+  const ms      = (Number(process.hrtime.bigint() - start) / 1_000_000).toFixed(2)
+  const cssSize = (Buffer.byteLength(fs.readFileSync(outputFile)) / 1024).toFixed(2)
+  const jsSize  = fs.existsSync(jsDest)
+    ? (Buffer.byteLength(fs.readFileSync(jsDest)) / 1024).toFixed(2)
+    : '0'
+  console.log(`[Strata] ✓ Built → ${outputFile} (CSS ${cssSize} KB, JS ${jsSize} KB) in ${ms}ms`)
+}
+
+// ─── Watch ────────────────────────────────────────────────────────────
+async function watch() {
+  console.log('[Strata] Starting in watch mode...')
+  await build(false, false)   // unminified for dev
+
+  const config       = loadConfig()
+  const contentGlobs = config.content || ['./src/**/*.{html,jsx,tsx,vue,astro,svelte,js,ts}']
+  const inputFile    = config.input || path.join(cwd, 'strata.css')
+  const watchFiles   = [inputFile, ...getWatchFiles(contentGlobs)]
+
+  const watcher = chokidar.watch(watchFiles, { ignoreInitial: true, persistent: true })
+
+  watcher.on('change', async (filePath) => {
+    console.log(`[Strata] Changed: ${path.relative(cwd, filePath)}`)
+    strata.invalidate(filePath)
+    await build(false, false)
+  })
+
+  watcher.on('add', async (filePath) => {
+    console.log(`[Strata] Added: ${path.relative(cwd, filePath)}`)
+    strata.invalidate(filePath)
+    await build(false, false)
+  })
+
+  console.log('[Strata] Watching for changes...')
+}
+
+// ─── Init ─────────────────────────────────────────────────────────────
+function init() {
+  console.log('[Strata] Initializing project...')
+
+  const files = {
+    'strata.config.js': `module.exports = {\n  content: ["./src/**/*.{html,jsx,tsx,vue,astro,svelte,js,ts}"],\n  input:   "./strata.css",\n  output:  "./dist/strata.output.css"\n}\n`,
+    'strata.css':       `@strata base;\n@strata components;\n@strata utilities;\n`,
+    'postcss.config.js':`module.exports = { plugins: [require('strata-css'), require('autoprefixer')] }\n`,
+  }
+
+  for (const [filename, content] of Object.entries(files)) {
+    const filePath = path.join(cwd, filename)
+    if (fs.existsSync(filePath)) {
+      console.log(`[Strata] Skipped (exists): ${filename}`)
+    } else {
+      fs.writeFileSync(filePath, content)
+      console.log(`[Strata] Created: ${filename}`)
+    }
+  }
+
+  fs.mkdirSync(path.join(cwd, 'dist'), { recursive: true })
+  console.log('\n[Strata] Done! Run: npm run dev')
+}
+
+// ─── Run ──────────────────────────────────────────────────────────────
+if      (args[0] === 'init')          init()
+else if (args.includes('--watch'))    watch()
+else if (args.includes('--minify'))   build(true,  true)
+else if (args.includes('--build'))    build(false, true)
+else console.log(`
+Strata CSS
+
+  strata init       scaffold a new project
+  strata --watch    development mode  (unminified, fast rebuild)
+  strata --build    production build  (minified JS, readable CSS)
+  strata --minify   production build  (minified CSS + JS, smallest output)
+`)

package/index.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Strata CSS — TypeScript Declarations
+ * https://github.com/AftabIbrahimKazi/strata
+ */
+
+export interface StrataThemeConfig {
+  /** Add or override breakpoints. Key is the breakpoint name, value is the min-width (e.g. "1600px"). */
+  breakpoints?: Record<string, string>
+  /** Override semantic color values. Key is the color name (e.g. "primary"), value is a CSS color string. */
+  colors?: Record<string, string>
+}
+
+export interface StrataComponentsConfig {
+  /** Component names to exclude from the generated CSS. */
+  exclude?: string[]
+  /** Component names to explicitly include (when using an allowlist approach). */
+  include?: string[]
+}
+
+/** Configuration object for strata.config.js */
+export interface StrataConfig {
+  /**
+   * Glob patterns pointing to files Strata should scan for class names.
+   * @example ["./src/**\/*.{html,jsx,tsx,vue,astro,svelte}"]
+   */
+  content: string[]
+
+  /**
+   * Path to the entry CSS file containing @strata directives.
+   * @default "./strata.css"
+   */
+  input?: string
+
+  /**
+   * Path where Strata writes the generated CSS output.
+   * @default "./dist/strata.output.css"
+   */
+  output?: string
+
+  /** Theme overrides — extend breakpoints or override color values. */
+  theme?: StrataThemeConfig
+
+  /** Include or exclude specific components from the generated output. */
+  components?: StrataComponentsConfig
+}
+
+/** Options passed to the build function. */
+export interface StrataBuildOptions {
+  /** Working directory used to resolve config and content paths. Defaults to process.cwd(). */
+  cwd?: string
+}
+
+/**
+ * Run a full Strata build — scans content files, generates CSS, writes to output path.
+ * Equivalent to `strata --build` from the CLI.
+ */
+export function build(
+  input: string,
+  output: string,
+  options?: StrataBuildOptions
+): Promise<void>
+
+/**
+ * Invalidate the internal build cache, forcing a full cold rebuild on the next build() call.
+ * Call this when content files change programmatically.
+ */
+export function invalidate(): void
+
+/** Marks this module as a PostCSS plugin (required by PostCSS plugin discovery). */
+export const postcss: true

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "strata-css",
+  "version": "1.0.0",
+  "_versioningNote": "Stable: 1.0.0 / 1.1.0 / 2.0.0  |  Beta: 1.1.0-beta.1 / 1.1.0-beta.2",
+  "description": "A modern CSS framework combining Bootstrap components with Tailwind JIT processing",
+  "main": "src/index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": "./src/index.js",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "strata": "bin/strata.js"
+  },
+  "files": [
+  "src/",
+  "bin/",
+  "strata.css",
+  "index.d.ts",
+  "README.md",
+  "LICENSE",
+  "CHANGELOG.md"
+],
+  "scripts": {
+    "dev": "node bin/strata.js --watch",
+    "build": "node bin/strata.js --build",
+    "minify": "node bin/strata.js --minify",
+    "benchmark": "node --expose-gc benchmark/run.js",
+    "publish:stable": "npm publish --tag latest",
+    "publish:beta": "npm publish --tag beta"
+  },
+  "keywords": [
+    "css",
+    "framework",
+    "postcss",
+    "postcss-plugin",
+    "jit",
+    "tailwind",
+    "tailwindcss",
+    "bootstrap",
+    "component-library",
+    "utility-first",
+    "theming",
+    "dark-mode",
+    "css-framework"
+  ],
+  "author": "Aftab Ibrahim Kazi",
+  "license": "MIT",
+  "homepage": "https://aftabibrahimkazi.github.io/strata",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AftabIbrahimKazi/strata.git"
+  },
+  "bugs": {
+    "url": "https://github.com/AftabIbrahimKazi/strata/issues"
+  },
+  "type": "commonjs",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.5.0",
+    "chokidar": "^5.0.0",
+    "cssnano": "^8.0.1",
+    "glob": "^13.0.6",
+    "postcss": "^8.5.14"
+  }
+}

package/src/components/modules/modal.js

@@ -0,0 +1,123 @@
+/*!
+ * Strata Modal Component
+ *
+ * Usage:
+ *   Trigger:  <button data-st-toggle="modal" data-st-target="#myModal">Open</button>
+ *   Dismiss:  <button data-st-dismiss="modal">Close</button>
+ *   Static:   <div class="modal" data-st-backdrop="static" ...>
+ *   API:      Strata.Modal.open('#myModal')  /  Strata.Modal.close()
+ *
+ * Events fired on document:
+ *   st:modal:open   — detail: { modal }
+ *   st:modal:close  — detail: { modal }
+ */
+;(function (win, doc) {
+  'use strict'
+
+  var currentModal = null
+  var backdrop     = null
+
+  function ensureBackdrop() {
+    if (!backdrop) {
+      backdrop = doc.createElement('div')
+      backdrop.className = 'modal-backdrop'
+      doc.body.appendChild(backdrop)
+    }
+    return backdrop
+  }
+
+  function lockScroll() {
+    var sbw = win.innerWidth - doc.documentElement.clientWidth
+    doc.body.style.setProperty('--st-scrollbar-width', sbw + 'px')
+    doc.body.classList.add('modal-open')
+  }
+
+  function unlockScroll() {
+    doc.body.classList.remove('modal-open')
+    doc.body.style.removeProperty('--st-scrollbar-width')
+  }
+
+  function openModal(modal) {
+    if (currentModal === modal) return
+    if (currentModal) closeModal()
+
+    currentModal = modal
+    modal.setAttribute('data-st-visible', 'true')
+    modal.removeAttribute('aria-hidden')
+    modal.setAttribute('aria-modal', 'true')
+
+    var bd = ensureBackdrop()
+    void bd.offsetHeight  // force reflow so transition plays
+    bd.setAttribute('data-st-visible', 'true')
+
+    lockScroll()
+
+    var focusTarget = modal.querySelector('[autofocus]') ||
+                      modal.querySelector('.modal-content')
+    if (focusTarget) setTimeout(function() { focusTarget.focus() }, 50)
+
+    doc.dispatchEvent(new CustomEvent('st:modal:open', { detail: { modal: modal } }))
+  }
+
+  function closeModal() {
+    if (!currentModal) return
+
+    var modal    = currentModal
+    currentModal = null
+
+    modal.setAttribute('data-st-visible', 'false')
+    modal.setAttribute('aria-hidden', 'true')
+    modal.removeAttribute('aria-modal')
+
+    if (backdrop) backdrop.setAttribute('data-st-visible', 'false')
+
+    unlockScroll()
+
+    doc.dispatchEvent(new CustomEvent('st:modal:close', { detail: { modal: modal } }))
+  }
+
+  doc.addEventListener('click', function(e) {
+    var trigger = e.target.closest('[data-st-toggle="modal"]')
+    if (trigger) {
+      var sel = trigger.getAttribute('data-st-target') || trigger.getAttribute('href')
+      if (sel) {
+        var target = doc.querySelector(sel)
+        if (target) openModal(target)
+      }
+      return
+    }
+
+    if (e.target.closest('[data-st-dismiss="modal"]')) {
+      closeModal()
+      return
+    }
+
+    if (currentModal && e.target === currentModal) {
+      var isStatic = currentModal.getAttribute('data-st-backdrop') === 'static'
+      if (isStatic) {
+        currentModal.classList.add('modal-static')
+        var m = currentModal
+        setTimeout(function() { m.classList.remove('modal-static') }, 300)
+      } else {
+        closeModal()
+      }
+    }
+  })
+
+  doc.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && currentModal) {
+      var isStatic = currentModal.getAttribute('data-st-backdrop') === 'static'
+      if (!isStatic) closeModal()
+    }
+  })
+
+  win.Strata = win.Strata || {}
+  win.Strata.Modal = {
+    open:  function(selector) {
+      var el = typeof selector === 'string' ? doc.querySelector(selector) : selector
+      if (el) openModal(el)
+    },
+    close: closeModal
+  }
+
+}(window, document))