Using the css function within styled-components

Question

Using the css function within styled-components

Struggling with implementing the media templates example from the documentation and figuring out how to type the arguments for the css function in plain JS:

const sizes = {
  desktop: 992
}

const media = Object.keys(sizes).reduce((acc, label) => {

  acc[label] = (...args) => css`    // <----- need help typing args

    @media(max-width: ${sizes[label]}px) {
      ${css(...args)}
    }

  `

  return acc
}, {})

If you are familiar with TypeScript but not styled-components, args is a tagged template literal used as below:

media.desktop`
  background-color: blue;
  ${variable}
`

Attempted typing args as TemplateStringsArray but confronted with complaints from TS regarding spread argument types. Changing the type to TemplateStringsArray[] causes issues with the css() function expecting at least one argument but receiving 0 or more.

typescript styled-components

Answer 1

Answer №1

When creating a tagged template, the signature should follow this format:

(literals: TemplateStringsArray, ...placeholders: any[]) => string

. In this structure, literals represent the strings in the template and placeholders refer to the variable values being substituted.

If you wish to pass all arguments to the css function, utilizing call is recommended. TypeScript doesn't support direct spreading due to necessary arguments within css that need validation by the compiler:

acc[label] = (...args: any[]) => css`  
  @media(max-width: ${sizes[label]}px) {
    ${css.call(undefined, ...args)}
  }

`

To ensure accurate typing when using the media.* functions, an optimized version would be as follows:

const sizes = {
    desktop: 992
}

const media = Object.keys(sizes).reduce((acc, label) => {

    acc[label] = (literals: TemplateStringsArray, ...placeholders: any[]) => css`      
    @media(max-width: ${sizes[label]}px) {
        ${css(literals, ...placeholders)}
    }

    `;
    return acc
}, {} as Record<keyof typeof sizes, (l: TemplateStringsArray, ...p: any[]) => string>)

Answer 2

When creating a tagged template, the signature should follow this format:

(literals: TemplateStringsArray, ...placeholders: any[]) => string

. In this structure, literals represent the strings in the template and placeholders refer to the variable values being substituted.

If you wish to pass all arguments to the css function, utilizing call is recommended. TypeScript doesn't support direct spreading due to necessary arguments within css that need validation by the compiler:

acc[label] = (...args: any[]) => css`  
  @media(max-width: ${sizes[label]}px) {
    ${css.call(undefined, ...args)}
  }

`

To ensure accurate typing when using the media.* functions, an optimized version would be as follows:

const sizes = {
    desktop: 992
}

const media = Object.keys(sizes).reduce((acc, label) => {

    acc[label] = (literals: TemplateStringsArray, ...placeholders: any[]) => css`      
    @media(max-width: ${sizes[label]}px) {
        ${css(literals, ...placeholders)}
    }

    `;
    return acc
}, {} as Record<keyof typeof sizes, (l: TemplateStringsArray, ...p: any[]) => string>)

Answer 3

Answer №2

The Titian Cernicova-Dragomir approach is impressive, but unfortunately it does not suit my needs as it generates a string with commas. To resolve this issue, I decided to incorporate the join method into the css function.

import { css } from "styled-components";

const sizes = {
  desktop: 730,
};

const media = Object.keys(sizes).reduce(
  (acc, label) => {
    acc[label] = (literals: TemplateStringsArray, ...placeholders: any[]) =>
      css`
        @media (max-width: ${sizes[label]}px) {
          ${css(literals, ...placeholders)};
        }
      `.join("");
    return acc;
  },
  {} as Record<
    keyof typeof sizes,
    (l: TemplateStringsArray, ...p: any[]) => string
  >,
);

export default media;

Answer 4

The Titian Cernicova-Dragomir approach is impressive, but unfortunately it does not suit my needs as it generates a string with commas. To resolve this issue, I decided to incorporate the join method into the css function.

import { css } from "styled-components";

const sizes = {
  desktop: 730,
};

const media = Object.keys(sizes).reduce(
  (acc, label) => {
    acc[label] = (literals: TemplateStringsArray, ...placeholders: any[]) =>
      css`
        @media (max-width: ${sizes[label]}px) {
          ${css(literals, ...placeholders)};
        }
      `.join("");
    return acc;
  },
  {} as Record<
    keyof typeof sizes,
    (l: TemplateStringsArray, ...p: any[]) => string
  >,
);

export default media;

Using the css function within styled-components

Answer №1

Answer №2

Similar questions

The service has terminated unexpectedly because of signal: Ended prematurely: 9

What are the essential requirements for an Angular application to function properly with minimal dependencies?

Blend the power of Node's CommonJS with the versatility of Typescript's ES modules

Modify a single parameter of an element in a Map

How can we efficiently load paginated data from a database while still implementing pagination using Angular Material?

Tips for saving a variable in Angular that is being received through a subscription as JSON:

Pattern Matching for Excluding Multiple Specific Phrases

Tips for inputting transition properties in Material UI Popper

What is the best way to show/hide group items in a PrimeNG dropdown menu?

Dealing with null-safe operators issues has been a challenge for me, especially while working on my Mac using

Error occurs when attempting to test both boolean and number data within an ngIf statement

When executed, the Node application successfully compiles

Testing the throwing of errors when running Karma by utilizing sinon.spy on global functions like parseInt

Tips for obtaining a variable step size in react-chartjs-2

Using Angular 2, NodeJS, and Mongoose to send data from an Angular 2 frontend to a NodeJS backend REST API. However, encountering an issue where the Node API logs show that the OPTIONS

Manage thrown errors using http.post().subscribe()

The functionality of `import { Dialogs } from "@nativescript/core"; seems to be malfunctioning

Stop allowing the transmission of unfamiliar string constants, but still permit the transmission of adaptable strings

The local storage gets wiped clean whenever I am using this.router.navigate

Optimal strategies for managing server-side validation/errors in Angular applications