@lobergdesign/dot-grid 1.0.2 → 1.0.3

package/.purgecssrc.json

@@ -0,0 +1,26 @@
+{
+  "content": [
+    "./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}",
+    "./public/**/*.html"
+  ],
+  "css": ["./node_modules/@lobergdesign/dot-grid/dist/grid.css"],
+  "safelist": {
+    "standard": ["grid-w", "grid-r", "no-gap", "hidden"],
+    "greedy": [
+      "/^grid-c-\\d{1,2}$/",
+      "/^grid-c-start-\\d{1,2}$/",
+      "/^grid-c-(sm|md|lg|xl|xxl)-\\d{1,2}$/",
+      "/^grid-c-start-(sm|md|lg|xl|xxl)-\\d{1,2}$/",
+      "/^grid-c-vp-(sm|md|lg|xl|xxl)-\\d{1,2}$/",
+      "/^grid-c-start-vp-(sm|md|lg|xl|xxl)-\\d{1,2}$/",
+      "/^grid-[rc]-subgrid$/",
+      "/^grid-r-(fluid-[234]|ram|intrinsic|even|dense|flexible)$/",
+      "/^grid-auto-(fit|fill)$/",
+      "/^place-[tcb]-[lcr]$/",
+      "/^justify-.*$/",
+      "/^grid-c-(min|max|fit|auto|fluid)$/",
+      "/^(hidden|block|grid|flex)-(sm|md|lg|xl|xxl)$/",
+      "/^(hidden|block|grid|flex)-vp-(sm|md|lg|xl|xxl)$/"
+    ]
+  }
+}

package/README.md

@@ -263,6 +263,76 @@ Available: `.justify-start`, `.justify-end`, `.justify-center`, `.justify-betwee
 <div class="grid-c-auto">Auto-sized</div>
 ```
 
+## 🌲 Tree Shaking / PurgeCSS
+
+Like Tailwind CSS, you can significantly reduce the CSS bundle size by removing unused classes using PurgeCSS or similar tools.
+
+### Setup with PurgeCSS
+
+1. **Install PurgeCSS:**
+
+```bash
+npm install --save-dev @fullhuman/postcss-purgecss
+```
+
+2. **Copy the configuration:**
+
+Copy `purgecss.config.js` from the dot-grid package to your project root, or create your own:
+
+```js
+// purgecss.config.js
+module.exports = {
+  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
+  css: ['./node_modules/@lobergdesign/dot-grid/dist/grid.css'],
+  safelist: {
+    greedy: [
+      /^grid-c-\d{1,2}$/,
+      /^grid-c-(sm|md|lg|xl|xxl)-\d{1,2}$/,
+      // ... see purgecss.config.js for full list
+    ],
+  },
+}
+```
+
+3. **Add to your build process:**
+
+```json
+// package.json
+{
+  "scripts": {
+    "purge": "purgecss --config ./purgecss.config.js --output ./dist/grid.purged.css"
+  }
+}
+```
+
+### With PostCSS
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require('@fullhuman/postcss-purgecss')({
+      content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
+      safelist: {
+        greedy: [
+          /^grid-c-/,
+          /^grid-r-/,
+          /^place-/,
+          // Add more patterns as needed
+        ],
+      },
+    }),
+  ],
+}
+```
+
+### Expected Results
+
+- **Full build:** ~28KB / 19KB minified
+- **With PurgeCSS:** Typically 2-5KB depending on usage
+
+See `purgecss.config.js` in the package for complete safelist patterns.
+
 ## 🎨 Customization
 
 Override CSS custom properties in your own stylesheet:
@@ -322,28 +392,6 @@ See the `/examples` directory for complete working examples:
 - `fluid-layout.html` - Auto-responsive fluid grids
 - `subgrid.html` - Subgrid alignment examples
 
-## 🆚 Migration from Original CodePen
-
-### Breaking Changes
-
-1. **Class names updated** - All core classes have been renamed for better clarity:
-
-   - `.wrap` → `.grid-w`
-   - `.row` → `.grid-r`
-   - `.col-*` → `.grid-c-*`
-   - **Migration:** Update all class names in your HTML
-
-2. **Container queries by default** - Responsive classes now use `@container` instead of `@media`
-
-   - **Migration:** Use `.grid-c-vp-{size}-{num}` if you need viewport-based behavior
-
-3. **Placement utilities fixed** - `align-items: top` → `align-items: start`
-
-   - **Migration:** No action needed, now uses correct CSS values
-
-4. **New breakpoints** - Added `xxl` (1536px), adjusted `lg` from 1025px to 1024px
-   - **Migration:** Update breakpoints in your HTML if using exact pixel values
-
 ### New Features (Additive)
 
 - Subgrid support

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobergdesign/dot-grid",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A modern, flexible 12-column CSS Grid system with container queries, fluid layouts, and subgrid support",
   "main": "dist/grid.css",
   "style": "dist/grid.css",
@@ -19,7 +19,9 @@
     "dist",
     "src",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "purgecss.config.js",
+    ".purgecssrc.json"
   ],
   "scripts": {
     "build": "npm run build:css && npm run build:min",

package/purgecss.config.js

@@ -0,0 +1,77 @@
+// PurgeCSS Configuration for dot-grid
+// This is an example configuration for end-users
+// Copy this to your project root and customize as needed
+
+module.exports = {
+  content: [
+    // Scan your source files for class names
+    './src/**/*.{html,js,jsx,ts,tsx,vue,svelte}',
+    './public/**/*.html',
+    // Add more paths as needed
+  ],
+
+  css: [
+    // Path to your compiled dot-grid CSS
+    './node_modules/@lobergdesign/dot-grid/dist/grid.css',
+    // Or if you import the source:
+    // './path/to/compiled/css/with/dot-grid.css'
+  ],
+
+  // Safelist: patterns that should never be purged
+  safelist: {
+    // Safelist all dot-grid core classes
+    standard: [
+      'grid-w',
+      'grid-r',
+      'no-gap',
+      'hidden',
+    ],
+
+    // Safelist patterns using regex
+    greedy: [
+      // Grid column classes: grid-c-1 through grid-c-12
+      /^grid-c-\d{1,2}$/,
+
+      // Grid column start: grid-c-start-1 through grid-c-start-12
+      /^grid-c-start-\d{1,2}$/,
+
+      // Responsive column classes: grid-c-sm-6, grid-c-md-4, etc.
+      /^grid-c-(sm|md|lg|xl|xxl)-\d{1,2}$/,
+
+      // Responsive start: grid-c-start-sm-1, etc.
+      /^grid-c-start-(sm|md|lg|xl|xxl)-\d{1,2}$/,
+
+      // Viewport-based: grid-c-vp-md-6, etc.
+      /^grid-c-vp-(sm|md|lg|xl|xxl)-\d{1,2}$/,
+      /^grid-c-start-vp-(sm|md|lg|xl|xxl)-\d{1,2}$/,
+
+      // Subgrid classes
+      /^grid-[rc]-subgrid$/,
+
+      // Fluid row classes
+      /^grid-r-(fluid-[234]|ram|intrinsic|even|dense|flexible)$/,
+
+      // Grid auto classes
+      /^grid-auto-(fit|fill)$/,
+
+      // Placement utilities: place-t-l, place-c-c, etc.
+      /^place-[tcb]-[lcr]$/,
+
+      // Justify utilities
+      /^justify-(start|end|center|between|around|evenly|space-).*$/,
+
+      // Sizing utilities
+      /^grid-c-(min|max|fit|auto|fluid)$/,
+
+      // Display utilities (responsive)
+      /^(hidden|block|grid|flex)-(sm|md|lg|xl|xxl)$/,
+      /^(hidden|block|grid|flex)-vp-(sm|md|lg|xl|xxl)$/,
+    ],
+  },
+
+  // Extract dynamic class names from JavaScript strings
+  defaultExtractor: (content) => {
+    // Match class names in strings, including dynamically generated ones
+    return content.match(/[A-Za-z0-9-_:/]+/g) || [];
+  },
+};