addComponents Type doesn't accept nested properties in media queries

[moshie]

What version of Tailwind CSS are you using?

v3.4.6

What build tool (or framework if it abstracts the build tool) are you using?

prejss-cli: 0.3.3
postcss-cli: 11.0.0

What version of Node.js are you using?

v20.15.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction:

import type { PluginCreator, Config } from 'tailwindcss/types/config';

const pluginCreator: PluginCreator = function pluginCreator({
  addBase,
  addComponents,
  config,
}) {

addComponents({
    "@media (min-width: 400px)": [
      {
        ".range::-webkit-slider-thumb": {
          "width":"var(--range-thumb-size)",
          "height":"var(--range-thumb-size)",
          "marginTop":"calc(((var(--range-thumb-size) / 2) - var(--range-track-height) / 2) * -1)",
          "background":"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M377.941 169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296h243.882v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z'/%3E%3C/svg%3E\")\n        no-repeat\n        center center / 20px 20px\n        var(--range-thumb-background)"
        }
      }
    ]
  });
}

Type '{ ".range::-webkit-slider-thumb": { width: string; height: string; marginTop: string; background: string; }; }' is not assignable to type 'string'

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
  },
  "exclude": ["dist", "bundles", "node_modules"],
  "include": ["**/*.ts", "**/*.tsx"]
}

Describe your issue

I am using prejss-cli to convert css into js and then pulling that converted js into the plugin and into addComponents.

unfortunately it's not happy with the first type on the addComponents argument.

Seems like if it's an array then it's expecting a string not an object?

[moshie]

I kind of solved this by combining all of my styles under one media query seems to be working.

Bad:

    @media screen and (min-width: 400px) {
           ...
     }

    &::-moz-range-thumb {
        ...

        @media screen and (min-width: 400px) {
              ...
        }
    }

    &::-webkit-slider-thumb {
        ...

        @media screen and (min-width: 400px) {
              ...
        }
    }

Good:

@media screen and (min-width: 400px) {
    ...

    &::-moz-range-thumb {
      ....
    }

    &::-webkit-slider-thumb {
      ...
    }
  }

[RobinMalfait]

Hey!

The issue is not the media itself, but the array that is being used. Currently the only spot where we allow arrays from a type perspective is for string based values.

For all nesting related things, we accept objects where the key is your selector/media query. I think the better solution compared to your initial code snippet is to move things around a little bit and use nesting a bit more: https://tailwindcss.com/docs/plugins#adding-components

E.g.:

addComponents({
  '.range': {
    '@media (min-width: 400px)': {
      '&::-webkit-slider-thumb': {
        width: 'var(--range-thumb-size)',
        height: 'var(--range-thumb-size)',
        marginTop: 'calc(((var(--range-thumb-size) / 2) - var(--range-track-height) / 2) * -1)',
        background:
          "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M377.941 169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296h243.882v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z'/%3E%3C/svg%3E\")\n        no-repeat\n        center center / 20px 20px\n        var(--range-thumb-background)",
      },
    },
  },
})

This way the .range is on the outside, which helps with debugging/readability. It also follows the conventions we used in the docs.
Next is the media query as a separate key, inside of the media query we use nesting using &.

Now you should also be able to use other keys with different selectors, for example for &::-moz-range-thumb.

Hope this helps!