Merge pull request #73 from tone-row/grid-area-and-where

fix(slang): area prop; :where()

Author: rob-gordon

docs/components/slang/slang.css

@@ -494,7 +494,7 @@ body {
     --errorTopMultiplier: var(--error-top-multiplier-7);
     --errorBottomMultiplier: var(--error-bottom-multiplier-7); }
 
-:root {
+:where(:root) {
 	--base-font-family:Neue Montreal;
 	--base-font-size-px:20px;
 	--base-font-size:20;
@@ -752,6 +752,12 @@ border-radius: calc(var(--smallest-border-radius-px) * var(--rad));
 .slang-box.rad_hover:hover {
 border-radius: calc(var(--smallest-border-radius-px) * var(--rad_hover));
 }
+.slang-box.area {
+grid-area: var(--area);
+}
+.slang-box.area_hover:hover {
+grid-area: var(--area_hover);
+}
 @media(min-width: 768px) {
 .slang-box.flow-tablet {
 grid-auto-flow: var(--flow-tablet);
@@ -891,6 +897,12 @@ border-radius: calc(var(--smallest-border-radius-px) * var(--rad-tablet));
 .slang-box.rad-tablet_hover:hover {
 border-radius: calc(var(--smallest-border-radius-px) * var(--rad-tablet_hover));
 }
+.slang-box.area-tablet {
+grid-area: var(--area-tablet);
+}
+.slang-box.area-tablet_hover:hover {
+grid-area: var(--area-tablet_hover);
+}
 }
 @media(min-width: 1024px) {
 .slang-box.flow-desktop {
@@ -1031,6 +1043,12 @@ border-radius: calc(var(--smallest-border-radius-px) * var(--rad-desktop));
 .slang-box.rad-desktop_hover:hover {
 border-radius: calc(var(--smallest-border-radius-px) * var(--rad-desktop_hover));
 }
+.slang-box.area-desktop {
+grid-area: var(--area-desktop);
+}
+.slang-box.area-desktop_hover:hover {
+grid-area: var(--area-desktop_hover);
+}
 }
 .slang-type.weight {
 font-weight: var(--weight);

docs/pages/box.tsx

@@ -55,6 +55,10 @@ export default function BoxPage() {
         </Type>
       </Section>
       <Box as="button">Test</Box>
+      <Box template="none / repeat(4, 1fr)">
+        <Box area="auto / span 3">long</Box>
+        <Box>short</Box>
+      </Box>
     </Page>
   );
 }

slang/src/Box/props.ts

@@ -83,6 +83,7 @@ export const propKeys = [
   "pl",
   "template",
   "content",
+  "area",
   "items",
   "self",
   "gap",
@@ -111,6 +112,10 @@ export const boxConfig: ComponentConfig<ResponsiveProps>[] = [
   },
   { key: "items", cssFromVariable: (v) => `place-items: ${v};` },
   { key: "self", cssFromVariable: (v) => `place-self: ${v};` },
+  {
+    key: "area",
+    cssFromVariable: (v) => `grid-area: ${v};`,
+  },
   {
     key: "p",
     defaultValue: "0",
@@ -246,8 +251,4 @@ export const boxConfig: ComponentConfig<ResponsiveProps>[] = [
     cssFromVariable: (v) =>
       `border-radius: calc(var(--smallest-border-radius-px) * ${v});`,
   },
-  {
-    key: "area",
-    cssFromVariable: (v) => `grid-area: ${v};`,
-  },
 ];

slang/src/makeCSS.ts

@@ -6,7 +6,7 @@ export function makeCSS(config?: Partial<SlangConfig>) {
   const derivedProperties = createDerivedProperties(config);
   const colorProperties = createColorProperties(config);
   const responsiveCss = createComponentCss(config);
-  return [":root {"]
+  return [":where(:root) {"]
     .concat(
       Object.entries({
         ...cssProperties,