vanilla-extract-css/vanilla-extract
Vedi su GitHubcreateSprinkles with multiple collections that have the same property throws an error
Open
#590 aperta il 14 feb 2022
good first issuehelp wantedsprinkles
Metriche repository
- Star
- (8658 star)
- Metriche merge PR
- (Merge medio 9g 22h) (13 PR mergiate in 30 g)
Descrizione
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