vanilla-extract-css/vanilla-extract

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

Open

#590 创建于 2022年2月14日

在 GitHub 查看
 (4 评论) (8 反应) (0 负责人)TypeScript (231 fork)batch import
good first issuehelp wantedsprinkles

仓库指标

Star
 (8,658 star)
PR 合并指标
 (平均合并 9天 22小时) (30 天内合并 13 个 PR)

描述

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

贡献者指南