@melcanz85/chaincss 1.11.2 → 1.11.4

package/README.md

@@ -4,25 +4,54 @@
 [![npm version](https://img.shields.io/npm/v/@melcanz85/chaincss.svg)](https://www.npmjs.com/package/@melcanz85/chaincss)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://melcanz08.github.io/chaincss_react_website/)
+[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://chaincss.dev)
 
 **Write CSS with JavaScript. Lets you CHOOSE your runtime cost. DUAL MODE**
 
-**Build-time compilation** → Pure CSS, zero JavaScript in browser
+* **Build-time compilation** → Pure CSS, zero JavaScript in browser
 
-**Runtime hooks** → Dynamic, prop-based styles when you need them
+* **Runtime hooks** → Dynamic, prop-based styles when you need them
 
-## Installation
+### Requirements
 
-* Install [nodejs.](https://nodejs.org/en/download)
+* Node.js 18.x or higher [download.](https://nodejs.org/en/download)
+
+* For React: React 16.8+ (hooks support required)
+
+## Installation & Setup
+
+### For Static/Build-time Usage
 
 ```bash
 
     npm install @melcanz85/chaincss
 ```
 
-* In your html add a link tag with an href value of style/global.css this serves as the 
-stylesheet for your entire webpage. You dont need to touch this css file.
+### For React with Runtime Hooks
+
+```bash
+  npm install @melcanz85/chaincss
+  # React hooks are included in the main package
+```
+
+## Quick Start
+
+  **Syntax**
+
+1. Create your first .jcss file
+
+```javascript
+// main.jcss
+<@
+  const text = $().color('blue').textAlign('center').block('p');
+
+  //text.fontSize = '2rem';
+  
+  run(text);
+@>
+```
+
+2. Add the stylesheet link to your HTML
 
 ```html
   <!-- index.html -->
@@ -38,32 +67,53 @@ stylesheet for your entire webpage. You dont need to touch this css file.
   </html>
 ```
 
-## Syntax
+3. Run the compiler
+
+```bash
+  npx chaincss ./src/main.jcss ./style --watch 
+```
+
+* *Note: The first run creates ./chaincss.config.js with default values. Edit this file to customize your build.*
+
+```javascript
+
+  module.exports = {
+    atomic: {
+      enabled: true, // enable this for 
+      threshold: 3,
+      naming: 'hash',
+      cache: true,
+      cachePath: './.chaincss-cache',
+      minify: true
+    },
+    prefixer: {
+      mode: 'auto',
+      browsers: ['> 0.5%', 'last 2 versions', 'not dead'],
+      enabled: true,
+      sourceMap: true,
+      sourceMapInline: false
+    }
+  };
+
+````
+
+4. Open index.html in your browser — your styles should be applied!
+
+* To modify or add styles just add a property to the newly created style object before the run() function. They become javascript regular objects.
 
 ```javascript
 // main.jcss
 <@
   const text = $().color('blue').textAlign('center').block('p');
 
-  //text.fontSize = '2rem';
+  text.fontSize = '2rem';
+  text.padding = '10px';
+  text.backgroundColor = 'rgb(106, 90, 205)';
   
   run(text);
 @>
 ```
 
-* To apply this styles run this in your terminal / command prompt.
-
-```bash
-  npx chaincss ./src/main.jcss ./style --watch 
-````
-
-* Open your index.html in the browser. 
-
-* To make changes uncomment styles between text variable declaration and run() method.
-
-* Thats how you add or modify the style block you treat them as a regular javascript object.
-
-
 ### File Structure
 
 ```text
@@ -104,15 +154,6 @@ stylesheet for your entire webpage. You dont need to touch this css file.
     compile(button);
   @>
 ```
-..then run this in terminal/command prompt
-
-```bash
-  npx chaincss ./src/main.jcss ./style --watch 
-  # ./style/global.css generated!
-````
-* Note: running `npx chaincss ./src/main.jcss ./style --watch ` for the first time will
-        generate ./chaincss.config.js with default values. You can edit this to 
-        customize your build!.
 
 ### Mode 2: Runtime (React Hooks)
 
@@ -176,14 +217,16 @@ stylesheet for your entire webpage. You dont need to touch this css file.
 
 ## Use BOTH in the Same Project!
 
-```jsx
+```javascript
     // Best of both worlds:
     // - Layout styles → Build-time (zero cost)
     // - Interactive styles → Runtime (dynamic)
 
     // chaincss/layout.jcss (build-time)
     const grid = $().display('grid').gap('1rem').block('.grid');
+```
 
+```jsx
     // components/Card.jsx (runtime)
     function Card({ isHighlighted }) {
       const styles = useChainStyles(() => {
@@ -239,30 +282,6 @@ stylesheet for your entire webpage. You dont need to touch this css file.
       .block('.btn');
 ````
 
-### Basic Example
-
-**chaincss/button.jcss**
-
-```javascript
-    const button = $()
-      .backgroundColor('#667eea')
-      .color('white')
-      .padding('0.75rem 1.5rem')
-      .borderRadius('0.375rem')
-      .fontWeight('600')
-      .block('.btn');
-
-    module.exports = button;
-```
-**chaincss/main.jcss**
-
-```javascript
-    <@
-      const button  = get('./button.jcss');
-      compile({ button });
-    @>
-````
-
 ## Advanced Features
 
 ### Design Tokens
@@ -283,8 +302,11 @@ stylesheet for your entire webpage. You dont need to touch this css file.
         lg: '1.5rem'
       }
     });
+```
 
-    // In your styles
+**In your styles**
+
+```javascript
     const button = $()
       .color('$colors.primary')     // ← Token syntax!
       .padding('$spacing.md')
@@ -307,65 +329,6 @@ stylesheet for your entire webpage. You dont need to touch this css file.
 **After (atomic CSS):** 499 chars → **90% smaller!**
 
 
-## Quick Start Guides
-
-### With Node.js (Vanilla)
-
-```bash
-# 1. Install
-npm install @melcanz85/chaincss
-
-# 2. Create your first .jcss file
-mkdir chaincss
-echo "const hello = $().color('red').block('.hello');
-compile({ hello });" > chaincss/main.jcss
-
-# 3. Build
-  npx chaincss ./src/main.jcss ./style --watch & node server.js
-# ./style/global.css generated!
-```
-
-### With React + Vite
-
-```bash
-    # 1. Create React app
-    npm create vite@latest my-app -- --template react
-    cd my-app
-
-    # 2. Install ChainCSS
-    npm install @melcanz85/chaincss
-
-    # 3. Create component with styles
-    mkdir -p src/components/Button
-```
-
-**src/components/Button/Button.jsx**
-
-```jsx
-
-    import { useChainStyles } from '@melcanz85/chaincss';
-
-    export function Button({ variant = 'primary', children }) {
-      const styles = useChainStyles(() => {
-        const button = $()
-          .backgroundColor(variant === 'primary' ? '#667eea' : '#48bb78')
-          .color('white')
-          .padding('0.5rem 1rem')
-          .borderRadius('0.375rem')
-          .hover()
-            .transform('translateY(-2px)')
-            .boxShadow('0 4px 6px rgba(0,0,0,0.1)')
-          .block()
-          return { button };
-      });
-      return <button className={styles.button}>{children}</button>;
-    }
-```
-
-
-See ChainCSS in action! Visit our interactive demo site - [https://melcanz08.github.io/chaincss_react_website/](https://melcanz08.github.io/chaincss_react_website/)
-
-
 ## Performance Comparison
 
     Approach                Runtime Cost    Bundle Size         Dynamic Styles      Learning Curve
@@ -382,40 +345,42 @@ See ChainCSS in action! Visit our interactive demo site - [https://melcanz08.git
 
     CSS Modules             Zero            Just CSS            None                Low
 
-**ChainCSS a "DUAL MODE optioned" css-in-js library**
+**ChainCSS a "DUAL MODE" css-in-js library**
+
 
 ## API Reference
 
+
 ### Core Functions
 
-    Function                        Description
+Function                        Description
 
-    $()                           Create a new chain builder
+`$()`                           Create a new chain builder
 
-    .block(selector)              End chain and assign selector(s)
+`.block(selector)`              End chain and assign selector(s)
 
-    compile(styles)               Compile style objects to CSS
+`compile(styles)`               Compile style objects to CSS
 
-    run(...styles)                Process inline styles
+`run(...styles)`                Process inline styles
 
-    get(filename)                 Import .jcss files
+`get(filename)`                 Import `.jcss` files
 
-    processor(input, output)      Build-time processor
+`processor(input, output)`      Build-time processor
 
 
 ### React Hooks
 
-    Hook                                        Description
+Hook                                        Description
 
-    useChainStyles(styles, options)           Basic styles hook
+`useChainStyles(styles, options)`           Basic styles hook
 
-    useDynamicChainStyles(factory, deps)      Styles that depend on props/state
+`useDynamicChainStyles(factory, deps)`      Styles that depend on props/state
 
-    useThemeChainStyles(styles, theme)        Theme-aware styles
+`useThemeChainStyles(styles, theme)`        Theme-aware styles
 
-    ChainCSSGlobal                            Global styles component
+`ChainCSSGlobal`                            Global styles component
 
-    cx(...classes)                            Conditional class merging
+`cx(...classes)`                            Conditional class merging
 
 
 ## Editor Support
@@ -442,6 +407,43 @@ See ChainCSS in action! Visit our interactive demo site - [https://melcanz08.git
     au BufRead,BufNewFile `*.jcss` setfiletype javascript
 ```
 
+### Troubleshooting
+
+**Q: My styles aren't appearing in the browser**
+
+* Ensure your HTML includes `<link rel="stylesheet" href="style/global.css">`
+
+* Run `npx chaincss` at least once to generate the initial CSS file
+
+* Check that your `.jcss` files are in the correct directory
+
+* Verify the path in your `npx chaincss` command matches your file structure
+
+**Q: React hooks aren't working**
+
+* Verify you're using React 16.8 or newer
+
+* Import from `@melcanz85/chaincss` (not a subpath)
+
+**Q: The `get()` function returns undefined**
+
+* Ensure the imported file exports something (`use module.exports = ...`)
+
+* Check that the file path is correct relative to your `main.jcss`
+
+**Q: Changes aren't reflected after saving**
+
+* Make sure the `--watch` flag is active
+
+* If not using watch mode, re-run the build command
+
+* Clear your browser cache or do a hard refresh
+
+
+## See ChainCSS in Action
+
+Visit our interactive demo site: [https://www.chaincss.dev/](https://www.chaincss.dev)
+
 ## Contributing
 
 Contributions are welcome! Whether it's:

package/browser/rtt.js

@@ -2,23 +2,18 @@ import { tokens, createTokens, responsive } from '../shared/tokens.mjs';
 
 let cssProperties = [];
 
-// Instead of using dynamic import with unsupported options
-// Use a try-catch with proper dynamic import syntax
 const loadCSSProperties = async () => {
   try {
-    // Remove the unsupported 'ignore' option
     const module = await import('../node/css-properties.json', { 
       assert: { type: 'json' }
     });
     return module.default;
   } catch (e) {
-    // If the file doesn't exist in the package, fallback to CDN
     console.log('CSS properties file not found in package, will fetch from CDN');
     return null;
   }
 };
 
-// Initialize asynchronously
 const chain = {
   cssOutput: undefined,
   catcher: {},
@@ -28,21 +23,18 @@ const chain = {
       return;
     }
     
-    // Try to load from local file first
     const localProperties = await loadCSSProperties();
     if (localProperties && localProperties.length > 0) {
       this.cachedValidProperties = localProperties;
       return;
     }
     
-    // Fallback to CDN
     try {
       console.log('Loading CSS properties from CDN...');
       const response = await fetch('https://raw.githubusercontent.com/mdn/data/main/css/properties.json');
       const data = await response.json();
       const allProperties = Object.keys(data);
       
-      // Strip vendor prefixes and remove duplicates
       const baseProperties = new Set();
       allProperties.forEach(prop => {
         const baseProp = prop.replace(/^-(webkit|moz|ms|o)-/, '');
@@ -59,10 +51,8 @@ const chain = {
   }
 };
 
-// Start initialization but don't await (non-blocking)
 chain.initializeProperties();
 
-// Rest of your code remains the same...
 const resolveToken = (value, useTokens) => {
   if (!useTokens || typeof value !== 'string' || !value.startsWith('$')) {
     return value;
@@ -75,37 +65,77 @@ const resolveToken = (value, useTokens) => {
   return tokenValue;
 };
 
-function $(useTokens = true){
-  const catcher = {};
+function $(useTokens = true) {
+  const regularStyles = {};
+  const hoverStyles = {};
+  let isBuildingHover = false;
+  
   const validProperties = chain.cachedValidProperties;
-  const handler = {
-    get: (target, prop) => {
-      if (prop === 'block') {
-        return function(...args) {
-          if (args.length === 0) {
-            const result = { ...catcher };
-            Object.keys(catcher).forEach(key => delete catcher[key]);
+  
+  // Create the main proxy
+  const createProxy = () => {
+    const handler = {
+      get: (target, prop) => {
+        // Handle .block()
+        if (prop === 'block') {
+          return (...args) => {
+            const result = { ...regularStyles };
+            
+            // Add hover styles if any exist
+            if (Object.keys(hoverStyles).length > 0) {
+              result.hover = { ...hoverStyles };
+            }
+            
+            if (args.length > 0) {
+              result.selectors = args;
+            }
+            
+            // Clear for next use
+            Object.keys(regularStyles).forEach(key => delete regularStyles[key]);
+            Object.keys(hoverStyles).forEach(key => delete hoverStyles[key]);
+            isBuildingHover = false;
+            
             return result;
-          }
-          const result = {
-            selectors: args,
-            ...catcher
           };
-          Object.keys(catcher).forEach(key => delete catcher[key]);
-          return result;
+        }
+        
+        // Handle .hover()
+        if (prop === 'hover') {
+          return () => {
+            isBuildingHover = true;
+            return proxy; // Return the same proxy, just with hover mode on
+          };
+        }
+
+        if(prop==='end'){
+          return () => {
+            isBuildingHover = false;
+            return proxy; // Return the same proxy, but end of hover mode
+          };
+        }
+        
+        // Handle regular CSS properties
+        const cssProperty = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+        if (validProperties && validProperties.length > 0 && !validProperties.includes(cssProperty)) {
+          console.warn(`Warning: '${cssProperty}' may not be a valid CSS property`);
+        }
+        
+        return (value) => {
+          console.log(`📦 ${prop} = ${value}, isBuildingHover = ${isBuildingHover}`);
+          if (isBuildingHover) {
+            hoverStyles[prop] = resolveToken(value, useTokens);
+          } else {
+            regularStyles[prop] = resolveToken(value, useTokens);
+          }
+          return proxy;
         };
       }
-      const cssProperty = prop.replace(/([A-Z])/g, '-$1').toLowerCase();     
-      if (validProperties && validProperties.length > 0 && !validProperties.includes(cssProperty)) {
-        console.warn(`Warning: '${cssProperty}' may not be a valid CSS property`);
-      }
-      return function(value) {
-        catcher[prop] = resolveToken(value, useTokens);
-        return proxy;
-      };
-    }
+    };
+    
+    return new Proxy({}, handler);
   };
-  const proxy = new Proxy({}, handler);
+  
+  const proxy = createProxy();
   return proxy;
 }
 
@@ -134,14 +164,38 @@ const compile = (obj) => {
     if (obj.hasOwnProperty(key)) {
       const element = obj[key];
       let selectors = element.selectors || [];
-      let elementCSS = '';
+      
+      // Generate normal styles
+      let normalCSS = '';
+      let hoverCSS = '';
+      
       for (let prop in element) {
-        if (element.hasOwnProperty(prop) && prop !== 'selectors') {
+        if (element.hasOwnProperty(prop) && prop !== 'selectors' && prop !== 'hover') {
           const kebabKey = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
-          elementCSS += `  ${kebabKey}: ${element[prop]};\n`;
+          normalCSS += `  ${kebabKey}: ${element[prop]};\n`;
         }
       }
-      cssString += `${selectors.join(', ')} {\n${elementCSS}}\n`;
+      
+      // Generate hover styles if present
+      if (element.hover && typeof element.hover === 'object') {
+        for (let prop in element.hover) {
+          if (element.hover.hasOwnProperty(prop)) {
+            const kebabKey = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+            hoverCSS += `  ${kebabKey}: ${element.hover[prop]};\n`;
+          }
+        }
+      }
+      
+      // Add normal styles
+      if (normalCSS) {
+        cssString += `${selectors.join(', ')} {\n${normalCSS}}\n`;
+      }
+      
+      // Add hover styles as separate rule
+      if (hoverCSS) {
+        const hoverSelectors = selectors.map(s => `${s}:hover`);
+        cssString += `${hoverSelectors.join(', ')} {\n${hoverCSS}}\n`;
+      }
     }
   }
   chain.cssOutput = cssString.trim();

package/node/strVal.js

@@ -2,7 +2,7 @@ const strVal = {
 	userConf: `// Project Configuration
 module.exports = {
   atomic: {
-    enabled: false,
+    enabled: true,
     threshold: 3,
     naming: 'hash',
     cache: true,
@@ -13,7 +13,7 @@ module.exports = {
     mode: 'auto',
     browsers: ['> 0.5%', 'last 2 versions', 'not dead'],
     enabled: true,
-    sourceMap: false,
+    sourceMap: true,
     sourceMapInline: false
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.11.2",
+  "version": "1.11.4",
   "description": "A simple package transpiler for js to css",
   "exports": {
     ".": {

package/node/css-properties.json

@@ -1,633 +0,0 @@
-[
-  "--*",
-  "accelerator",
-  "accent-color",
-  "align-content",
-  "align-items",
-  "align-self",
-  "align-tracks",
-  "alignment-baseline",
-  "all",
-  "anchor-name",
-  "anchor-scope",
-  "animation",
-  "animation-composition",
-  "animation-delay",
-  "animation-direction",
-  "animation-duration",
-  "animation-fill-mode",
-  "animation-iteration-count",
-  "animation-name",
-  "animation-play-state",
-  "animation-range",
-  "animation-range-end",
-  "animation-range-start",
-  "animation-timeline",
-  "animation-timing-function",
-  "animation-trigger",
-  "appearance",
-  "aspect-ratio",
-  "backdrop-filter",
-  "backface-visibility",
-  "background",
-  "background-attachment",
-  "background-blend-mode",
-  "background-clip",
-  "background-color",
-  "background-image",
-  "background-origin",
-  "background-position",
-  "background-position-x",
-  "background-position-y",
-  "background-repeat",
-  "background-size",
-  "baseline-shift",
-  "baseline-source",
-  "binding",
-  "block-progression",
-  "block-size",
-  "border",
-  "border-before",
-  "border-before-color",
-  "border-before-style",
-  "border-before-width",
-  "border-block",
-  "border-block-color",
-  "border-block-end",
-  "border-block-end-color",
-  "border-block-end-style",
-  "border-block-end-width",
-  "border-block-start",
-  "border-block-start-color",
-  "border-block-start-style",
-  "border-block-start-width",
-  "border-block-style",
-  "border-block-width",
-  "border-bottom",
-  "border-bottom-color",
-  "border-bottom-colors",
-  "border-bottom-left-radius",
-  "border-bottom-right-radius",
-  "border-bottom-style",
-  "border-bottom-width",
-  "border-collapse",
-  "border-color",
-  "border-end-end-radius",
-  "border-end-start-radius",
-  "border-image",
-  "border-image-outset",
-  "border-image-repeat",
-  "border-image-slice",
-  "border-image-source",
-  "border-image-width",
-  "border-inline",
-  "border-inline-color",
-  "border-inline-end",
-  "border-inline-end-color",
-  "border-inline-end-style",
-  "border-inline-end-width",
-  "border-inline-start",
-  "border-inline-start-color",
-  "border-inline-start-style",
-  "border-inline-start-width",
-  "border-inline-style",
-  "border-inline-width",
-  "border-left",
-  "border-left-color",
-  "border-left-colors",
-  "border-left-style",
-  "border-left-width",
-  "border-radius",
-  "border-right",
-  "border-right-color",
-  "border-right-colors",
-  "border-right-style",
-  "border-right-width",
-  "border-spacing",
-  "border-start-end-radius",
-  "border-start-start-radius",
-  "border-style",
-  "border-top",
-  "border-top-color",
-  "border-top-colors",
-  "border-top-left-radius",
-  "border-top-right-radius",
-  "border-top-style",
-  "border-top-width",
-  "border-width",
-  "bottom",
-  "box-align",
-  "box-decoration-break",
-  "box-direction",
-  "box-flex",
-  "box-flex-group",
-  "box-lines",
-  "box-ordinal-group",
-  "box-orient",
-  "box-pack",
-  "box-reflect",
-  "box-shadow",
-  "box-sizing",
-  "break-after",
-  "break-before",
-  "break-inside",
-  "caption-side",
-  "caret",
-  "caret-animation",
-  "caret-color",
-  "caret-shape",
-  "clear",
-  "clip",
-  "clip-path",
-  "clip-rule",
-  "color",
-  "color-interpolation-filters",
-  "color-scheme",
-  "column-count",
-  "column-fill",
-  "column-gap",
-  "column-height",
-  "column-rule",
-  "column-rule-color",
-  "column-rule-style",
-  "column-rule-width",
-  "column-span",
-  "column-width",
-  "column-wrap",
-  "columns",
-  "contain",
-  "contain-intrinsic-block-size",
-  "contain-intrinsic-height",
-  "contain-intrinsic-inline-size",
-  "contain-intrinsic-size",
-  "contain-intrinsic-width",
-  "container",
-  "container-name",
-  "container-type",
-  "content",
-  "content-visibility",
-  "content-zoom-chaining",
-  "content-zoom-limit",
-  "content-zoom-limit-max",
-  "content-zoom-limit-min",
-  "content-zoom-snap",
-  "content-zoom-snap-points",
-  "content-zoom-snap-type",
-  "content-zooming",
-  "context-properties",
-  "corner-block-end-shape",
-  "corner-block-start-shape",
-  "corner-bottom-left-shape",
-  "corner-bottom-right-shape",
-  "corner-bottom-shape",
-  "corner-end-end-shape",
-  "corner-end-start-shape",
-  "corner-inline-end-shape",
-  "corner-inline-start-shape",
-  "corner-left-shape",
-  "corner-right-shape",
-  "corner-shape",
-  "corner-start-end-shape",
-  "corner-start-start-shape",
-  "corner-top-left-shape",
-  "corner-top-right-shape",
-  "corner-top-shape",
-  "counter-increment",
-  "counter-reset",
-  "counter-set",
-  "cursor",
-  "cx",
-  "cy",
-  "d",
-  "direction",
-  "display",
-  "dominant-baseline",
-  "dynamic-range-limit",
-  "empty-cells",
-  "field-sizing",
-  "fill",
-  "fill-opacity",
-  "fill-rule",
-  "filter",
-  "flex",
-  "flex-basis",
-  "flex-direction",
-  "flex-flow",
-  "flex-grow",
-  "flex-shrink",
-  "flex-wrap",
-  "float",
-  "float-edge",
-  "flood-color",
-  "flood-opacity",
-  "flow-from",
-  "flow-into",
-  "font",
-  "font-family",
-  "font-feature-settings",
-  "font-kerning",
-  "font-language-override",
-  "font-optical-sizing",
-  "font-palette",
-  "font-size",
-  "font-size-adjust",
-  "font-smooth",
-  "font-stretch",
-  "font-style",
-  "font-synthesis",
-  "font-synthesis-position",
-  "font-synthesis-small-caps",
-  "font-synthesis-style",
-  "font-synthesis-weight",
-  "font-variant",
-  "font-variant-alternates",
-  "font-variant-caps",
-  "font-variant-east-asian",
-  "font-variant-emoji",
-  "font-variant-ligatures",
-  "font-variant-numeric",
-  "font-variant-position",
-  "font-variation-settings",
-  "font-weight",
-  "font-width",
-  "force-broken-image-icon",
-  "forced-color-adjust",
-  "gap",
-  "grid",
-  "grid-area",
-  "grid-auto-columns",
-  "grid-auto-flow",
-  "grid-auto-rows",
-  "grid-column",
-  "grid-column-end",
-  "grid-column-gap",
-  "grid-column-start",
-  "grid-columns",
-  "grid-gap",
-  "grid-row",
-  "grid-row-end",
-  "grid-row-gap",
-  "grid-row-start",
-  "grid-rows",
-  "grid-template",
-  "grid-template-areas",
-  "grid-template-columns",
-  "grid-template-rows",
-  "hanging-punctuation",
-  "height",
-  "high-contrast-adjust",
-  "hyphenate-character",
-  "hyphenate-limit-chars",
-  "hyphenate-limit-lines",
-  "hyphenate-limit-zone",
-  "hyphens",
-  "image-orientation",
-  "image-rendering",
-  "image-resolution",
-  "ime-align",
-  "ime-mode",
-  "initial-letter",
-  "initial-letter-align",
-  "inline-size",
-  "inset",
-  "inset-block",
-  "inset-block-end",
-  "inset-block-start",
-  "inset-inline",
-  "inset-inline-end",
-  "inset-inline-start",
-  "interactivity",
-  "interest-delay",
-  "interest-delay-end",
-  "interest-delay-start",
-  "interpolate-size",
-  "isolation",
-  "justify-content",
-  "justify-items",
-  "justify-self",
-  "justify-tracks",
-  "left",
-  "letter-spacing",
-  "lighting-color",
-  "line-break",
-  "line-clamp",
-  "line-height",
-  "line-height-step",
-  "list-style",
-  "list-style-image",
-  "list-style-position",
-  "list-style-type",
-  "margin",
-  "margin-block",
-  "margin-block-end",
-  "margin-block-start",
-  "margin-bottom",
-  "margin-inline",
-  "margin-inline-end",
-  "margin-inline-start",
-  "margin-left",
-  "margin-right",
-  "margin-top",
-  "margin-trim",
-  "marker",
-  "marker-end",
-  "marker-mid",
-  "marker-start",
-  "mask",
-  "mask-attachment",
-  "mask-border",
-  "mask-border-mode",
-  "mask-border-outset",
-  "mask-border-repeat",
-  "mask-border-slice",
-  "mask-border-source",
-  "mask-border-width",
-  "mask-clip",
-  "mask-composite",
-  "mask-image",
-  "mask-mode",
-  "mask-origin",
-  "mask-position",
-  "mask-position-x",
-  "mask-position-y",
-  "mask-repeat",
-  "mask-repeat-x",
-  "mask-repeat-y",
-  "mask-size",
-  "mask-type",
-  "masonry-auto-flow",
-  "math-depth",
-  "math-shift",
-  "math-style",
-  "max-block-size",
-  "max-height",
-  "max-inline-size",
-  "max-lines",
-  "max-width",
-  "min-block-size",
-  "min-height",
-  "min-inline-size",
-  "min-width",
-  "mix-blend-mode",
-  "object-fit",
-  "object-position",
-  "object-view-box",
-  "offset",
-  "offset-anchor",
-  "offset-distance",
-  "offset-path",
-  "offset-position",
-  "offset-rotate",
-  "opacity",
-  "order",
-  "orient",
-  "orphans",
-  "outline",
-  "outline-color",
-  "outline-offset",
-  "outline-radius",
-  "outline-radius-bottomleft",
-  "outline-radius-bottomright",
-  "outline-radius-topleft",
-  "outline-radius-topright",
-  "outline-style",
-  "outline-width",
-  "overflow",
-  "overflow-anchor",
-  "overflow-block",
-  "overflow-clip-box",
-  "overflow-clip-margin",
-  "overflow-inline",
-  "overflow-scrolling",
-  "overflow-style",
-  "overflow-wrap",
-  "overflow-x",
-  "overflow-y",
-  "overlay",
-  "overscroll-behavior",
-  "overscroll-behavior-block",
-  "overscroll-behavior-inline",
-  "overscroll-behavior-x",
-  "overscroll-behavior-y",
-  "padding",
-  "padding-block",
-  "padding-block-end",
-  "padding-block-start",
-  "padding-bottom",
-  "padding-inline",
-  "padding-inline-end",
-  "padding-inline-start",
-  "padding-left",
-  "padding-right",
-  "padding-top",
-  "page",
-  "page-break-after",
-  "page-break-before",
-  "page-break-inside",
-  "paint-order",
-  "perspective",
-  "perspective-origin",
-  "place-content",
-  "place-items",
-  "place-self",
-  "pointer-events",
-  "position",
-  "position-anchor",
-  "position-area",
-  "position-try",
-  "position-try-fallbacks",
-  "position-try-order",
-  "position-visibility",
-  "print-color-adjust",
-  "quotes",
-  "r",
-  "reading-flow",
-  "reading-order",
-  "resize",
-  "right",
-  "rotate",
-  "row-gap",
-  "ruby-align",
-  "ruby-merge",
-  "ruby-overhang",
-  "ruby-position",
-  "rx",
-  "ry",
-  "scale",
-  "scroll-behavior",
-  "scroll-chaining",
-  "scroll-initial-target",
-  "scroll-limit",
-  "scroll-limit-x-max",
-  "scroll-limit-x-min",
-  "scroll-limit-y-max",
-  "scroll-limit-y-min",
-  "scroll-margin",
-  "scroll-margin-block",
-  "scroll-margin-block-end",
-  "scroll-margin-block-start",
-  "scroll-margin-bottom",
-  "scroll-margin-inline",
-  "scroll-margin-inline-end",
-  "scroll-margin-inline-start",
-  "scroll-margin-left",
-  "scroll-margin-right",
-  "scroll-margin-top",
-  "scroll-marker-group",
-  "scroll-padding",
-  "scroll-padding-block",
-  "scroll-padding-block-end",
-  "scroll-padding-block-start",
-  "scroll-padding-bottom",
-  "scroll-padding-inline",
-  "scroll-padding-inline-end",
-  "scroll-padding-inline-start",
-  "scroll-padding-left",
-  "scroll-padding-right",
-  "scroll-padding-top",
-  "scroll-rails",
-  "scroll-snap-align",
-  "scroll-snap-coordinate",
-  "scroll-snap-destination",
-  "scroll-snap-points-x",
-  "scroll-snap-points-y",
-  "scroll-snap-stop",
-  "scroll-snap-type",
-  "scroll-snap-type-x",
-  "scroll-snap-type-y",
-  "scroll-snap-x",
-  "scroll-snap-y",
-  "scroll-target-group",
-  "scroll-timeline",
-  "scroll-timeline-axis",
-  "scroll-timeline-name",
-  "scroll-translation",
-  "scrollbar-3dlight-color",
-  "scrollbar-arrow-color",
-  "scrollbar-base-color",
-  "scrollbar-color",
-  "scrollbar-darkshadow-color",
-  "scrollbar-face-color",
-  "scrollbar-gutter",
-  "scrollbar-highlight-color",
-  "scrollbar-shadow-color",
-  "scrollbar-track-color",
-  "scrollbar-width",
-  "shape-image-threshold",
-  "shape-margin",
-  "shape-outside",
-  "shape-rendering",
-  "speak-as",
-  "stack-sizing",
-  "stop-color",
-  "stop-opacity",
-  "stroke",
-  "stroke-color",
-  "stroke-dasharray",
-  "stroke-dashoffset",
-  "stroke-linecap",
-  "stroke-linejoin",
-  "stroke-miterlimit",
-  "stroke-opacity",
-  "stroke-width",
-  "tab-size",
-  "table-layout",
-  "tap-highlight-color",
-  "text-align",
-  "text-align-last",
-  "text-anchor",
-  "text-autospace",
-  "text-blink",
-  "text-box",
-  "text-box-edge",
-  "text-box-trim",
-  "text-combine-upright",
-  "text-decoration",
-  "text-decoration-color",
-  "text-decoration-inset",
-  "text-decoration-line",
-  "text-decoration-skip",
-  "text-decoration-skip-ink",
-  "text-decoration-style",
-  "text-decoration-thickness",
-  "text-emphasis",
-  "text-emphasis-color",
-  "text-emphasis-position",
-  "text-emphasis-style",
-  "text-fill-color",
-  "text-indent",
-  "text-justify",
-  "text-orientation",
-  "text-overflow",
-  "text-rendering",
-  "text-shadow",
-  "text-size-adjust",
-  "text-spacing-trim",
-  "text-stroke",
-  "text-stroke-color",
-  "text-stroke-width",
-  "text-transform",
-  "text-underline-offset",
-  "text-underline-position",
-  "text-wrap",
-  "text-wrap-mode",
-  "text-wrap-style",
-  "timeline-scope",
-  "timeline-trigger",
-  "timeline-trigger-activation-range",
-  "timeline-trigger-activation-range-end",
-  "timeline-trigger-activation-range-start",
-  "timeline-trigger-active-range",
-  "timeline-trigger-active-range-end",
-  "timeline-trigger-active-range-start",
-  "timeline-trigger-name",
-  "timeline-trigger-source",
-  "top",
-  "touch-action",
-  "touch-callout",
-  "touch-select",
-  "transform",
-  "transform-box",
-  "transform-origin",
-  "transform-style",
-  "transition",
-  "transition-behavior",
-  "transition-delay",
-  "transition-duration",
-  "transition-property",
-  "transition-timing-function",
-  "translate",
-  "trigger-scope",
-  "unicode-bidi",
-  "user-focus",
-  "user-input",
-  "user-modify",
-  "user-select",
-  "vector-effect",
-  "vertical-align",
-  "view-timeline",
-  "view-timeline-axis",
-  "view-timeline-inset",
-  "view-timeline-name",
-  "view-transition-class",
-  "view-transition-name",
-  "visibility",
-  "white-space",
-  "white-space-collapse",
-  "widows",
-  "width",
-  "will-change",
-  "window-dragging",
-  "window-shadow",
-  "word-break",
-  "word-spacing",
-  "word-wrap",
-  "wrap-flow",
-  "wrap-margin",
-  "wrap-through",
-  "writing-mode",
-  "x",
-  "y",
-  "z-index",
-  "zoom"
-]