diff --git a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap index 877011823..38f9473e2 100644 --- a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap +++ b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap @@ -3,8 +3,8 @@ exports[`rollup-plugin should build with preserveModules 1`] = ` Array [ Array [ - "assets/@fixtures/themed/src/shared.css.ts.vanilla-012a0604.css", - ".shared__4dtfen0 { + "assets/src/shared.css.ts.vanilla-82a38ac6.css", + ".shared__9k2war0 { box-shadow: 0 0 5px red; } body { @@ -12,85 +12,85 @@ body { }", ], Array [ - "assets/@fixtures/themed/src/styles.css.ts.vanilla-6c29c763.css", + "assets/src/styles.css.ts.vanilla-3addedd5.css", "@font-face { src: local(\\"Impact\\"); - font-family: \\"styles__jteyb10\\"; + font-family: \\"styles__g7vce90\\"; } @font-face { src: local(\\"Comic Sans MS\\"); font-family: MyGlobalComicSans; } -.styles__jteyb11 { +.styles__g7vce91 { display: flex; flex-direction: column; - gap: var(--space-2__cvta174); - padding: var(--space-3__cvta175); + gap: var(--space-2__6cbmls4); + padding: var(--space-3__6cbmls5); } -.styles__jteyb12 { +.styles__g7vce92 { z-index: 1; position: relative; } -.styles__jteyb13 { - font-family: \\"styles__jteyb10\\"; - background-color: var(--colors-backgroundColor__cvta171, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\"); - color: var(--colors-text__cvta172); +.styles__g7vce93 { + font-family: \\"styles__g7vce90\\"; + background-color: var(--colors-backgroundColor__6cbmls1, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\"); + color: var(--colors-text__6cbmls2); border-radius: 9999px; } -.themes__cvta176 .themes__cvta170 .styles__jteyb11 .styles__jteyb13 { +.themes__6cbmls6 .themes__6cbmls0 .styles__g7vce91 .styles__g7vce93 { font-family: MyGlobalComicSans; outline: 5px solid red; } -body .styles__jteyb12:after { +body .styles__g7vce92:after { content: 'I am content'; } -html .styles_1\\\\/2__jteyb16 { - opacity: var(--jteyb14, 0.5); +html .styles_1\\\\/2__g7vce96 { + opacity: var(--g7vce94, 0.5); } -html .styles_1\\\\/4__jteyb17 { - opacity: var(--jteyb14, var(--jteyb15, 0.25)); +html .styles_1\\\\/4__g7vce97 { + opacity: var(--g7vce94, var(--g7vce95, 0.25)); } @media only screen and (min-width: 500px) { - .styles__jteyb11 { - border: 1px solid var(--colors-backgroundColor__cvta171); + .styles__g7vce91 { + border: 1px solid var(--colors-backgroundColor__6cbmls1); } - .styles__jteyb13 { - padding: var(--space-1__cvta173); + .styles__g7vce93 { + padding: var(--space-1__6cbmls3); } } @media only screen and (min-width: 1000px) { - .styles__jteyb13 { - padding: var(--space-2__cvta174); + .styles__g7vce93 { + padding: var(--space-2__6cbmls4); } }", ], Array [ - "assets/@fixtures/themed/src/themes.css.ts.vanilla-3259c08f.css", - ":root, .themes__cvta170 { - --colors-backgroundColor__cvta171: blue; - --colors-text__cvta172: white; - --space-1__cvta173: 4px; - --space-2__cvta174: 8px; - --space-3__cvta175: 12px; -} -.themes__cvta176 { - --colors-backgroundColor__cvta171: green; - --colors-text__cvta172: white; - --space-1__cvta173: 8px; - --space-2__cvta174: 12px; - --space-3__cvta175: 16px; -} -.themes__cvta177 { - --colors-backgroundColor__cvta171: pink; - --colors-text__cvta172: purple; - --space-1__cvta173: 6px; - --space-2__cvta174: 12px; - --space-3__cvta175: 18px; + "assets/src/themes.css.ts.vanilla-becd40aa.css", + ":root, .themes__6cbmls0 { + --colors-backgroundColor__6cbmls1: blue; + --colors-text__6cbmls2: white; + --space-1__6cbmls3: 4px; + --space-2__6cbmls4: 8px; + --space-3__6cbmls5: 12px; +} +.themes__6cbmls6 { + --colors-backgroundColor__6cbmls1: green; + --colors-text__6cbmls2: white; + --space-1__6cbmls3: 8px; + --space-2__6cbmls4: 12px; + --space-3__6cbmls5: 16px; +} +.themes__6cbmls7 { + --colors-backgroundColor__6cbmls1: pink; + --colors-text__6cbmls2: purple; + --space-1__6cbmls3: 6px; + --space-2__6cbmls4: 12px; + --space-3__6cbmls5: 18px; } @media screen and (min-width: 768px) { - .themes__cvta177 { - --colors-backgroundColor__cvta171: purple; - --colors-text__cvta172: pink; + .themes__6cbmls7 { + --colors-backgroundColor__6cbmls1: purple; + --colors-text__6cbmls2: pink; } }", ], @@ -178,34 +178,34 @@ render(); ], Array [ "src/shared.css.js", - "import './../assets/@fixtures/themed/src/shared.css.ts.vanilla-012a0604.css'; + "import './../assets/src/shared.css.ts.vanilla-82a38ac6.css'; -var shadow = \\"shared__4dtfen0\\"; +var shadow = \\"shared__9k2war0\\"; export { shadow }; ", ], Array [ "src/styles.css.js", - "import './../assets/@fixtures/themed/src/shared.css.ts.vanilla-012a0604.css'; -import './../assets/@fixtures/themed/src/themes.css.ts.vanilla-3259c08f.css'; -import './../assets/@fixtures/themed/src/styles.css.ts.vanilla-6c29c763.css'; + "import './../assets/src/shared.css.ts.vanilla-82a38ac6.css'; +import './../assets/src/themes.css.ts.vanilla-becd40aa.css'; +import './../assets/src/styles.css.ts.vanilla-3addedd5.css'; -var button = \\"styles__jteyb13 shared__4dtfen0 styles__jteyb12\\"; -var container = \\"styles__jteyb11\\"; -var opacity = {\\"1/2\\": \\"styles_1/2__jteyb16\\", \\"1/4\\": \\"styles_1/4__jteyb17\\"}; +var button = \\"styles__g7vce93 shared__9k2war0 styles__g7vce92\\"; +var container = \\"styles__g7vce91\\"; +var opacity = {\\"1/2\\": \\"styles_1/2__g7vce96\\", \\"1/4\\": \\"styles_1/4__g7vce97\\"}; export { button, container, opacity }; ", ], Array [ "src/themes.css.js", - "import './../assets/@fixtures/themed/src/themes.css.ts.vanilla-3259c08f.css'; + "import './../assets/src/themes.css.ts.vanilla-becd40aa.css'; -var altTheme = \\"themes__cvta176\\"; -var responsiveTheme = \\"themes__cvta177\\"; -var theme = \\"themes__cvta170\\"; -var vars = {colors: {backgroundColor: \\"var(--colors-backgroundColor__cvta171)\\", text: \\"var(--colors-text__cvta172)\\"}, space: {\\"1\\": \\"var(--space-1__cvta173)\\", \\"2\\": \\"var(--space-2__cvta174)\\", \\"3\\": \\"var(--space-3__cvta175)\\"}}; +var altTheme = \\"themes__6cbmls6\\"; +var responsiveTheme = \\"themes__6cbmls7\\"; +var theme = \\"themes__6cbmls0\\"; +var vars = {colors: {backgroundColor: \\"var(--colors-backgroundColor__6cbmls1)\\", text: \\"var(--colors-text__6cbmls2)\\"}, space: {\\"1\\": \\"var(--space-1__6cbmls3)\\", \\"2\\": \\"var(--space-2__6cbmls4)\\", \\"3\\": \\"var(--space-3__6cbmls5)\\"}}; export { altTheme, responsiveTheme, theme, vars }; ", @@ -249,15 +249,6 @@ export { altButton, altContainer, testNodes as default, dynamicVarsButton, dynam exports[`rollup-plugin should build with preserveModules and assetFileNames 1`] = ` Array [ - Array [ - "shared.css.ts.vanilla.css", - ".shared__4dtfen0 { - box-shadow: 0 0 5px red; -} -body { - background-color: skyblue; -}", - ], Array [ "src/index.js", "import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic'; @@ -342,88 +333,127 @@ render(); ], Array [ "src/shared.css.js", - "import './../shared.css.ts.vanilla.css'; + "import './shared.css.ts.vanilla.css'; -var shadow = \\"shared__4dtfen0\\"; +var shadow = \\"shared__9k2war0\\"; export { shadow }; ", ], Array [ - "src/styles.css.js", - "import './../shared.css.ts.vanilla.css'; -import './../themes.css.ts.vanilla.css'; -import './../styles.css.ts.vanilla.css'; - -var button = \\"styles__jteyb13 shared__4dtfen0 styles__jteyb12\\"; -var container = \\"styles__jteyb11\\"; -var opacity = {\\"1/2\\": \\"styles_1/2__jteyb16\\", \\"1/4\\": \\"styles_1/4__jteyb17\\"}; - -export { button, container, opacity }; -", + "src/shared.css.ts.vanilla.css", + ".shared__9k2war0 { + box-shadow: 0 0 5px red; +} +body { + background-color: skyblue; +}", ], Array [ - "src/themes.css.js", - "import './../themes.css.ts.vanilla.css'; + "src/styles.css.js", + "import './shared.css.ts.vanilla.css'; +import './themes.css.ts.vanilla.css'; +import './styles.css.ts.vanilla.css'; -var altTheme = \\"themes__cvta176\\"; -var responsiveTheme = \\"themes__cvta177\\"; -var theme = \\"themes__cvta170\\"; -var vars = {colors: {backgroundColor: \\"var(--colors-backgroundColor__cvta171)\\", text: \\"var(--colors-text__cvta172)\\"}, space: {\\"1\\": \\"var(--space-1__cvta173)\\", \\"2\\": \\"var(--space-2__cvta174)\\", \\"3\\": \\"var(--space-3__cvta175)\\"}}; +var button = \\"styles__g7vce93 shared__9k2war0 styles__g7vce92\\"; +var container = \\"styles__g7vce91\\"; +var opacity = {\\"1/2\\": \\"styles_1/2__g7vce96\\", \\"1/4\\": \\"styles_1/4__g7vce97\\"}; -export { altTheme, responsiveTheme, theme, vars }; +export { button, container, opacity }; ", ], Array [ - "styles.css.ts.vanilla.css", + "src/styles.css.ts.vanilla.css", "@font-face { src: local(\\"Impact\\"); - font-family: \\"styles__jteyb10\\"; + font-family: \\"styles__g7vce90\\"; } @font-face { src: local(\\"Comic Sans MS\\"); font-family: MyGlobalComicSans; } -.styles__jteyb11 { +.styles__g7vce91 { display: flex; flex-direction: column; - gap: var(--space-2__cvta174); - padding: var(--space-3__cvta175); + gap: var(--space-2__6cbmls4); + padding: var(--space-3__6cbmls5); } -.styles__jteyb12 { +.styles__g7vce92 { z-index: 1; position: relative; } -.styles__jteyb13 { - font-family: \\"styles__jteyb10\\"; - background-color: var(--colors-backgroundColor__cvta171, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\"); - color: var(--colors-text__cvta172); +.styles__g7vce93 { + font-family: \\"styles__g7vce90\\"; + background-color: var(--colors-backgroundColor__6cbmls1, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\"); + color: var(--colors-text__6cbmls2); border-radius: 9999px; } -.themes__cvta176 .themes__cvta170 .styles__jteyb11 .styles__jteyb13 { +.themes__6cbmls6 .themes__6cbmls0 .styles__g7vce91 .styles__g7vce93 { font-family: MyGlobalComicSans; outline: 5px solid red; } -body .styles__jteyb12:after { +body .styles__g7vce92:after { content: 'I am content'; } -html .styles_1\\\\/2__jteyb16 { - opacity: var(--jteyb14, 0.5); +html .styles_1\\\\/2__g7vce96 { + opacity: var(--g7vce94, 0.5); } -html .styles_1\\\\/4__jteyb17 { - opacity: var(--jteyb14, var(--jteyb15, 0.25)); +html .styles_1\\\\/4__g7vce97 { + opacity: var(--g7vce94, var(--g7vce95, 0.25)); } @media only screen and (min-width: 500px) { - .styles__jteyb11 { - border: 1px solid var(--colors-backgroundColor__cvta171); + .styles__g7vce91 { + border: 1px solid var(--colors-backgroundColor__6cbmls1); } - .styles__jteyb13 { - padding: var(--space-1__cvta173); + .styles__g7vce93 { + padding: var(--space-1__6cbmls3); } } @media only screen and (min-width: 1000px) { - .styles__jteyb13 { - padding: var(--space-2__cvta174); + .styles__g7vce93 { + padding: var(--space-2__6cbmls4); + } +}", + ], + Array [ + "src/themes.css.js", + "import './themes.css.ts.vanilla.css'; + +var altTheme = \\"themes__6cbmls6\\"; +var responsiveTheme = \\"themes__6cbmls7\\"; +var theme = \\"themes__6cbmls0\\"; +var vars = {colors: {backgroundColor: \\"var(--colors-backgroundColor__6cbmls1)\\", text: \\"var(--colors-text__6cbmls2)\\"}, space: {\\"1\\": \\"var(--space-1__6cbmls3)\\", \\"2\\": \\"var(--space-2__6cbmls4)\\", \\"3\\": \\"var(--space-3__6cbmls5)\\"}}; + +export { altTheme, responsiveTheme, theme, vars }; +", + ], + Array [ + "src/themes.css.ts.vanilla.css", + ":root, .themes__6cbmls0 { + --colors-backgroundColor__6cbmls1: blue; + --colors-text__6cbmls2: white; + --space-1__6cbmls3: 4px; + --space-2__6cbmls4: 8px; + --space-3__6cbmls5: 12px; +} +.themes__6cbmls6 { + --colors-backgroundColor__6cbmls1: green; + --colors-text__6cbmls2: white; + --space-1__6cbmls3: 8px; + --space-2__6cbmls4: 12px; + --space-3__6cbmls5: 16px; +} +.themes__6cbmls7 { + --colors-backgroundColor__6cbmls1: pink; + --colors-text__6cbmls2: purple; + --space-1__6cbmls3: 6px; + --space-2__6cbmls4: 12px; + --space-3__6cbmls5: 18px; +} +@media screen and (min-width: 768px) { + .themes__6cbmls7 { + --colors-backgroundColor__6cbmls1: purple; + --colors-text__6cbmls2: pink; } }", ], @@ -461,44 +491,14 @@ var testNodes = { export { altButton, altContainer, testNodes as default, dynamicVarsButton, dynamicVarsContainer, inlineThemeButton, inlineThemeContainer, nestedRootButton, nestedRootContainer, responsiveThemeButton, responsiveThemeContainer, root, rootButton, rootContainer }; ", ], - Array [ - "themes.css.ts.vanilla.css", - ":root, .themes__cvta170 { - --colors-backgroundColor__cvta171: blue; - --colors-text__cvta172: white; - --space-1__cvta173: 4px; - --space-2__cvta174: 8px; - --space-3__cvta175: 12px; -} -.themes__cvta176 { - --colors-backgroundColor__cvta171: green; - --colors-text__cvta172: white; - --space-1__cvta173: 8px; - --space-2__cvta174: 12px; - --space-3__cvta175: 16px; -} -.themes__cvta177 { - --colors-backgroundColor__cvta171: pink; - --colors-text__cvta172: purple; - --space-1__cvta173: 6px; - --space-2__cvta174: 12px; - --space-3__cvta175: 18px; -} -@media screen and (min-width: 768px) { - .themes__cvta177 { - --colors-backgroundColor__cvta171: purple; - --colors-text__cvta172: pink; - } -}", - ], ] `; exports[`rollup-plugin should build without preserveModules 1`] = ` Array [ Array [ - "assets/@fixtures/themed/src/shared.css.ts.vanilla-012a0604.css", - ".shared__4dtfen0 { + "assets/src/shared.css.ts.vanilla-82a38ac6.css", + ".shared__9k2war0 { box-shadow: 0 0 5px red; } body { @@ -506,105 +506,105 @@ body { }", ], Array [ - "assets/@fixtures/themed/src/styles.css.ts.vanilla-6c29c763.css", + "assets/src/styles.css.ts.vanilla-3addedd5.css", "@font-face { src: local(\\"Impact\\"); - font-family: \\"styles__jteyb10\\"; + font-family: \\"styles__g7vce90\\"; } @font-face { src: local(\\"Comic Sans MS\\"); font-family: MyGlobalComicSans; } -.styles__jteyb11 { +.styles__g7vce91 { display: flex; flex-direction: column; - gap: var(--space-2__cvta174); - padding: var(--space-3__cvta175); + gap: var(--space-2__6cbmls4); + padding: var(--space-3__6cbmls5); } -.styles__jteyb12 { +.styles__g7vce92 { z-index: 1; position: relative; } -.styles__jteyb13 { - font-family: \\"styles__jteyb10\\"; - background-color: var(--colors-backgroundColor__cvta171, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\"); - color: var(--colors-text__cvta172); +.styles__g7vce93 { + font-family: \\"styles__g7vce90\\"; + background-color: var(--colors-backgroundColor__6cbmls1, \\"THIS FALLBACK VALUE SHOULD NEVER BE USED\\"); + color: var(--colors-text__6cbmls2); border-radius: 9999px; } -.themes__cvta176 .themes__cvta170 .styles__jteyb11 .styles__jteyb13 { +.themes__6cbmls6 .themes__6cbmls0 .styles__g7vce91 .styles__g7vce93 { font-family: MyGlobalComicSans; outline: 5px solid red; } -body .styles__jteyb12:after { +body .styles__g7vce92:after { content: 'I am content'; } -html .styles_1\\\\/2__jteyb16 { - opacity: var(--jteyb14, 0.5); +html .styles_1\\\\/2__g7vce96 { + opacity: var(--g7vce94, 0.5); } -html .styles_1\\\\/4__jteyb17 { - opacity: var(--jteyb14, var(--jteyb15, 0.25)); +html .styles_1\\\\/4__g7vce97 { + opacity: var(--g7vce94, var(--g7vce95, 0.25)); } @media only screen and (min-width: 500px) { - .styles__jteyb11 { - border: 1px solid var(--colors-backgroundColor__cvta171); + .styles__g7vce91 { + border: 1px solid var(--colors-backgroundColor__6cbmls1); } - .styles__jteyb13 { - padding: var(--space-1__cvta173); + .styles__g7vce93 { + padding: var(--space-1__6cbmls3); } } @media only screen and (min-width: 1000px) { - .styles__jteyb13 { - padding: var(--space-2__cvta174); + .styles__g7vce93 { + padding: var(--space-2__6cbmls4); } }", ], Array [ - "assets/@fixtures/themed/src/themes.css.ts.vanilla-3259c08f.css", - ":root, .themes__cvta170 { - --colors-backgroundColor__cvta171: blue; - --colors-text__cvta172: white; - --space-1__cvta173: 4px; - --space-2__cvta174: 8px; - --space-3__cvta175: 12px; -} -.themes__cvta176 { - --colors-backgroundColor__cvta171: green; - --colors-text__cvta172: white; - --space-1__cvta173: 8px; - --space-2__cvta174: 12px; - --space-3__cvta175: 16px; -} -.themes__cvta177 { - --colors-backgroundColor__cvta171: pink; - --colors-text__cvta172: purple; - --space-1__cvta173: 6px; - --space-2__cvta174: 12px; - --space-3__cvta175: 18px; + "assets/src/themes.css.ts.vanilla-becd40aa.css", + ":root, .themes__6cbmls0 { + --colors-backgroundColor__6cbmls1: blue; + --colors-text__6cbmls2: white; + --space-1__6cbmls3: 4px; + --space-2__6cbmls4: 8px; + --space-3__6cbmls5: 12px; +} +.themes__6cbmls6 { + --colors-backgroundColor__6cbmls1: green; + --colors-text__6cbmls2: white; + --space-1__6cbmls3: 8px; + --space-2__6cbmls4: 12px; + --space-3__6cbmls5: 16px; +} +.themes__6cbmls7 { + --colors-backgroundColor__6cbmls1: pink; + --colors-text__6cbmls2: purple; + --space-1__6cbmls3: 6px; + --space-2__6cbmls4: 12px; + --space-3__6cbmls5: 18px; } @media screen and (min-width: 768px) { - .themes__cvta177 { - --colors-backgroundColor__cvta171: purple; - --colors-text__cvta172: pink; + .themes__6cbmls7 { + --colors-backgroundColor__6cbmls1: purple; + --colors-text__6cbmls2: pink; } }", ], Array [ "index.js", "import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic'; -import './assets/@fixtures/themed/src/themes.css.ts.vanilla-3259c08f.css'; -import './assets/@fixtures/themed/src/shared.css.ts.vanilla-012a0604.css'; -import './assets/@fixtures/themed/src/styles.css.ts.vanilla-6c29c763.css'; +import './assets/src/themes.css.ts.vanilla-becd40aa.css'; +import './assets/src/shared.css.ts.vanilla-82a38ac6.css'; +import './assets/src/styles.css.ts.vanilla-3addedd5.css'; -var altTheme = \\"themes__cvta176\\"; -var responsiveTheme = \\"themes__cvta177\\"; -var theme = \\"themes__cvta170\\"; -var vars = {colors: {backgroundColor: \\"var(--colors-backgroundColor__cvta171)\\", text: \\"var(--colors-text__cvta172)\\"}, space: {\\"1\\": \\"var(--space-1__cvta173)\\", \\"2\\": \\"var(--space-2__cvta174)\\", \\"3\\": \\"var(--space-3__cvta175)\\"}}; +var altTheme = \\"themes__6cbmls6\\"; +var responsiveTheme = \\"themes__6cbmls7\\"; +var theme = \\"themes__6cbmls0\\"; +var vars = {colors: {backgroundColor: \\"var(--colors-backgroundColor__6cbmls1)\\", text: \\"var(--colors-text__6cbmls2)\\"}, space: {\\"1\\": \\"var(--space-1__6cbmls3)\\", \\"2\\": \\"var(--space-2__6cbmls4)\\", \\"3\\": \\"var(--space-3__6cbmls5)\\"}}; -var button = \\"styles__jteyb13 shared__4dtfen0 styles__jteyb12\\"; -var container = \\"styles__jteyb11\\"; -var opacity = {\\"1/2\\": \\"styles_1/2__jteyb16\\", \\"1/4\\": \\"styles_1/4__jteyb17\\"}; +var button = \\"styles__g7vce93 shared__9k2war0 styles__g7vce92\\"; +var container = \\"styles__g7vce91\\"; +var opacity = {\\"1/2\\": \\"styles_1/2__g7vce96\\", \\"1/4\\": \\"styles_1/4__g7vce97\\"}; -var shadow = \\"shared__4dtfen0\\"; +var shadow = \\"shared__9k2war0\\"; var root = \\"root\\"; var rootContainer = \\"rootContainer\\";