diff --git a/packages/cross-file-tests/__tests__/fixtures/constant/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/constant/output/index.tsx index d6ef876c..2e28c221 100644 --- a/packages/cross-file-tests/__tests__/fixtures/constant/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/constant/output/index.tsx @@ -1,19 +1,21 @@ import { styled, css } from "next-yak/internal"; import { colors, negative, siteMaxWidth } from "./constants"; -import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; +import "./index.yak.module.css!=!./index?./index.yak.module.css"; export var Button = /*YAK Extracted CSS: -.Button { +// cssmodules-pure-ignore +:global(.Button_wIxfWW) { color: red; height: --yak-css-import: url("./constants:siteMaxWidth",mixin)px; color: --yak-css-import: url("./constants:colors:primary",mixin); background-color: --yak-css-import: url("./constants:colors:secondary",mixin); z-index: --yak-css-import: url("./constants:negative",mixin); } -.Button__ { +// cssmodules-pure-ignore +:global(.Button___wIxfWW) { color: --yak-css-import: url("./constants:colors:secondary",mixin); background-color: --yak-css-import: url("./constants:colors:primary",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Button, function(param) { +*/ /*#__PURE__*/ styled.button("Button_wIxfWW", function(param) { var $variant = param.$variant; - return $variant === "secondary" && /*#__PURE__*/ css(__styleYak.Button__); + return $variant === "secondary" && /*#__PURE__*/ css("Button___wIxfWW"); }); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/constant/output/index.yak.module.css b/packages/cross-file-tests/__tests__/fixtures/constant/output/index.yak.module.css index a6f732d3..06196d55 100644 --- a/packages/cross-file-tests/__tests__/fixtures/constant/output/index.yak.module.css +++ b/packages/cross-file-tests/__tests__/fixtures/constant/output/index.yak.module.css @@ -1,11 +1,13 @@ -.Button { +// cssmodules-pure-ignore +:global(.Button_wIxfWW) { color: red; height: 10px; color: var(--color-primary); background-color: var(--color-secondary); z-index: -1; } -.Button__ { +// cssmodules-pure-ignore +:global(.Button___wIxfWW) { color: var(--color-secondary); background-color: var(--color-primary); } \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.tsx index b39e5a0a..9cca03e6 100644 --- a/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.tsx @@ -1,9 +1,10 @@ import { styled } from "next-yak/internal"; import { colors } from "./constants"; -import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; +import "./index.yak.module.css!=!./index?./index.yak.module.css"; export var Button = /*YAK Extracted CSS: -.Button { +// cssmodules-pure-ignore +:global(.Button_bAtfrp) { color: --yak-css-import: url("./constants:colors:primary",mixin); background-color: --yak-css-import: url("./constants:colors:secondary",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); \ No newline at end of file +*/ /*#__PURE__*/ styled.button("Button_bAtfrp"); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.yak.module.css b/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.yak.module.css index 887b3307..ffaa3e18 100644 --- a/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.yak.module.css +++ b/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.yak.module.css @@ -1,4 +1,5 @@ -.Button { +// cssmodules-pure-ignore +:global(.Button_bAtfrp) { color: var(--color-primary); background-color: var(--color-secondary); } \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.tsx b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.tsx index 43d5b3ea..f23176f5 100644 --- a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.tsx @@ -1,9 +1,10 @@ import { styled } from "next-yak/internal"; -import __styleYak from "./icon.yak.module.css!=!./icon?./icon.yak.module.css"; +import "./icon.yak.module.css!=!./icon?./icon.yak.module.css"; export var Icon = /*YAK Extracted CSS: -.Icon { +// cssmodules-pure-ignore +:global(.Icon_je4Wtv) { display: inline-block; width: 20px; height: 20px; } -*/ /*#__PURE__*/ styled.span(__styleYak.Icon); \ No newline at end of file +*/ /*#__PURE__*/ styled.span("Icon_je4Wtv"); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.yak.module.css b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.yak.module.css index 83398df7..eaae21cb 100644 --- a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.yak.module.css +++ b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.yak.module.css @@ -1,4 +1,5 @@ -.Icon { +// cssmodules-pure-ignore +:global(.Icon_je4Wtv) { display: inline-block; width: 20px; height: 20px; diff --git a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.tsx index d39f4328..9ffbf8a2 100644 --- a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.tsx @@ -1,14 +1,16 @@ import { styled } from "next-yak/internal"; import { buttonMixin } from './mixin'; import { primaryButtonMixin } from './helper/anotherMixin'; -import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; +import "./index.yak.module.css!=!./index?./index.yak.module.css"; export var Button = /*YAK Extracted CSS: -.Button { +// cssmodules-pure-ignore +:global(.Button_oPtJMe) { --yak-css-import: url("./mixin:buttonMixin",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); +*/ /*#__PURE__*/ styled.button("Button_oPtJMe"); export var PrimaryButton = /*YAK Extracted CSS: -.PrimaryButton { +// cssmodules-pure-ignore +:global(.PrimaryButton_oPtJMe) { --yak-css-import: url("./helper/anotherMixin:primaryButtonMixin",mixin); } -*/ /*#__PURE__*/ styled(Button)(__styleYak.PrimaryButton); \ No newline at end of file +*/ /*#__PURE__*/ styled(Button)("PrimaryButton_oPtJMe"); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.yak.module.css b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.yak.module.css index 86c40e60..858f2c2d 100644 --- a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.yak.module.css +++ b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/index.yak.module.css @@ -1,11 +1,13 @@ -.Button { +// cssmodules-pure-ignore +:global(.Button_oPtJMe) { color: black; :global(.icon_Icon__vdEsc) { color: black; } } -.PrimaryButton { +// cssmodules-pure-ignore +:global(.PrimaryButton_oPtJMe) { color: black; :global(.icon_Icon__vdEsc) { color: black; diff --git a/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.tsx index 34cc625a..2d8ee081 100644 --- a/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.tsx @@ -1,30 +1,34 @@ import { styled, css } from "next-yak/internal"; -import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; +import "./index.yak.module.css!=!./index?./index.yak.module.css"; var buttonTextMixin = /*#__PURE__*/ css(function(param) { var $disabled = param.$disabled; - return $disabled && /*#__PURE__*/ css(__styleYak.buttonTextMixin__$disabled); + return $disabled && /*#__PURE__*/ css("buttonTextMixin__$disabled_xEUJ1U"); }); var Button = /*YAK Extracted CSS: -.Button { +// cssmodules-pure-ignore +:global(.Button_xEUJ1U) { color: black; } -.Button__$disabled { +// cssmodules-pure-ignore +:global(.Button__$disabled_xEUJ1U) { opacity: 0.5; } -.Button__$hasIcon { +// cssmodules-pure-ignore +:global(.Button__$hasIcon_xEUJ1U) { padding-left: 30px; } -.Button__$disabled-01 { +// cssmodules-pure-ignore +:global(.Button__$disabled_xEUJ1U-01) { color: gray; } -*/ /*#__PURE__*/ styled.button(__styleYak.Button, function(param) { +*/ /*#__PURE__*/ styled.button("Button_xEUJ1U", function(param) { var $disabled = param.$disabled; - return $disabled && /*#__PURE__*/ css(__styleYak.Button__$disabled); + return $disabled && /*#__PURE__*/ css("Button__$disabled_xEUJ1U"); }, function(param) { var $hasIcon = param.$hasIcon; - return $hasIcon && /*#__PURE__*/ css(__styleYak.Button__$hasIcon); + return $hasIcon && /*#__PURE__*/ css("Button__$hasIcon_xEUJ1U"); }, function(param) { var $disabled = param.$disabled; - return $disabled && /*#__PURE__*/ css(__styleYak["Button__$disabled-01"]); + return $disabled && /*#__PURE__*/ css("Button__$disabled_xEUJ1U-01"); }); export default Button; \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.yak.module.css b/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.yak.module.css index a8cf7afd..6a322911 100644 --- a/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.yak.module.css +++ b/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.yak.module.css @@ -1,12 +1,16 @@ -.Button { +// cssmodules-pure-ignore +:global(.Button_xEUJ1U) { color: black; } -.Button__$disabled { +// cssmodules-pure-ignore +:global(.Button__$disabled_xEUJ1U) { opacity: 0.5; } -.Button__$hasIcon { +// cssmodules-pure-ignore +:global(.Button__$hasIcon_xEUJ1U) { padding-left: 30px; } -.Button__$disabled-01 { +// cssmodules-pure-ignore +:global(.Button__$disabled_xEUJ1U-01) { color: gray; } \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/selector/output/icon.tsx b/packages/cross-file-tests/__tests__/fixtures/selector/output/icon.tsx index 6e4a70a6..e4c30978 100644 --- a/packages/cross-file-tests/__tests__/fixtures/selector/output/icon.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/selector/output/icon.tsx @@ -1,4 +1,4 @@ import { styled } from "next-yak/internal"; -import __styleYak from "./icon.yak.module.css!=!./icon?./icon.yak.module.css"; +import "./icon.yak.module.css!=!./icon?./icon.yak.module.css"; export var Icon = /*#__PURE__*/ styled.svg(); export var AnyIcon = /*#__PURE__*/ styled.svg(); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx index 7efb25d5..8d908238 100644 --- a/packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx @@ -1,8 +1,9 @@ import { styled } from "next-yak/internal"; import { AnyIcon, Icon } from "./icon"; -import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; +import "./index.yak.module.css!=!./index?./index.yak.module.css"; export var Button = /*YAK Extracted CSS: -.Button { +// cssmodules-pure-ignore +:global(.Button_JKqlji) { --yak-css-import: url("./icon:Icon",selector) { margin-right: 10px; } @@ -10,4 +11,4 @@ export var Button = /*YAK Extracted CSS: margin-right: 15px; } } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); \ No newline at end of file +*/ /*#__PURE__*/ styled.button("Button_JKqlji"); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/selector/output/index.yak.module.css b/packages/cross-file-tests/__tests__/fixtures/selector/output/index.yak.module.css index 819451f2..a451960d 100644 --- a/packages/cross-file-tests/__tests__/fixtures/selector/output/index.yak.module.css +++ b/packages/cross-file-tests/__tests__/fixtures/selector/output/index.yak.module.css @@ -1,4 +1,5 @@ -.Button { +// cssmodules-pure-ignore +:global(.Button_JKqlji) { :global(.icon_Icon___yEni) { margin-right: 10px; } diff --git a/packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.tsx index 17156f92..4546d2cf 100644 --- a/packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.tsx @@ -1,12 +1,13 @@ import { styled } from "next-yak/internal"; import { lastChildMixin } from './mixin'; -import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; +import "./index.yak.module.css!=!./index?./index.yak.module.css"; var ListItem = /*YAK Extracted CSS: -.ListItem { +// cssmodules-pure-ignore +:global(.ListItem_PZqRtI) { margin-bottom: 10px; &:hover { --yak-css-import: url("./mixin:lastChildMixin",mixin); } } -*/ /*#__PURE__*/ styled.li(__styleYak.ListItem); +*/ /*#__PURE__*/ styled.li("ListItem_PZqRtI"); export default ListItem; \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.yak.module.css b/packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.yak.module.css index a4df0e9d..7a43733a 100644 --- a/packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.yak.module.css +++ b/packages/cross-file-tests/__tests__/fixtures/staticMixin/output/index.yak.module.css @@ -1,4 +1,5 @@ -.ListItem { +// cssmodules-pure-ignore +:global(.ListItem_PZqRtI) { margin-bottom: 10px; &:hover { &:last-child { diff --git a/packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.tsx index 7b9b6fd7..e7adc5f0 100644 --- a/packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.tsx @@ -1,9 +1,10 @@ import { styled } from "next-yak/internal"; import { siteMaxWidth } from "./constants.yak"; -import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; +import "./index.yak.module.css!=!./index?./index.yak.module.css"; export var Button = /*YAK Extracted CSS: -.Button { +// cssmodules-pure-ignore +:global(.Button_Mx2s9f) { color: red; height: --yak-css-import: url("./constants.yak:siteMaxWidth",mixin)px; } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); \ No newline at end of file +*/ /*#__PURE__*/ styled.button("Button_Mx2s9f"); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.yak.module.css b/packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.yak.module.css index 17c34230..5a699070 100644 --- a/packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.yak.module.css +++ b/packages/cross-file-tests/__tests__/fixtures/yak-file/output/index.yak.module.css @@ -1,4 +1,5 @@ -.Button { +// cssmodules-pure-ignore +:global(.Button_Mx2s9f) { color: red; height: 10px; } \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.tsx index c7e7871d..813a8bf6 100644 --- a/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.tsx +++ b/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.tsx @@ -1,15 +1,17 @@ import { styled } from "next-yak/internal"; import { typography } from "./typography.yak"; -import __styleYak from "./index.yak.module.css!=!./index?./index.yak.module.css"; +import "./index.yak.module.css!=!./index?./index.yak.module.css"; export var Headline = /*YAK Extracted CSS: -.Headline { +// cssmodules-pure-ignore +:global(.Headline_mxjUbw) { color: red; --yak-css-import: url("./typography.yak:typography:h1",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Headline); +*/ /*#__PURE__*/ styled.button("Headline_mxjUbw"); export var Button = /*YAK Extracted CSS: -.Button { +// cssmodules-pure-ignore +:global(.Button_mxjUbw) { color: red; --yak-css-import: url("./typography.yak:typography:h3",mixin); } -*/ /*#__PURE__*/ styled.button(__styleYak.Button); \ No newline at end of file +*/ /*#__PURE__*/ styled.button("Button_mxjUbw"); \ No newline at end of file diff --git a/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.yak.module.css b/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.yak.module.css index 5ddbcbec..a736bf76 100644 --- a/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.yak.module.css +++ b/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.yak.module.css @@ -1,4 +1,5 @@ -.Headline { +// cssmodules-pure-ignore +:global(.Headline_mxjUbw) { color: red; font-family: "Roboto", sans-serif; @@ -8,7 +9,8 @@ letter-spacing: 0.00938em; } -.Button { +// cssmodules-pure-ignore +:global(.Button_mxjUbw) { color: red; font-family: "Roboto", sans-serif; diff --git a/packages/example/app/__tests__/__snapshots__/Clock.test.tsx.snap b/packages/example/app/__tests__/__snapshots__/Clock.test.tsx.snap index 17a606cc..9e66db6e 100644 --- a/packages/example/app/__tests__/__snapshots__/Clock.test.tsx.snap +++ b/packages/example/app/__tests__/__snapshots__/Clock.test.tsx.snap @@ -3,108 +3,108 @@ exports[`renders Clock component 1`] = `
12
1
2
3
4
5
6
7
8
9
10
11
diff --git a/packages/example/app/__tests__/__snapshots__/ClockHands.test.tsx.snap b/packages/example/app/__tests__/__snapshots__/ClockHands.test.tsx.snap index e8a84c6e..d6532d09 100644 --- a/packages/example/app/__tests__/__snapshots__/ClockHands.test.tsx.snap +++ b/packages/example/app/__tests__/__snapshots__/ClockHands.test.tsx.snap @@ -3,15 +3,15 @@ exports[`renders ClockHands component 1`] = `