Injecting CSS styles into Grid component

alexanderkalachev · Oct 26, 2024 · 16add85 · 16add85
1 parent 2fcfd5d
commit 16add85
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 11 deletions.
diff --git a/packages/@weresk/maket/CHANGELOG.md b/packages/@weresk/maket/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @weresk/maket
 
+## 0.1.9
+
+### Patch Changes
+
+- Injecting CSS styles into Grid component
+
 ## 0.1.8
 
 ### Patch Changes

diff --git a/packages/@weresk/maket/package.json b/packages/@weresk/maket/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@weresk/maket",
-    "version": "0.1.8",
+    "version": "0.1.9",
     "private": false,
     "exports": {
         ".": {

diff --git a/packages/@weresk/maket/src/client/Grid/Grid.tsx b/packages/@weresk/maket/src/client/Grid/Grid.tsx
@@ -1,5 +1,4 @@
 "use client";
-import "./Grid.styles.css";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useState } from "react";
 
@@ -21,15 +20,73 @@ export default function Grid(props: GridProps) {
 
     if (showGrid !== "off") {
         return (
-            <div className={`maket-grid-container ${className || ""}`}>
-                <div className="maket-grid-rows"></div>
-                <div className="maket-grid-columns">
-                    {[...new Array(24)].map((x, i) => (
-                        <div className="maket-grid-column" key={i}></div>
-                    ))}
+            <>
+                <div className={`maket-grid-container ${className || ""}`}>
+                    <div className="maket-grid-rows"></div>
+                    <div className="maket-grid-columns">
+                        {[...new Array(24)].map((x, i) => (
+                            <div className="maket-grid-column" key={i}></div>
+                        ))}
+                    </div>
+                    <div className="maket-grid-units"></div>
                 </div>
-                <div className="maket-grid-units"></div>
-            </div>
+                <style>
+                    {`
+                    .maket-grid-container {
+                        position: absolute;
+                        z-index: 9999;
+                        top: 0px;
+                        left: 50%;
+                        transform: translate(-50%);
+                        max-width: var(--metrics-container);
+                        min-height: 100vh;
+                        width: 100%;
+                        height: 100%;
+                        overflow: hidden;
+                        pointer-events: none;
+                    }
+
+                    .maket-grid-rows {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        margin-top: var(--metrics-offset);
+                        background-image: linear-gradient(
+                            180deg,
+                            rgb(var(--grid-color) / 0.15) var(--metrics-module),
+                            transparent var(--metrics-module)
+                        );
+                        background-size: calc(var(--metrics-module) + var(--metrics-gutter))
+                            calc(var(--metrics-module) + var(--metrics-gutter));
+                        /* opacity: 0.1; */
+                    }
+
+                    .maket-grid-columns {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        padding-left: var(--metrics-offset);
+                        padding-right: var(--metrics-offset);
+                        display: grid;
+                        grid-template-columns: repeat(var(--metrics-columns), minmax(0, 1fr));
+                        column-gap: var(--metrics-gutter);
+                    }
+
+                    .maket-grid-column {
+                        background-color: rgb(var(--grid-color) / 0.15);
+                    }
+
+                    .maket-grid-units {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        background-image: linear-gradient(rgb(var(--grid-color) / 0.2) 1px, transparent 1px),
+                            linear-gradient(to right, rgb(var(--grid-color) / 0.2) 1px, transparent 1px);
+                        background-size: var(--metrics-unit) var(--metrics-unit);
+                    }
+                    `}
+                </style>
+            </>
         );
     }
     return null;

diff --git a/packages/@weresk/maket/tsup.config.ts b/packages/@weresk/maket/tsup.config.ts
@@ -15,6 +15,9 @@ export default defineConfig([
         treeshake: false,
         sourcemap: true,
         clean: true,
-        external: ["@sanity/icons", "react-hotkeys-hook", "react", "react-dom", "next"]
+        external: ["@sanity/icons", "react-hotkeys-hook", "react", "react-dom", "next"],
+        loader: {
+            ".css": "css"
+        }
     }
 ]);