stitchesjs / stitches

[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
https://stitches.dev
MIT License
7.76k stars 253 forks source link

stitches does not pull through filter variables defined in theme #805

Open lockhaty opened 3 years ago

lockhaty commented 3 years ago

Bug report

Describe the bug

When attempting to define a custom variable for a filter using themes, the css variable is created correctly but you cannot use the stitches variable in your code. It does not work

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

import { createStitches } from "@stitches/react";

export const { theme, styled, createTheme } = createStitches({
  colors: {
    primaryText: "#000",
    background: "#fff"
  },
  theme: {
    filters: {
      datePickerCalendarIconFilter: "invert(0)"
    }
  }
});

export const darkTheme = createTheme({
  colors: {
    primaryText: "#fff",
    hiContrast: "hsl(206,2%,93%)",
    gray100: "hsl(206,8%,12%)",
    background: "$gray100"
  },
  filters: {
    datePickerCalendarIconFilter: "invert(1)"
  }
});

const Input = styled("input", {
  border: "1px solid lightgray",
  color: "$hiContrast",
  "&&::-webkit-calendar-picker-indicator": {
    filter: "$datePickerCalendarIconFilter"
  }
});

Link to sandbox: https://codesandbox.io/s/spring-meadow-5rxzd?file=/src/App.js

Expected behavior

The calendar icon in the input box should be white when using the dark theme and black when using the light theme. The snippet below provides the expected behaviour using css variables:

const Input = styled("input", {
  border: "1px solid lightgray",
  color: "$hiContrast",
  "&&::-webkit-calendar-picker-indicator": {
    filter: "var(--filters-datePickerCalendarIconFilter)"
  }
});

Screenshots

If applicable, add screenshots to help explain your problem. dark light

System information

Additional context

Add any other context about the problem here.

peduarte commented 3 years ago

You need to tell Stitches about the mapping of CSS Properties to Theme Scale: https://stitches.dev/docs/api#defaultthememap

Updated sandbox: https://codesandbox.io/s/morning-http-vb3wz?file=/src/stitches.js:131-195