vanilla-extract-css/vanilla-extract

createSprinkles with multiple collections that have the same property throws an error

オープン

#590 opened on 2022/02/14

 (4 件のコメント) (8 件のリアクション) (0 人の担当者)TypeScript (231 件のフォーク)batch import
good first issuehelp wantedsprinkles

Repository metrics

Stars
 (8,658 個のスター)
PR merge metrics
 (PR metrics pending)

説明

Describe the bug

Passing multiple collections of properties to createSprinkles that share the same property (backgroundColor in this case) results in an error:

sprinkles.css.ts

import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";

const responsiveProperties = defineProperties({
  conditions: {
    mobile: {},
    tablet: { "@media": "(min-width: 768px)" }
  },
  defaultCondition: "mobile",
  properties: {
    backgroundColor: ["red", "blue"]
  }
});

const stateProperties = defineProperties({
  conditions: {
    default: {},
    focus: { selector: "&:focus" }
  },
  defaultCondition: "default",
  properties: {
    backgroundColor: ["red", "blue"]
  }
});

export const sprinkles = createSprinkles(responsiveProperties, stateProperties);

App.css.ts

import { sprinkles } from "./sprinkles.css";

export const container = sprinkles({
  // backgroundColor: { default: "red", focus: "blue" } // works, but TypeScript complains
  backgroundColor: { mobile: "red", tablet: "blue" } // doesn't work, runtime error
});

ERROR in ./src/App.css.ts
Module build failed (from ./node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) SprinklesError: "backgroundColor" has no condition named "mobile". Possible values are "default", "focus"
    at processResult (/sandbox/node_modules/webpack/lib/NormalModule.js:673:12)
    at /sandbox/node_modules/webpack/lib/NormalModule.js:778:5
    at /sandbox/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /sandbox/node_modules/loader-runner/lib/LoaderRunner.js:195:20
    at context.callback (/sandbox/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /sandbox/node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.dev.js:77:5
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

Link to reproduction

CodeSandbox

System Info

Output of npx envinfo --system --npmPackages @vanilla-extract/css,@vanilla-extract/webpack-plugin,@vanilla-extract/esbuild-plugin,@vanilla-extract/vite-plugin,@vanilla-extract/sprinkles,webpack,esbuild,vite --binaries --browsers:

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 8.49 GB / 62.72 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.1/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  npmPackages:
    @vanilla-extract/css: 1.6.8 => 1.6.8
    @vanilla-extract/sprinkles: 1.3.3 => 1.3.3
    @vanilla-extract/webpack-plugin: ^2.1.4 => 2.1.4
    webpack: ^5.36.1 => 5.36.1

コントリビューターガイド