vanilla-extract-css/vanilla-extract
View on GitHubcreateSprinkles with multiple collections that have the same property throws an error
Open
#590 opened on Feb 14, 2022
good first issuehelp wantedsprinkles
Description
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