@design.estate/dees-domtools 2.3.9 → 2.5.0

package/dist_ts/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-domtools',
-    version: '2.3.9',
+    version: '2.5.0',
     description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvMDBfY29tbWl0aW5mb19kYXRhLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHO0lBQ3hCLElBQUksRUFBRSw4QkFBOEI7SUFDcEMsT0FBTyxFQUFFLE9BQU87SUFDaEIsV0FBVyxFQUFFLHFLQUFxSztDQUNuTCxDQUFBIn0=

package/dist_ts/domtools.css.breakpoints.d.ts

@@ -5,6 +5,15 @@ export declare const tablet = 1024;
 export declare const phablet = 600;
 export declare const phone = 400;
 export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
+export interface ICssForConstraints {
+    maxWidth?: number;
+    minWidth?: number;
+}
+export declare const cssForViewport: (cssArg: CSSResult, condition: string) => CSSResult;
+export declare const cssForContainer: (cssArg: CSSResult, condition: string, containerName: string) => CSSResult;
+export declare const cssForCustom: (constraints: ICssForConstraints) => (cssArg: CSSResult) => CSSResult;
+export declare const cssForCustomContainer: (constraints: ICssForConstraints, containerName: string) => (cssArg: CSSResult) => CSSResult;
+export declare const containerContextStyles: (containerName: string) => CSSResult;
 export declare const cssForDesktop: (cssArg: CSSResult) => CSSResult;
 export declare const cssForNotebook: (cssArg: CSSResult) => CSSResult;
 export declare const cssForTablet: (cssArg: CSSResult) => CSSResult;

package/dist_ts/domtools.css.breakpoints.js

@@ -1,58 +1,71 @@
 import { DomTools } from './domtools.classes.domtools.js';
-import { CSSResult, unsafeCSS } from 'lit';
+import { css, CSSResult, unsafeCSS } from 'lit';
 export const desktop = 1600;
 export const notebook = 1240;
 export const tablet = 1024;
 export const phablet = 600;
 export const phone = 400;
-export const cssForDesktop = (cssArg) => {
+const buildCondition = (constraints) => {
+    const parts = [];
+    if (constraints.minWidth)
+        parts.push(`(min-width: ${constraints.minWidth}px)`);
+    if (constraints.maxWidth)
+        parts.push(`(max-width: ${constraints.maxWidth}px)`);
+    return parts.join(' and ');
+};
+// ---------------------------------------------------------------------------
+// Viewport-level: @container wccToolsViewport + @media
+// ---------------------------------------------------------------------------
+export const cssForViewport = (cssArg, condition) => {
     return unsafeCSS(`
-    @container wccToolsViewport (min-width: ${desktop}px) {
+    @container wccToolsViewport ${condition} {
       ${cssArg.cssText}
     }
-    @media (min-width: ${desktop}px) {
+    @media ${condition} {
       ${cssArg.cssText}
     }
   `);
 };
-export const cssForNotebook = (cssArg) => {
+// ---------------------------------------------------------------------------
+// Component-level: @container <name> only
+// ---------------------------------------------------------------------------
+export const cssForContainer = (cssArg, condition, containerName) => {
     return unsafeCSS(`
-    @container wccToolsViewport (max-width: ${notebook}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${notebook}px) {
+    @container ${containerName} ${condition} {
       ${cssArg.cssText}
     }
   `);
 };
+// ---------------------------------------------------------------------------
+// Custom constraints (curried)
+// ---------------------------------------------------------------------------
+export const cssForCustom = (constraints) => (cssArg) => cssForViewport(cssArg, buildCondition(constraints));
+export const cssForCustomContainer = (constraints, containerName) => (cssArg) => cssForContainer(cssArg, buildCondition(constraints), containerName);
+// ---------------------------------------------------------------------------
+// Container context style factory — used by @containerResponsive()
+// ---------------------------------------------------------------------------
+export const containerContextStyles = (containerName) => css `
+  :host {
+    container-type: inline-size;
+    container-name: ${unsafeCSS(containerName)};
+  }
+`;
+// ---------------------------------------------------------------------------
+// Preset viewport breakpoint helpers (existing API, unchanged behaviour)
+// ---------------------------------------------------------------------------
+export const cssForDesktop = (cssArg) => {
+    return cssForViewport(cssArg, `(min-width: ${desktop}px)`);
+};
+export const cssForNotebook = (cssArg) => {
+    return cssForViewport(cssArg, `(max-width: ${notebook}px)`);
+};
 export const cssForTablet = (cssArg) => {
-    return unsafeCSS(`
-    @container wccToolsViewport (max-width: ${tablet}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${tablet}px) {
-      ${cssArg.cssText}
-    }
-  `);
+    return cssForViewport(cssArg, `(max-width: ${tablet}px)`);
 };
 export const cssForPhablet = (cssArg) => {
-    return unsafeCSS(`
-    @container wccToolsViewport (max-width: ${phablet}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${phablet}px) {
-      ${cssArg.cssText}
-    }
-  `);
+    return cssForViewport(cssArg, `(max-width: ${phablet}px)`);
 };
 export const cssForPhone = (cssArg) => {
-    return unsafeCSS(`
-    @container wccToolsViewport (max-width: ${phone}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${phone}px) {
-      ${cssArg.cssText}
-    }
-  `);
+    return cssForViewport(cssArg, `(max-width: ${phone}px)`);
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9tdG9vbHMuY3NzLmJyZWFrcG9pbnRzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvZG9tdG9vbHMuY3NzLmJyZWFrcG9pbnRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUUxRCxPQUFPLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxNQUFNLEtBQUssQ0FBQztBQUUzQyxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDO0FBQzVCLE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUM7QUFDN0IsTUFBTSxDQUFDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQztBQUMzQixNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsR0FBRyxDQUFDO0FBQzNCLE1BQU0sQ0FBQyxNQUFNLEtBQUssR0FBRyxHQUFHLENBQUM7QUFJekIsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLENBQUMsTUFBaUIsRUFBRSxFQUFFO0lBQ2pELE9BQU8sU0FBUyxDQUFDOzhDQUMyQixPQUFPO1FBQzdDLE1BQU0sQ0FBQyxPQUFPOzt5QkFFRyxPQUFPO1FBQ3hCLE1BQU0sQ0FBQyxPQUFPOztHQUVuQixDQUFDLENBQUM7QUFDTCxDQUFDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxjQUFjLEdBQUcsQ0FBQyxNQUFpQixFQUFFLEVBQUU7SUFDbEQsT0FBTyxTQUFTLENBQUM7OENBQzJCLFFBQVE7UUFDOUMsTUFBTSxDQUFDLE9BQU87O3lCQUVHLFFBQVE7UUFDekIsTUFBTSxDQUFDLE9BQU87O0dBRW5CLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxDQUFDLE1BQWlCLEVBQUUsRUFBRTtJQUNoRCxPQUFPLFNBQVMsQ0FBQzs4Q0FDMkIsTUFBTTtRQUM1QyxNQUFNLENBQUMsT0FBTzs7eUJBRUcsTUFBTTtRQUN2QixNQUFNLENBQUMsT0FBTzs7R0FFbkIsQ0FBQyxDQUFDO0FBQ0wsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLENBQUMsTUFBaUIsRUFBRSxFQUFFO0lBQ2pELE9BQU8sU0FBUyxDQUFDOzhDQUMyQixPQUFPO1FBQzdDLE1BQU0sQ0FBQyxPQUFPOzt5QkFFRyxPQUFPO1FBQ3hCLE1BQU0sQ0FBQyxPQUFPOztHQUVuQixDQUFDLENBQUM7QUFDTCxDQUFDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxXQUFXLEdBQUcsQ0FBQyxNQUFpQixFQUFFLEVBQUU7SUFDL0MsT0FBTyxTQUFTLENBQUM7OENBQzJCLEtBQUs7UUFDM0MsTUFBTSxDQUFDLE9BQU87O3lCQUVHLEtBQUs7UUFDdEIsTUFBTSxDQUFDLE9BQU87O0dBRW5CLENBQUMsQ0FBQztBQUNMLENBQUMsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9tdG9vbHMuY3NzLmJyZWFrcG9pbnRzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvZG9tdG9vbHMuY3NzLmJyZWFrcG9pbnRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUUxRCxPQUFPLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsTUFBTSxLQUFLLENBQUM7QUFFaEQsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQztBQUM1QixNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDO0FBQzdCLE1BQU0sQ0FBQyxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUM7QUFDM0IsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLEdBQUcsQ0FBQztBQUMzQixNQUFNLENBQUMsTUFBTSxLQUFLLEdBQUcsR0FBRyxDQUFDO0FBYXpCLE1BQU0sY0FBYyxHQUFHLENBQUMsV0FBK0IsRUFBVSxFQUFFO0lBQ2pFLE1BQU0sS0FBSyxHQUFhLEVBQUUsQ0FBQztJQUMzQixJQUFJLFdBQVcsQ0FBQyxRQUFRO1FBQUUsS0FBSyxDQUFDLElBQUksQ0FBQyxlQUFlLFdBQVcsQ0FBQyxRQUFRLEtBQUssQ0FBQyxDQUFDO0lBQy9FLElBQUksV0FBVyxDQUFDLFFBQVE7UUFBRSxLQUFLLENBQUMsSUFBSSxDQUFDLGVBQWUsV0FBVyxDQUFDLFFBQVEsS0FBSyxDQUFDLENBQUM7SUFDL0UsT0FBTyxLQUFLLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0FBQzdCLENBQUMsQ0FBQztBQUVGLDhFQUE4RTtBQUM5RSx1REFBdUQ7QUFDdkQsOEVBQThFO0FBRTlFLE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxDQUFDLE1BQWlCLEVBQUUsU0FBaUIsRUFBRSxFQUFFO0lBQ3JFLE9BQU8sU0FBUyxDQUFDO2tDQUNlLFNBQVM7UUFDbkMsTUFBTSxDQUFDLE9BQU87O2FBRVQsU0FBUztRQUNkLE1BQU0sQ0FBQyxPQUFPOztHQUVuQixDQUFDLENBQUM7QUFDTCxDQUFDLENBQUM7QUFFRiw4RUFBOEU7QUFDOUUsMENBQTBDO0FBQzFDLDhFQUE4RTtBQUU5RSxNQUFNLENBQUMsTUFBTSxlQUFlLEdBQUcsQ0FBQyxNQUFpQixFQUFFLFNBQWlCLEVBQUUsYUFBcUIsRUFBRSxFQUFFO0lBQzdGLE9BQU8sU0FBUyxDQUFDO2lCQUNGLGFBQWEsSUFBSSxTQUFTO1FBQ25DLE1BQU0sQ0FBQyxPQUFPOztHQUVuQixDQUFDLENBQUM7QUFDTCxDQUFDLENBQUM7QUFFRiw4RUFBOEU7QUFDOUUsK0JBQStCO0FBQy9CLDhFQUE4RTtBQUU5RSxNQUFNLENBQUMsTUFBTSxZQUFZLEdBQUcsQ0FBQyxXQUErQixFQUFFLEVBQUUsQ0FDOUQsQ0FBQyxNQUFpQixFQUFFLEVBQUUsQ0FBQyxjQUFjLENBQUMsTUFBTSxFQUFFLGNBQWMsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDO0FBRTdFLE1BQU0sQ0FBQyxNQUFNLHFCQUFxQixHQUFHLENBQUMsV0FBK0IsRUFBRSxhQUFxQixFQUFFLEVBQUUsQ0FDOUYsQ0FBQyxNQUFpQixFQUFFLEVBQUUsQ0FBQyxlQUFlLENBQUMsTUFBTSxFQUFFLGNBQWMsQ0FBQyxXQUFXLENBQUMsRUFBRSxhQUFhLENBQUMsQ0FBQztBQUU3Riw4RUFBOEU7QUFDOUUsbUVBQW1FO0FBQ25FLDhFQUE4RTtBQUU5RSxNQUFNLENBQUMsTUFBTSxzQkFBc0IsR0FBRyxDQUFDLGFBQXFCLEVBQUUsRUFBRSxDQUFDLEdBQUcsQ0FBQTs7O3NCQUc5QyxTQUFTLENBQUMsYUFBYSxDQUFDOztDQUU3QyxDQUFDO0FBRUYsOEVBQThFO0FBQzlFLHlFQUF5RTtBQUN6RSw4RUFBOEU7QUFFOUUsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLENBQUMsTUFBaUIsRUFBRSxFQUFFO0lBQ2pELE9BQU8sY0FBYyxDQUFDLE1BQU0sRUFBRSxlQUFlLE9BQU8sS0FBSyxDQUFDLENBQUM7QUFDN0QsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLENBQUMsTUFBaUIsRUFBRSxFQUFFO0lBQ2xELE9BQU8sY0FBYyxDQUFDLE1BQU0sRUFBRSxlQUFlLFFBQVEsS0FBSyxDQUFDLENBQUM7QUFDOUQsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLENBQUMsTUFBaUIsRUFBRSxFQUFFO0lBQ2hELE9BQU8sY0FBYyxDQUFDLE1BQU0sRUFBRSxlQUFlLE1BQU0sS0FBSyxDQUFDLENBQUM7QUFDNUQsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLENBQUMsTUFBaUIsRUFBRSxFQUFFO0lBQ2pELE9BQU8sY0FBYyxDQUFDLE1BQU0sRUFBRSxlQUFlLE9BQU8sS0FBSyxDQUFDLENBQUM7QUFDN0QsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHLENBQUMsTUFBaUIsRUFBRSxFQUFFO0lBQy9DLE9BQU8sY0FBYyxDQUFDLE1BQU0sRUFBRSxlQUFlLEtBQUssS0FBSyxDQUFDLENBQUM7QUFDM0QsQ0FBQyxDQUFDIn0=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-domtools",
-  "version": "2.3.9",
+  "version": "2.5.0",
   "private": false,
   "description": "A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.",
   "main": "dist_ts/index.js",

package/readme.md

@@ -110,7 +110,7 @@ const myStyles = litCss`
 `;
 ```
 
-**Available breakpoint helpers:**
+**Preset viewport helpers** (emit both `@media` and `@container wccToolsViewport`):
 
 - `cssForDesktop(css)` - Styles for 1600px and above
 - `cssForNotebook(css)` - Styles for 1240px and below
@@ -118,6 +118,37 @@ const myStyles = litCss`
 - `cssForPhablet(css)` - Styles for 600px and below
 - `cssForPhone(css)` - Styles for 400px and below
 
+**Low-level helpers** for custom constraints and component-scoped containers:
+
+```typescript
+import { breakpoints } from '@design.estate/dees-domtools';
+import { css as litCss } from 'lit';
+
+// Viewport-level with custom constraints (emits @media + @container wccToolsViewport)
+breakpoints.cssForCustom({ maxWidth: 800 })(litCss`.box { padding: 8px; }`)
+
+// Component-level — targets a named container (no @media fallback)
+breakpoints.cssForContainer(
+  litCss`.grid { columns: 1; }`,
+  '(max-width: 600px)',
+  'my-component'  // CSS container-name
+)
+
+// Component-level with custom constraints (curried)
+breakpoints.cssForCustomContainer({ maxWidth: 500 }, 'my-component')(litCss`
+  .grid { gap: 8px; }
+`)
+
+// Generate containment styles for :host (used by @containerResponsive decorator)
+breakpoints.containerContextStyles('my-component')
+// → :host { container-type: inline-size; container-name: my-component; }
+```
+
+**Exported types:**
+
+- `ICssForConstraints` — `{ maxWidth?: number; minWidth?: number }`
+- `TViewport` — `'native' | 'desktop' | 'tablet' | 'phablet' | 'phone'`
+
 ### Theme Management
 
 Automatic theme detection with system preference support:

package/ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-domtools',
-  version: '2.3.9',
+  version: '2.5.0',
   description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
 }

package/ts/domtools.css.breakpoints.ts

@@ -1,6 +1,6 @@
 import { DomTools } from './domtools.classes.domtools.js';
 
-import { CSSResult, unsafeCSS } from 'lit';
+import { css, CSSResult, unsafeCSS } from 'lit';
 
 export const desktop = 1600;
 export const notebook = 1240;
@@ -10,57 +10,90 @@ export const phone = 400;
 
 export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
 
-export const cssForDesktop = (cssArg: CSSResult) => {
+// ---------------------------------------------------------------------------
+// Constraint-based helpers
+// ---------------------------------------------------------------------------
+
+export interface ICssForConstraints {
+  maxWidth?: number;
+  minWidth?: number;
+}
+
+const buildCondition = (constraints: ICssForConstraints): string => {
+  const parts: string[] = [];
+  if (constraints.minWidth) parts.push(`(min-width: ${constraints.minWidth}px)`);
+  if (constraints.maxWidth) parts.push(`(max-width: ${constraints.maxWidth}px)`);
+  return parts.join(' and ');
+};
+
+// ---------------------------------------------------------------------------
+// Viewport-level: @container wccToolsViewport + @media
+// ---------------------------------------------------------------------------
+
+export const cssForViewport = (cssArg: CSSResult, condition: string) => {
   return unsafeCSS(`
-    @container wccToolsViewport (min-width: ${desktop}px) {
+    @container wccToolsViewport ${condition} {
       ${cssArg.cssText}
     }
-    @media (min-width: ${desktop}px) {
+    @media ${condition} {
       ${cssArg.cssText}
     }
   `);
 };
 
-export const cssForNotebook = (cssArg: CSSResult) => {
+// ---------------------------------------------------------------------------
+// Component-level: @container <name> only
+// ---------------------------------------------------------------------------
+
+export const cssForContainer = (cssArg: CSSResult, condition: string, containerName: string) => {
   return unsafeCSS(`
-    @container wccToolsViewport (max-width: ${notebook}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${notebook}px) {
+    @container ${containerName} ${condition} {
       ${cssArg.cssText}
     }
   `);
 };
 
+// ---------------------------------------------------------------------------
+// Custom constraints (curried)
+// ---------------------------------------------------------------------------
+
+export const cssForCustom = (constraints: ICssForConstraints) =>
+  (cssArg: CSSResult) => cssForViewport(cssArg, buildCondition(constraints));
+
+export const cssForCustomContainer = (constraints: ICssForConstraints, containerName: string) =>
+  (cssArg: CSSResult) => cssForContainer(cssArg, buildCondition(constraints), containerName);
+
+// ---------------------------------------------------------------------------
+// Container context style factory — used by @containerResponsive()
+// ---------------------------------------------------------------------------
+
+export const containerContextStyles = (containerName: string) => css`
+  :host {
+    container-type: inline-size;
+    container-name: ${unsafeCSS(containerName)};
+  }
+`;
+
+// ---------------------------------------------------------------------------
+// Preset viewport breakpoint helpers (existing API, unchanged behaviour)
+// ---------------------------------------------------------------------------
+
+export const cssForDesktop = (cssArg: CSSResult) => {
+  return cssForViewport(cssArg, `(min-width: ${desktop}px)`);
+};
+
+export const cssForNotebook = (cssArg: CSSResult) => {
+  return cssForViewport(cssArg, `(max-width: ${notebook}px)`);
+};
+
 export const cssForTablet = (cssArg: CSSResult) => {
-  return unsafeCSS(`
-    @container wccToolsViewport (max-width: ${tablet}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${tablet}px) {
-      ${cssArg.cssText}
-    }
-  `);
+  return cssForViewport(cssArg, `(max-width: ${tablet}px)`);
 };
 
 export const cssForPhablet = (cssArg: CSSResult) => {
-  return unsafeCSS(`
-    @container wccToolsViewport (max-width: ${phablet}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${phablet}px) {
-      ${cssArg.cssText}
-    }
-  `);
+  return cssForViewport(cssArg, `(max-width: ${phablet}px)`);
 };
 
 export const cssForPhone = (cssArg: CSSResult) => {
-  return unsafeCSS(`
-    @container wccToolsViewport (max-width: ${phone}px) {
-      ${cssArg.cssText}
-    }
-    @media (max-width: ${phone}px) {
-      ${cssArg.cssText}
-    }
-  `);
+  return cssForViewport(cssArg, `(max-width: ${phone}px)`);
 };