vanilla-extract-css/vanilla-extract
在 GitHub 查看createSprinkles with multiple collections that have the same property throws an error
Open
#590 创建于 2022年2月14日
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
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