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 (8,658 star) (231 fork)batch import
good first issuehelp wantedsprinkles

描述

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

貢獻者指南