diff --git a/.changeset/bright-pumas-lie.md b/.changeset/bright-pumas-lie.md new file mode 100644 index 00000000..a845151c --- /dev/null +++ b/.changeset/bright-pumas-lie.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/yak-swc/yak_swc/src/lib.rs b/packages/yak-swc/yak_swc/src/lib.rs index 154c45ac..6117a79f 100644 --- a/packages/yak-swc/yak_swc/src/lib.rs +++ b/packages/yak-swc/yak_swc/src/lib.rs @@ -994,7 +994,7 @@ mod tests { use swc_ecma_transforms_testing::FixtureTestConfig; #[testing::fixture("tests/fixture/**/input.tsx")] - fn fixture(input: PathBuf) { + fn fixture_dev(input: PathBuf) { test_fixture( Syntax::Typescript(TsSyntax { tsx: true, @@ -1009,7 +1009,7 @@ mod tests { )) }, &input, - &input.with_file_name("output.tsx"), + &input.with_file_name("output.dev.tsx"), FixtureTestConfig { module: None, sourcemap: false, @@ -1017,6 +1017,32 @@ mod tests { }, ) } + + #[testing::fixture("tests/fixture/**/input.tsx")] + fn fixture_prod(input: PathBuf) { + test_fixture( + Syntax::Typescript(TsSyntax { + tsx: true, + ..Default::default() + }), + &|tester| { + visit_mut_pass(TransformVisitor::new( + Some(tester.comments.clone()), + "path/input.tsx".to_string(), + false, + None, + )) + }, + &input, + &input.with_file_name("output.prod.tsx"), + FixtureTestConfig { + module: None, + sourcemap: false, + allow_error: true, + }, + ) + } + #[testing::fixture("tests/fixture/**/input.yak.tsx")] fn fixture_yak(input: PathBuf) { test_fixture( diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/attrs/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx new file mode 100644 index 00000000..fea4c2a0 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.prod.tsx @@ -0,0 +1,19 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + font-weight: bold; + &:hover { + background-color: #0056b3; + } +} +*/ /*#__PURE__*/ styled.button.attrs({ + type: "button" +})(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.prod.tsx new file mode 100644 index 00000000..05e5b1c9 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.prod.tsx @@ -0,0 +1,17 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + font-weight: bold; + &:hover { + background-color: #0056b3; + } +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/comments/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/comments/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/comments/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/comments/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/comments/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/comments/output.prod.tsx new file mode 100644 index 00000000..fc6c2b73 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/comments/output.prod.tsx @@ -0,0 +1,9 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const primary = "green"; +export const Button = /*YAK Extracted CSS: +.Button { + color: green; + background: red; +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.prod.tsx new file mode 100644 index 00000000..05a15404 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.prod.tsx @@ -0,0 +1,55 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const ArticleCard = /*YAK Extracted CSS: +.ArticleCard { + background-color: #fff; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; + &:hover { + transform: translateY(-5px); + } + .card-image { + width: 100%; + height: 200px; + object-fit: cover; + } + .card-content { + padding: 20px; + h2 { + font-size: 24px; + color: #333; + margin-bottom: 10px; + } + p { + font-size: 16px; + color: #666; + line-height: 1.5; + } + &::after { + content: ""; + display: block; + width: 50px; + height: 2px; + background-color: #007bff; + margin-top: 20px; + } + } + .card-footer { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + background-color: #f8f9fa; + .author { + font-size: 14px; + color: #555; + } + .date { + font-size: 14px; + color: #777; + } + } +} +*/ /*#__PURE__*/ styled.article(__styleYak.ArticleCard); diff --git a/packages/yak-swc/yak_swc/tests/fixture/constants/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/constants/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/constants/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/constants/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/constants/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/constants/output.prod.tsx new file mode 100644 index 00000000..cd257ad9 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/constants/output.prod.tsx @@ -0,0 +1,31 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const colors = { + primary: "#007bff", + secondary: "#6c757d", + success: "#28a745", + danger: "#dc3545", + warning: "#ffc107", + info: "#17a2b8", + light: "#f8f9fa", + dark: "#343a40" +}; +const borderRadius = "4px"; +const stacking = 1; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; + color: #f8f9fa; + padding: 10px 33.3333%; + z-index: 1; + margin-top: -1px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + font-weight: bold; + &:hover { + background-color: #343a40; + } +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.prod.tsx new file mode 100644 index 00000000..a533ee24 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.prod.tsx @@ -0,0 +1,17 @@ +import { styled } from "next-yak/internal"; +// @ts-ignore +import { colors } from "./colorDefinitions"; +// @ts-ignore +import { fonts } from "./fontDefinitions"; +// @ts-ignore +import { sizes } from "./sizeDefinitions"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + font-size: --yak-css-import: url("./fontDefinitions:fonts:sm",mixin); + color: --yak-css-import: url("./colorDefinitions:colors:dark:primary",mixin); + border-color: --yak-css-import: url("./colorDefinitions:colors:shadows:dark:primary",mixin); + background-color: --yak-css-import: url("./colorDefinitions:colors:light:full%20opacity",mixin); + height: --yak-css-import: url("./sizeDefinitions:sizes:0",mixin); +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.stderr b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.stderr new file mode 100644 index 00000000..c3ccc853 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.stderr @@ -0,0 +1,11 @@ + x Dynamic mixins must not be exported. Please ensure that this mixin requires no props. + ,-[input.js:15:1] + 14 | + 15 | ,-> export const buttonStyles = css` + 16 | | padding: 10px 20px; + 17 | | border: none; + 18 | | border-radius: 5px; + 19 | | cursor: pointer; + 20 | | ${textStyles}; + 21 | `-> `; + `---- diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.stderr b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.stderr new file mode 100644 index 00000000..c3ccc853 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.stderr @@ -0,0 +1,11 @@ + x Dynamic mixins must not be exported. Please ensure that this mixin requires no props. + ,-[input.js:15:1] + 14 | + 15 | ,-> export const buttonStyles = css` + 16 | | padding: 10px 20px; + 17 | | border: none; + 18 | | border-radius: 5px; + 19 | | cursor: pointer; + 20 | | ${textStyles}; + 21 | `-> `; + `---- diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.tsx new file mode 100644 index 00000000..41487ddf --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-dynamic-export/output.prod.tsx @@ -0,0 +1,54 @@ +import { css, styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const textColor = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.textColor__$active)); +const textStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.textStyles__$active)); +export const buttonStyles = /*YAK EXPORTED MIXIN:buttonStyles +padding: 10px 20px; +border: none; +border-radius: 5px; +cursor: pointer; +font-size: 16px; +color: black; +color: red; +*/ /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active)); +export const Button = /*YAK Extracted CSS: +.Button { + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; +} +.Button__ { + &:hover { + font-size: 16px; + color: black; + } +} +.Button__-and-$active { + &:hover { + color: red; + } +} +.Button { + &:focus { + font-size: 16px; + color: black; + } +} +.Button__$active { + &:focus { + color: red; + } +} +.Button { + &:focus { + font-size: 16px; + color: black; + } +} +.Button__$active1 { + &:focus { + color: red; + } +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button, ({ $isSet })=>$isSet && true && true && true && /*#__PURE__*/ css(__styleYak.Button__, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak["Button__-and-$active"])), ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.Button__$active), ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.Button__$active1)); diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.prod.tsx new file mode 100644 index 00000000..3571cc30 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-export/output.prod.tsx @@ -0,0 +1,47 @@ +import { css, styled } from "next-yak/internal"; +import { typogaphyMixin } from "./typography"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const textColor = /*#__PURE__*/ css(); +const textStyles = /*#__PURE__*/ css(); +export const buttonStyles = /*YAK EXPORTED MIXIN:buttonStyles +padding: 10px 20px; +border: none; +border-radius: 5px; +cursor: pointer; +font-size: 16px; +color: black; +--yak-css-import: url("./typography:typogaphyMixin",mixin); +*/ /*#__PURE__*/ css(); +export const Button = /*YAK Extracted CSS: +.Button { + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; +} +.Button__ { + &:hover { + font-size: 16px; + color: black; + } +} +.Button { + &:focus { + font-size: 16px; + color: black; + font-size: 16px; + color: black; + } +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button, ({ $isSet })=>$isSet && true && true && true && /*#__PURE__*/ css(__styleYak.Button__)); +export const aspectRatios = { + base: /*YAK EXPORTED MIXIN:aspectRatios:base +padding-top: 100%; +*/ /*#__PURE__*/ css(), + "16:9": /*YAK EXPORTED MIXIN:aspectRatios:16%3A9 +padding-top: 56.25%; +*/ /*#__PURE__*/ css(), + "4:3": /*YAK EXPORTED MIXIN:aspectRatios:4%3A3 +padding-top: 75%; +*/ /*#__PURE__*/ css() +}; diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.prod.tsx new file mode 100644 index 00000000..93c1918f --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin-import/output.prod.tsx @@ -0,0 +1,58 @@ +import { styled } from "next-yak/internal"; +// @ts-ignore +import { fonts } from "./fonts"; +// @ts-ignore +import { fancy } from "./fancy"; +// @ts-ignore +import { yakMixin } from "./constants.yak"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*YAK Extracted CSS: +.Button { + --yak-css-import: url("./fonts:fonts:h1",mixin); +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button); +export const Button2 = /*YAK Extracted CSS: +.Button2 { + --yak-css-import: url("./fonts:fonts:h1",mixin); +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button2); +export const Button3 = /*YAK Extracted CSS: +.Button3 { + --yak-css-import: url("./fonts:fonts:h1",mixin); + color: green; +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button3); +export const Button4 = /*YAK Extracted CSS: +.Button4 { + --yak-css-import: url("./fonts:fonts:h1",mixin) +--yak-css-import: url("./fonts:fonts:underline",mixin); + color: green; +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button4); +export const Button5 = /*YAK Extracted CSS: +.Button5 { + --yak-css-import: url("./fonts:fonts:h1",mixin); + --yak-css-import: url("./fancy:fancy:mixins:specialEffect",mixin); + color: green; +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button5); +export const Button6 = /*YAK Extracted CSS: +.Button6 { + &:hover { + --yak-css-import: url("./constants.yak:yakMixin",mixin); + } + --yak-css-import: url("./fancy:fancy:mixins:specialEffect",mixin) +; + color: green; +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button6); +export const Button7 = /*YAK Extracted CSS: +.Button7 { + &:hover { + --yak-css-import: url("./constants.yak:yakMixin",mixin); + } + --yak-css-import: url("./fancy:fancy:aspectRatio:16%3A9",mixin) +; + color: green; +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button7); diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.prod.tsx new file mode 100644 index 00000000..da1bc120 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/cross-file-selectors/output.prod.tsx @@ -0,0 +1,17 @@ +import { styled } from "next-yak/internal"; +// @ts-ignore +import { Icon } from "./Icon"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const primary = "green"; +export const Button = /*YAK Extracted CSS: +.Button { + font-size: 1rem; + color: green; + --yak-css-import: url("./Icon:Icon",selector) { + color: red; + } + --yak-css-import: url("./Icon:Icon",selector) --yak-css-import: url("./Icon:Icon",selector) { + color: blue; + } +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.prod.tsx new file mode 100644 index 00000000..f53aa6a7 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/css-grid-layout/output.prod.tsx @@ -0,0 +1,59 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const GridLayout = /*YAK Extracted CSS: +.GridLayout { + display: grid; + grid-template-areas: "header header header" +"nav content sidebar" +"footer footer footer"; + grid-template-columns: 200px 1fr 200px; + grid-template-rows: auto 1fr auto; + min-height: 100vh; + gap: 20px; + padding: 20px; + background-color: #f0f0f0; + @media (max-width: 768px) { + grid-template-areas: "header" +"nav" +"content" +"sidebar" +"footer"; + grid-template-columns: 1fr; + } + .header { + grid-area: header; + background-color: #007bff; + color: white; + padding: 20px; + border-radius: 8px; + } + .nav { + grid-area: nav; + background-color: #28a745; + color: white; + padding: 20px; + border-radius: 8px; + } + .content { + grid-area: content; + background-color: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + .sidebar { + grid-area: sidebar; + background-color: #ffc107; + padding: 20px; + border-radius: 8px; + } + .footer { + grid-area: footer; + background-color: #6c757d; + color: white; + padding: 20px; + border-radius: 8px; + text-align: center; + } +} +*/ /*#__PURE__*/ styled.div(__styleYak.GridLayout); diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx new file mode 100644 index 00000000..baecd4a8 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/css-import-order/output.prod.tsx @@ -0,0 +1,14 @@ +import { styled } from "next-yak/internal"; +import { IconButton } from "./iconButton"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const FancyIconButton = /*YAK Extracted CSS: +.FancyIconButton { + color: hotpink; + &:before { + content: "FancyIconButton"; + } + --yak-css-import: url("./iconButton:IconButton",selector) { + color: #f0f; + } +} +*/ /*#__PURE__*/ styled(IconButton)(__styleYak.FancyIconButton); diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.prod.tsx new file mode 100644 index 00000000..27d31ecf --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-inline/output.prod.tsx @@ -0,0 +1,14 @@ +import { styled, css } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const ThemedButton = /*YAK Extracted CSS: +.ThemedButton { + &:hover { + color: black; + } +} +.ThemedButton__$active { + &:hover { + color: red; + } +} +*/ /*#__PURE__*/ styled.button(__styleYak.ThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.ThemedButton__$active)); diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx new file mode 100644 index 00000000..1408462a --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin-nested/output.prod.tsx @@ -0,0 +1,68 @@ +import { styled, css, __yak_unitPostFix } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { + "style": { + "--ym7uBBu": __yak_unitPostFix(({ $letters })=>$letters * 15, "px") + } + }), { + "style": { + "--ym7uBBu1": __yak_unitPostFix(({ $letters })=>$letters * 10, "px") + } +}); +export const ThemedButton = /*YAK Extracted CSS: +.ThemedButton { + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; +} +.ThemedButton__$active { + @media (max-width: 600px) { + background-color: #f0f0f0; + max-width: var(--ym7uBBu2); + } +} +.ThemedButton { + width: var(--ym7uBBu3); +} +*/ /*#__PURE__*/ styled.button(__styleYak.ThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.ThemedButton__$active, { + "style": { + "--ym7uBBu2": __yak_unitPostFix(({ $letters })=>$letters * 15, "px") + } + }), { + "style": { + "--ym7uBBu3": __yak_unitPostFix(({ $letters })=>$letters * 10, "px") + } +}); +export const CustomThemedButton = /*YAK Extracted CSS: +.CustomThemedButton { + color: red; + &:not([disabled]) { + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + } +} +.CustomThemedButton__$active { + &:not([disabled]) { + @media (max-width: 600px) { + background-color: #f0f0f0; + max-width: var(--ym7uBBu4); + } + } +} +.CustomThemedButton { + &:not([disabled]) { + width: var(--ym7uBBu5); + } +} +*/ /*#__PURE__*/ styled.button(__styleYak.CustomThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.CustomThemedButton__$active, { + "style": { + "--ym7uBBu4": __yak_unitPostFix(({ $letters })=>$letters * 15, "px") + } + }), { + "style": { + "--ym7uBBu5": __yak_unitPostFix(({ $letters })=>$letters * 10, "px") + } +}); diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx new file mode 100644 index 00000000..048b734b --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/css-mixin/output.prod.tsx @@ -0,0 +1,70 @@ +import { styled, css, __yak_unitPostFix } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const buttonStyles = /*#__PURE__*/ css(({ $active })=>$active && /*#__PURE__*/ css(__styleYak.buttonStyles__$active, { + "style": { + "--ym7uBBu": __yak_unitPostFix(({ $letters })=>$letters * 15, "px") + } + }), function({ $letters }) { + return $letters > 5 && /*#__PURE__*/ css(__styleYak.buttonStyles__); +}, { + "style": { + "--ym7uBBu1": __yak_unitPostFix(({ $letters })=>$letters * 10, "px") + } +}); +export const ThemedButton = /*YAK Extracted CSS: +.ThemedButton { + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; +} +.ThemedButton__$active { + background-color: #f0f0f0; + max-width: var(--ym7uBBu2); +} +.ThemedButton { + width: var(--ym7uBBu3); +} +.ThemedButton__ { + color: red; +} +*/ /*#__PURE__*/ styled.button(__styleYak.ThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.ThemedButton__$active, { + "style": { + "--ym7uBBu2": __yak_unitPostFix(({ $letters })=>$letters * 15, "px") + } + }), function({ $letters }) { + return $letters > 5 && /*#__PURE__*/ css(__styleYak.ThemedButton__); +}, { + "style": { + "--ym7uBBu3": __yak_unitPostFix(({ $letters })=>$letters * 10, "px") + } +}); +export const CustomThemedButton = /*YAK Extracted CSS: +.CustomThemedButton { + color: red; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; +} +.CustomThemedButton__$active { + background-color: #f0f0f0; + max-width: var(--ym7uBBu4); +} +.CustomThemedButton { + width: var(--ym7uBBu5); +} +.CustomThemedButton__ { + color: red; +} +*/ /*#__PURE__*/ styled.button(__styleYak.CustomThemedButton, ({ $active })=>$active && /*#__PURE__*/ css(__styleYak.CustomThemedButton__$active, { + "style": { + "--ym7uBBu4": __yak_unitPostFix(({ $letters })=>$letters * 15, "px") + } + }), function({ $letters }) { + return $letters > 5 && /*#__PURE__*/ css(__styleYak.CustomThemedButton__); +}, { + "style": { + "--ym7uBBu5": __yak_unitPostFix(({ $letters })=>$letters * 10, "px") + } +}); diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.dev.stderr b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.dev.stderr new file mode 100644 index 00000000..01623ecb --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.dev.stderr @@ -0,0 +1,7 @@ + x Invalid CSS attribute. The 'css' prop should contain a valid CSS-in-JS expression. Example: css={css`color: red;`} + ,-[input.js:3:1] + 2 | + 3 | const Elem = () =>
; + : ^^^^^^^^^^^^^^^^^^^^^ + 4 | const Elem2 = (props: any) =>
; + `---- diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.stderr b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.stderr new file mode 100644 index 00000000..01623ecb --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.stderr @@ -0,0 +1,7 @@ + x Invalid CSS attribute. The 'css' prop should contain a valid CSS-in-JS expression. Example: css={css`color: red;`} + ,-[input.js:3:1] + 2 | + 3 | const Elem = () =>
; + : ^^^^^^^^^^^^^^^^^^^^^ + 4 | const Elem2 = (props: any) =>
; + `---- diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.tsx new file mode 100644 index 00000000..d14e7b52 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/css-prop-invalid/output.prod.tsx @@ -0,0 +1,3 @@ +import { css } from "next-yak/internal"; +const Elem = ()=>
; +const Elem2 = (props: any)=>
; diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/css-prop/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/css-prop/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.prod.tsx new file mode 100644 index 00000000..4eb7576e --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/css-prop/output.prod.tsx @@ -0,0 +1,52 @@ +import { css, __yak_mergeCssProp } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const Elem = ()=>
; +const Elem2 = ()=>
; +const Elem3 = ()=>
; +const Elem4 = (props: any)=>
; +const Elem5 = (props: any)=>
; +const Elem6 = ()=>
; +const Elem7 = ()=>
; +const Elem8 = ()=>
; diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/css-variables/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/css-variables/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.prod.tsx new file mode 100644 index 00000000..c9b4b2c1 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/css-variables/output.prod.tsx @@ -0,0 +1,23 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const ThemedButton = /*YAK Extracted CSS: +.ThemedButton { + background-color: var(--primary-color); + color: #fff; + font-size: var(--font-size-base); + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + &:hover { + background-color: var(--secondary-color); + } +} +*/ /*#__PURE__*/ styled.button(__styleYak.ThemedButton); +export const ThemeProvider = /*YAK Extracted CSS: +.ThemeProvider { + --primary-color: #007bff; + --secondary-color: #6c757d; + --font-size-base: 16px; +} +*/ /*#__PURE__*/ styled.div(__styleYak.ThemeProvider); diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.stderr b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.stderr new file mode 100644 index 00000000..0be4015b --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.stderr @@ -0,0 +1,16 @@ + x Dynamic values in CSS properties must be wrapped in arrow functions to make runtime behavior explicit. + | Example: ${() => getValue()} instead of ${getValue()} + ,-[input.js:5:1] + 4 | display: flex; + 5 | z-index: ${getZIndex()}; + : ^^^^^^^^^^^ + 6 | margin-bottom: ${spacing[40].toString()}px; + `---- + x Dynamic values in CSS properties must be wrapped in arrow functions to make runtime behavior explicit. + | Example: ${() => getValue()} instead of ${getValue()} + ,-[input.js:6:1] + 5 | z-index: ${getZIndex()}; + 6 | margin-bottom: ${spacing[40].toString()}px; + : ^^^^^^^^^^^^^^^^^^^^^^ + 7 | `; + `---- diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.stderr b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.stderr new file mode 100644 index 00000000..0be4015b --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.stderr @@ -0,0 +1,16 @@ + x Dynamic values in CSS properties must be wrapped in arrow functions to make runtime behavior explicit. + | Example: ${() => getValue()} instead of ${getValue()} + ,-[input.js:5:1] + 4 | display: flex; + 5 | z-index: ${getZIndex()}; + : ^^^^^^^^^^^ + 6 | margin-bottom: ${spacing[40].toString()}px; + `---- + x Dynamic values in CSS properties must be wrapped in arrow functions to make runtime behavior explicit. + | Example: ${() => getValue()} instead of ${getValue()} + ,-[input.js:6:1] + 5 | z-index: ${getZIndex()}; + 6 | margin-bottom: ${spacing[40].toString()}px; + : ^^^^^^^^^^^^^^^^^^^^^^ + 7 | `; + `---- diff --git a/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx new file mode 100644 index 00000000..cc6e76ba --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/dynamic-prop-error/output.prod.tsx @@ -0,0 +1,14 @@ +import { styled, __yak_unitPostFix } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const FlexContainer = /*YAK Extracted CSS: +.FlexContainer { + display: flex; + z-index: var(--ym7uBBu); + margin-bottom: var(--ym7uBBu1); +} +*/ /*#__PURE__*/ styled.div(__styleYak.FlexContainer, { + "style": { + "--ym7uBBu": getZIndex(), + "--ym7uBBu1": __yak_unitPostFix(spacing[40].toString(), "px") + } +}); diff --git a/packages/yak-swc/yak_swc/tests/fixture/encoded/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/encoded/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/encoded/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/encoded/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/encoded/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/encoded/output.prod.tsx new file mode 100644 index 00000000..10a21ffe --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/encoded/output.prod.tsx @@ -0,0 +1,14 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const before = "\\2022"; +export const Button = /*YAK Extracted CSS: +.Button { + background-color: #007bff; + &::before { + content: "\2022"; + } + &:after { + content: "\2022"; + } +} +*/ /*#__PURE__*/ styled.button(__styleYak.Button); diff --git a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx new file mode 100644 index 00000000..c0ab69d3 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/extending-styles/output.prod.tsx @@ -0,0 +1,29 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const BaseButton = /*YAK Extracted CSS: +.BaseButton { + padding: 10px 20px; + border: none; + border-radius: 4px; + font-size: 16px; + cursor: pointer; +} +*/ /*#__PURE__*/ styled.button(__styleYak.BaseButton); +export const PrimaryButton = /*YAK Extracted CSS: +.PrimaryButton { + background-color: #007bff; + color: #fff; + &:hover { + background-color: #0056b3; + } +} +*/ /*#__PURE__*/ styled(BaseButton)(__styleYak.PrimaryButton); +export const SecondaryButton = /*YAK Extracted CSS: +.SecondaryButton { + background-color: #6c757d; + color: #fff; + &:hover { + background-color: #545b62; + } +} +*/ /*#__PURE__*/ styled(BaseButton)(__styleYak.SecondaryButton); diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.prod.tsx new file mode 100644 index 00000000..b2d54cbc --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-function/output.prod.tsx @@ -0,0 +1,34 @@ +import { styled, css, keyframes } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const FadeInText = /*YAK Extracted CSS: +.FadeInText__$reverse { + animation: fadeOut 1s ease-in; +} +.FadeInText__not_$reverse { + animation: fadeIn 1s ease-in; +} +.FadeInText { + font-size: 18px; + color: #333; +} +*/ /*#__PURE__*/ styled.p(__styleYak.FadeInText, ({ $reverse })=>$reverse ? /*#__PURE__*/ css(__styleYak.FadeInText__$reverse) : /*#__PURE__*/ css(__styleYak.FadeInText__not_$reverse)); +const fadeIn = /*YAK Extracted CSS: +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +*/ /*#__PURE__*/ keyframes(__styleYak.fadeIn); +const fadeOut = /*YAK Extracted CSS: +@keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +*/ /*#__PURE__*/ keyframes(__styleYak.fadeOut); diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx new file mode 100644 index 00000000..408decd1 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations-object/output.prod.tsx @@ -0,0 +1,64 @@ +import { styled, css, keyframes } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const FadeInText = /*YAK Extracted CSS: +.FadeInText__$reverse { + animation: animations_fadeOut 1s ease-in; +} +.FadeInText__not_$reverse { + animation: animations_fadeIn 1s ease-in; +} +.FadeInText { + font-size: 18px; + color: #333; +} +*/ /*#__PURE__*/ styled.p(__styleYak.FadeInText, ({ $reverse })=>$reverse ? /*#__PURE__*/ css(__styleYak.FadeInText__$reverse) : /*#__PURE__*/ css(__styleYak.FadeInText__not_$reverse)); +const animations = { + fadeIn: /*YAK Extracted CSS: +@keyframes animations_fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +*/ /*#__PURE__*/ keyframes(__styleYak.animations_fadeIn), + fadeOut: /*YAK Extracted CSS: +@keyframes animations_fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +*/ /*#__PURE__*/ keyframes(__styleYak.animations_fadeOut) +}; +const slides = { + 200: /*YAK Extracted CSS: +@keyframes slides_200 { + to { + transform: translate(200px, 200px); + } +} +*/ /*#__PURE__*/ keyframes(__styleYak.slides_200), + "x400": /*YAK Extracted CSS: +@keyframes slides_x400 { + from { + transform: translateX(0); + } + to { + transform: translateX(400px); + } +} +*/ /*#__PURE__*/ keyframes(__styleYak.slides_x400) +}; +export const FancyButton = /*YAK Extracted CSS: +.FancyButton { + background-color: #f00; + animation: slides_x400 1s ease-in-out, animations_fadeIn 1s ease-in; + &:hover { + animation: slides_200 1s ease-in-out, animations_fadeOut 1s ease-in; + } +} +*/ /*#__PURE__*/ styled.button(__styleYak.FancyButton); diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.prod.tsx new file mode 100644 index 00000000..f0d3b3a8 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframe-animations/output.prod.tsx @@ -0,0 +1,19 @@ +import { styled, keyframes } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const fadeIn = /*YAK Extracted CSS: +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +*/ /*#__PURE__*/ keyframes(__styleYak.fadeIn); +export const FadeInText = /*YAK Extracted CSS: +.FadeInText { + animation: fadeIn 1s ease-in; + font-size: 18px; + color: #333; +} +*/ /*#__PURE__*/ styled.p(__styleYak.FadeInText); diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.stderr b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.stderr new file mode 100644 index 00000000..ed5138f9 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.stderr @@ -0,0 +1,13 @@ + x Only css template literals are allowed inside css expressions + ,-[input.js:4:1] + 3 | export const Button = styled.button` + 4 | ,-> ${keyframes` + 5 | | from { + 6 | | opacity: 0; + 7 | | } + 8 | | to { + 9 | | opacity: 1; + 10 | | } + 11 | `-> `}; + 12 | `; + `---- diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.stderr b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.stderr new file mode 100644 index 00000000..ed5138f9 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.stderr @@ -0,0 +1,13 @@ + x Only css template literals are allowed inside css expressions + ,-[input.js:4:1] + 3 | export const Button = styled.button` + 4 | ,-> ${keyframes` + 5 | | from { + 6 | | opacity: 0; + 7 | | } + 8 | | to { + 9 | | opacity: 1; + 10 | | } + 11 | `-> `}; + 12 | `; + `---- diff --git a/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.tsx new file mode 100644 index 00000000..f2300a83 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/keyframes-nested-error/output.prod.tsx @@ -0,0 +1,3 @@ +import { styled, keyframes } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Button = /*#__PURE__*/ styled.button(); diff --git a/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/media-queries/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/media-queries/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.prod.tsx new file mode 100644 index 00000000..51ea218f --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/media-queries/output.prod.tsx @@ -0,0 +1,16 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const ResponsiveGrid = /*YAK Extracted CSS: +.ResponsiveGrid { + display: grid; + grid-template-columns: 1fr; + gap: 20px; + padding: 20px; + @media (min-width: 768px) { + grid-template-columns: repeat(2, 1fr); + } + @media (min-width: 1024px) { + grid-template-columns: repeat(3, 1fr); + } +} +*/ /*#__PURE__*/ styled.div(__styleYak.ResponsiveGrid); diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.stderr b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.stderr new file mode 100644 index 00000000..3f99e0a8 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.stderr @@ -0,0 +1,7 @@ + x atoms() must not be used inside selectors or media query + ,-[input.js:6:1] + 5 | &:hover { + 6 | ${atoms("bg-blue-700")} + : ^^^^^^^^^^^^^^^^^^^^ + 7 | } + `---- diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.stderr b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.stderr new file mode 100644 index 00000000..3f99e0a8 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.stderr @@ -0,0 +1,7 @@ + x atoms() must not be used inside selectors or media query + ,-[input.js:6:1] + 5 | &:hover { + 6 | ${atoms("bg-blue-700")} + : ^^^^^^^^^^^^^^^^^^^^ + 7 | } + `---- diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.tsx new file mode 100644 index 00000000..9eb6d875 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind-error/output.prod.tsx @@ -0,0 +1,3 @@ +import { styled, atoms } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const TailwindButton = /*#__PURE__*/ styled.button(atoms("bg-blue-500 text-white font-bold py-2 px-4 rounded"), atoms("bg-blue-700")); diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.prod.tsx new file mode 100644 index 00000000..83441594 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/mixing-with-tailwind/output.prod.tsx @@ -0,0 +1,3 @@ +import { styled, atoms } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const TailwindButton = /*#__PURE__*/ styled.button(atoms("bg-blue-500 text-white font-bold py-2 px-4 rounded")); diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.stderr b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.stderr new file mode 100644 index 00000000..8cd35f1c --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.stderr @@ -0,0 +1,11 @@ + x The shorthand access to the variable "$pageHeaderHeight" is not allowed in a nested expression. + | To be able to use the property turn it into a CSS variable by wrapping it in a function: + | + | ${() => $pageHeaderHeight}; + | + ,-[input.js:17:1] + 16 | ` : css` + 17 | margin-top: ${$pageHeaderHeight}px; + : ^^^^^^^^^^^^^^^^^ + 18 | `}; + `---- diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.stderr b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.stderr new file mode 100644 index 00000000..8cd35f1c --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.stderr @@ -0,0 +1,11 @@ + x The shorthand access to the variable "$pageHeaderHeight" is not allowed in a nested expression. + | To be able to use the property turn it into a CSS variable by wrapping it in a function: + | + | ${() => $pageHeaderHeight}; + | + ,-[input.js:17:1] + 16 | ` : css` + 17 | margin-top: ${$pageHeaderHeight}px; + : ^^^^^^^^^^^^^^^^^ + 18 | `}; + `---- diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx new file mode 100644 index 00000000..554e6410 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/nested-dynamic-mixin/output.prod.tsx @@ -0,0 +1,25 @@ +import { styled, css, __yak_unitPostFix } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +// example taken from https://github.com/jantimon/next-yak/issues/208 +const spacing = "20px"; +const ContainerFluid = /*YAK Extracted CSS: +.ContainerFluid { + position: relative; + margin: 0 auto; + padding-top: 20px; + max-width: 100%; +} +.ContainerFluid__$isApp { + margin-top: unset; +} +.ContainerFluid__not_$isApp { + margin-top: px; +} +.ContainerFluid { + margin-top: var(--ym7uBBu); +} +*/ /*#__PURE__*/ styled.div(__styleYak.ContainerFluid, ({ $isApp, $pageHeaderHeight })=>$isApp ? /*#__PURE__*/ css(__styleYak.ContainerFluid__$isApp) : /*#__PURE__*/ css(__styleYak.ContainerFluid__not_$isApp), { + "style": { + "--ym7uBBu": __yak_unitPostFix(({ $pageHeaderHeight })=>$pageHeaderHeight, "px") + } +}); diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.prod.tsx new file mode 100644 index 00000000..d6806085 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/nested-selectors/output.prod.tsx @@ -0,0 +1,32 @@ +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const Card = /*YAK Extracted CSS: +.Card { + background-color: #fff; + border-radius: 8px; + padding: 20px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + h2 { + color: #333; + font-size: 24px; + margin-bottom: 10px; + } + p { + color: #666; + font-size: 16px; + line-height: 1.5; + } + .card-footer { + margin-top: 20px; + text-align: right; + button { + padding: 8px 16px; + background-color: #28a745; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + } + } +} +*/ /*#__PURE__*/ styled.div(__styleYak.Card); diff --git a/packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.prod.tsx new file mode 100644 index 00000000..51bf3dae --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/no-yak-usage/output.prod.tsx @@ -0,0 +1,3 @@ +// Should not add an import to the .css module as no css has been extracted +import { styled } from "next-yak/internal"; +export const isYak = typeof styled === "function"; diff --git a/packages/yak-swc/yak_swc/tests/fixture/no-yak/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/no-yak/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/no-yak/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/no-yak/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/no-yak/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/no-yak/output.prod.tsx new file mode 100644 index 00000000..99e190c7 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/no-yak/output.prod.tsx @@ -0,0 +1,6 @@ +// @ts-ignore +import styled from "styled-components"; +// Should not be transformed as it is NOT yak +export const StyledComponent = styled.button` + color: red; +`; diff --git a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx new file mode 100644 index 00000000..20a5fa16 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/props-and-dynamic-styles/output.prod.tsx @@ -0,0 +1,29 @@ +import { styled, css, __yak_unitPostFix } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +export const FlexContainer = /*YAK Extracted CSS: +.FlexContainer { + display: flex; + align-items: var(--ym7uBBu); + flex-direction: var(--ym7uBBu1); + justify-content: var(--ym7uBBu2); + padding: 20px; + margin-bottom: var(--ym7uBBu3); + top: var(--ym7uBBu4); + background-color: #f0f0f0; +} +.FlexContainer__ { + bottom: var(--ym7uBBu5); +} +*/ /*#__PURE__*/ styled.div(__styleYak.FlexContainer, ({ $bottom })=>/*#__PURE__*/ css(__styleYak.FlexContainer__, { + "style": { + "--ym7uBBu5": __yak_unitPostFix($bottom * 20, "%") + } + }), { + "style": { + "--ym7uBBu": ({ $align })=>$align || 'stretch', + "--ym7uBBu1": ({ $direction })=>$direction || 'row', + "--ym7uBBu2": ({ $justify })=>$justify || 'flex-start', + "--ym7uBBu3": __yak_unitPostFix(({ $marginBottom })=>$marginBottom || '0', "px"), + "--ym7uBBu4": __yak_unitPostFix(({ $top })=>$top * 20, "%") + } +}); diff --git a/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.prod.tsx new file mode 100644 index 00000000..f03c6889 --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/styled-componets/output.prod.tsx @@ -0,0 +1,15 @@ +// @ts-ignore +import styled from "styled-components"; +import { styled as styledYak } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const textColor = "red"; +// Should be transformed as it is yak +export const CustomThemedButton = /*YAK Extracted CSS: +.CustomThemedButton { + color: blue; +} +*/ /*#__PURE__*/ styledYak.button(__styleYak.CustomThemedButton); +// Should not be transformed as it is NOT yak +export const StyledComponent = styled.button` + color: ${textColor}; +`; diff --git a/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.tsx b/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.dev.tsx similarity index 100% rename from packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.tsx rename to packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.dev.tsx diff --git a/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.prod.tsx b/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.prod.tsx new file mode 100644 index 00000000..fa9d745c --- /dev/null +++ b/packages/yak-swc/yak_swc/tests/fixture/theming-with-context/output.prod.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { styled } from "next-yak/internal"; +import __styleYak from "./input.yak.module.css!=!./input?./input.yak.module.css"; +const ThemedComponent = /*YAK Extracted CSS: +.ThemedComponent { + background-color: var(--ym7uBBu); + color: var(--ym7uBBu1); + padding: 20px; + border-radius: 8px; +} +*/ /*#__PURE__*/ styled.div(__styleYak.ThemedComponent, { + "style": { + "--ym7uBBu": (props)=>props.theme.background, + "--ym7uBBu1": (props)=>props.theme.text + } +});