vanilla-extract-css/vanilla-extract
GitHub で見るcreateSprinkles with multiple collections that have the same property throws an error
Open
#590 opened on 2022年2月14日
good first issuehelp wantedsprinkles
Repository metrics
- Stars
- (8,658 stars)
- PR merge metrics
- (平均マージ 9d 22h) (30d で 13 merged PRs)
説明
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