fix(ISSUE-1474): add -webkit-calendar-picker-indicator pseudoclass

[corradopetrelli]

Resolves: #1474

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: e4bbd0368e1bc255aec36aed0931f35d60bd5b96

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 27 packages

| Name | Type | | ------------------------------------- | ----- | | @vanilla-extract/css | Minor | | @vanilla-extract/integration | Patch | | @vanilla-extract/rollup-plugin | Patch | | @fixtures/features | Patch | | @fixtures/layers | Patch | | @fixtures/low-level | Patch | | @fixtures/next-app-router | Patch | | @fixtures/next-pages-router | Patch | | @fixtures/recipes | Patch | | @fixtures/sprinkles | Patch | | @fixtures/template-string-paths | Patch | | @fixtures/themed | Patch | | @fixtures/thirdparty | Patch | | @fixtures/unused-modules | Patch | | @fixtures/thirdparty-dep | Patch | | @fixtures/thirdparty-dep-dep | Patch | | vanilla-extract-example-remix | Patch | | vanilla-extract-example-webpack-react | Patch | | @vanilla-extract-private/tests | Patch | | @vanilla-extract/esbuild-plugin-next | Patch | | @vanilla-extract/esbuild-plugin | Patch | | @vanilla-extract/jest-transform | Patch | | @vanilla-extract/parcel-transformer | Patch | | @vanilla-extract/vite-plugin | Patch | | @vanilla-extract/webpack-plugin | Patch | | @vanilla-extract-private/test-helpers | Patch | | @vanilla-extract/next-plugin | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[askoufis]

Thanks for the PR! There's many browser-specific psuedo-elements, some with very little documentation, so it's a bit hard to keep up with them all. Thanks for the help.

For future reference, you can generate CSS using arbitrary psuedo-elements/selectors via the selectors property, in case it's not available at the top-level of the style object:

import { layer, style } from "@vanilla-extract/css";

export const myStyle = style({
  selectors: {
    "&::-whatever-you-want": {
      color: "red",
    },
  },
});

[corradopetrelli]

@askoufis thank you, that was exactly the workaround I used 😄