us cssmodules-pure-no-check

DigitecGalaxus · Dec 12, 2024 · 7ffa69b · 7ffa69b
1 parent 76ad638
commit 7ffa69b
Show file tree

Hide file tree

Showing 83 changed files with 71 additions and 246 deletions.
diff --git a/package.json b/package.json
@@ -25,13 +25,16 @@
   "pnpm": {
     "overrides": {
       "yak-swc": "workspace:*"
+    },
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]"
     }
   },
   "packageManager": "[email protected]",
   "author": "Jan Nicklas",
   "license": "MIT",
   "devDependencies": {
-    "prettier": "^3.0.3",
-    "@changesets/cli": "^2.27.9"
+    "@changesets/cli": "^2.27.9",
+    "prettier": "^3.0.3"
   }
 }
diff --git a/packages/cross-file-tests/__tests__/fixtures/constant/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/constant/output/index.tsx
@@ -2,15 +2,13 @@ import { styled, css } from "next-yak/internal";
 import { colors, negative, siteMaxWidth } from "./constants";
 import "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
-// 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);
 }
-// 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);

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
@@ -1,12 +1,11 @@
-/* cssmodules-pure-ignore * /
+/* cssmodules-pure-no-check * /
 :global(.Button_wIxfWW) {
   color: red;
   height: 10px;
   color: var(--color-primary);
   background-color: var(--color-secondary);
   z-index: -1;
 }
-/* cssmodules-pure-ignore * /
 :global(.Button___wIxfWW) {
   color: var(--color-secondary);
   background-color: var(--color-primary);

diff --git a/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/namespaceConstant/output/index.tsx
@@ -2,7 +2,6 @@ import { styled } from "next-yak/internal";
 import { colors } from "./constants";
 import "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
-// 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);

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
@@ -1,4 +1,4 @@
-/* cssmodules-pure-ignore * /
+/* cssmodules-pure-no-check * /
 :global(.Button_bAtfrp) {
   color: var(--color-primary);
   background-color: var(--color-secondary);

diff --git a/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.tsx b/packages/cross-file-tests/__tests__/fixtures/nestedMixin/output/icon.tsx
@@ -1,7 +1,6 @@
 import { styled } from "next-yak/internal";
 import "./icon.yak.module.css!=!./icon?./icon.yak.module.css";
 export var Icon = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.Icon_je4Wtv) {
   display: inline-block;
   width: 20px;

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
@@ -1,4 +1,4 @@
-/* cssmodules-pure-ignore * /
+/* cssmodules-pure-no-check * /
 :global(.Icon_je4Wtv) {
   display: inline-block;
   width: 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
@@ -3,13 +3,11 @@ import { buttonMixin } from './mixin';
 import { primaryButtonMixin } from './helper/anotherMixin';
 import "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.Button_oPtJMe) {
   --yak-css-import: url("./mixin:buttonMixin",mixin);
 }
 */ /*#__PURE__*/ styled.button("Button_oPtJMe");
 export var PrimaryButton = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.PrimaryButton_oPtJMe) {
   --yak-css-import: url("./helper/anotherMixin:primaryButtonMixin",mixin);
 }

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
@@ -1,12 +1,11 @@
-/* cssmodules-pure-ignore * /
+/* cssmodules-pure-no-check * /
 :global(.Button_oPtJMe) {
   color: black;
 :global(.icon_Icon__vdEsc) {
   color: black;
 }
 
 }
-/* cssmodules-pure-ignore * /
 :global(.PrimaryButton_oPtJMe) {
   color: black;
 :global(.icon_Icon__vdEsc) {

diff --git a/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/sameFileMixin/output/index.tsx
@@ -5,19 +5,15 @@ var buttonTextMixin = /*#__PURE__*/ css(function(param) {
     return $disabled && /*#__PURE__*/ css("buttonTextMixin__$disabled_xEUJ1U");
 });
 var Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.Button_xEUJ1U) {
   color: black;
 }
-// cssmodules-pure-ignore
 :global(.Button__$disabled_xEUJ1U) {
   opacity: 0.5;
 }
-// cssmodules-pure-ignore
 :global(.Button__$hasIcon_xEUJ1U) {
   padding-left: 30px;
 }
-// cssmodules-pure-ignore
 :global(.Button__$disabled_xEUJ1U-01) {
   color: gray;
 }

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
@@ -1,16 +1,13 @@
-/* cssmodules-pure-ignore * /
+/* cssmodules-pure-no-check * /
 :global(.Button_xEUJ1U) {
   color: black;
 }
-/* cssmodules-pure-ignore * /
 :global(.Button__$disabled_xEUJ1U) {
   opacity: 0.5;
 }
-/* cssmodules-pure-ignore * /
 :global(.Button__$hasIcon_xEUJ1U) {
   padding-left: 30px;
 }
-/* cssmodules-pure-ignore * /
 :global(.Button__$disabled_xEUJ1U-01) {
   color: gray;
 }
diff --git a/packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/selector/output/index.tsx
@@ -2,7 +2,6 @@ import { styled } from "next-yak/internal";
 import { AnyIcon, Icon } from "./icon";
 import "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.Button_JKqlji) {
   --yak-css-import: url("./icon:Icon",selector) {
     margin-right: 10px;

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
@@ -1,4 +1,4 @@
-/* cssmodules-pure-ignore * /
+/* cssmodules-pure-no-check * /
 :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
@@ -2,7 +2,6 @@ import { styled } from "next-yak/internal";
 import { lastChildMixin } from './mixin';
 import "./index.yak.module.css!=!./index?./index.yak.module.css";
 var ListItem = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.ListItem_PZqRtI) {
   margin-bottom: 10px;
   &:hover {

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
@@ -1,4 +1,4 @@
-/* cssmodules-pure-ignore * /
+/* cssmodules-pure-no-check * /
 :global(.ListItem_PZqRtI) {
   margin-bottom: 10px;
   &:hover {

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
@@ -2,7 +2,6 @@ import { styled } from "next-yak/internal";
 import { siteMaxWidth } from "./constants.yak";
 import "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.Button_Mx2s9f) {
   color: red;
   height: --yak-css-import: url("./constants.yak:siteMaxWidth",mixin)px;

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
@@ -1,4 +1,4 @@
-/* cssmodules-pure-ignore * /
+/* cssmodules-pure-no-check * /
 :global(.Button_Mx2s9f) {
   color: red;
   height: 10px;

diff --git a/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.tsx b/packages/cross-file-tests/__tests__/fixtures/yakFileMixin/output/index.tsx
@@ -2,14 +2,12 @@ import { styled } from "next-yak/internal";
 import { typography } from "./typography.yak";
 import "./index.yak.module.css!=!./index?./index.yak.module.css";
 export var Headline = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.Headline_mxjUbw) {
   color: red;
   --yak-css-import: url("./typography.yak:typography:h1",mixin);
 }
 */ /*#__PURE__*/ styled.button("Headline_mxjUbw");
 export var Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.Button_mxjUbw) {
   color: red;
   --yak-css-import: url("./typography.yak:typography:h3",mixin);

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
@@ -1,4 +1,4 @@
-/* cssmodules-pure-ignore * /
+/* cssmodules-pure-no-check * /
 :global(.Headline_mxjUbw) {
   color: red;
 
@@ -9,7 +9,6 @@
         letter-spacing: 0.00938em;
 
 }
-/* cssmodules-pure-ignore * /
 :global(.Button_mxjUbw) {
   color: red;
 

diff --git a/packages/next-yak/loaders/css-loader.ts b/packages/next-yak/loaders/css-loader.ts
@@ -43,11 +43,10 @@ function extractCss(code: string): string {
     const codeUntilEnd = codeParts[i].split("*/")[0];
     result += codeUntilEnd;
   }
-  // postcss can't handle // comments
-  result = result.replace(
-    /\/\/ cssmodules-pure-ignore/g,
-    "/* cssmodules-pure-ignore */",
-  );
+  if (result) {
+    result = "/* cssmodules-pure-no-check */\n" + result;
+  }
+
   return result;
 }
 

diff --git a/packages/yak-swc/yak_swc/src/yak_transforms.rs b/packages/yak-swc/yak_swc/src/yak_transforms.rs
@@ -87,7 +87,7 @@ impl YakTransform for TransformNestedCss {
     let mut parser_state = previous_parser_state.clone().unwrap();
     // The first scope is the class name which gets attached to the element
     parser_state.current_scopes[0] = CssScope {
-      name: format!("// cssmodules-pure-ignore\n:global(.{})", css_identifier),
+      name: format!(":global(.{})", css_identifier),
       scope_type: ScopeType::Selector,
     };
     parser_state
@@ -174,7 +174,7 @@ impl YakTransform for TransformCssMixin {
       naming_convention.get_css_class_name(&declaration_name.to_readable_string());
     self.class_name = Some(css_identifier.clone());
     parser_state.current_scopes = vec![CssScope {
-      name: format!("// cssmodules-pure-ignore\n:global(.{})", css_identifier),
+      name: format!(":global(.{})", css_identifier),
       scope_type: ScopeType::AtRule,
     }];
     parser_state
@@ -294,7 +294,7 @@ impl YakTransform for TransformStyled {
     self.class_name = Some(css_identifier.clone());
     let mut parser_state = ParserState::new();
     parser_state.current_scopes = vec![CssScope {
-      name: format!("// cssmodules-pure-ignore\n:global(.{})", css_identifier),
+      name: format!(":global(.{})", css_identifier),
       scope_type: ScopeType::AtRule,
     }];
     parser_state
@@ -381,10 +381,7 @@ impl YakTransform for TransformKeyframes {
     };
     let mut parser_state = ParserState::new();
     parser_state.current_scopes = vec![CssScope {
-      name: format!(
-        "// cssmodules-pure-ignore\n@keyframes :global({})",
-        css_identifier
-      ),
+      name: format!("@keyframes :global({})", css_identifier),
       scope_type: ScopeType::AtRule,
     }];
     parser_state

diff --git a/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/attrs/output.dev.tsx
@@ -1,7 +1,6 @@
 import { styled } from "next-yak/internal";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
 export const Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.Button_m7uBBu) {
   background-color: #007bff;
   color: #fff;

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
@@ -1,7 +1,6 @@
 import { styled } from "next-yak/internal";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
 export const Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.ym7uBBu) {
   background-color: #007bff;
   color: #fff;

diff --git a/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/basic-styled-component/output.dev.tsx
@@ -1,7 +1,6 @@
 import { styled } from "next-yak/internal";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
 export const Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.Button_m7uBBu) {
   background-color: #007bff;
   color: #fff;

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
@@ -1,7 +1,6 @@
 import { styled } from "next-yak/internal";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
 export const Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.ym7uBBu) {
   background-color: #007bff;
   color: #fff;

diff --git a/packages/yak-swc/yak_swc/tests/fixture/comments/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/comments/output.dev.tsx
@@ -2,7 +2,6 @@ import { styled } from "next-yak/internal";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
 const primary = "green";
 export const Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.Button_m7uBBu) {
   color: green;
   background: red;

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
@@ -2,7 +2,6 @@ import { styled } from "next-yak/internal";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
 const primary = "green";
 export const Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.ym7uBBu) {
   color: green;
   background: red;

diff --git a/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/complex-nested-structure/output.dev.tsx
@@ -1,7 +1,6 @@
 import { styled } from "next-yak/internal";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
 export const ArticleCard = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.ArticleCard_m7uBBu) {
   background-color: #fff;
   border-radius: 8px;

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
@@ -1,7 +1,6 @@
 import { styled } from "next-yak/internal";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
 export const ArticleCard = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.ym7uBBu) {
   background-color: #fff;
   border-radius: 8px;

diff --git a/packages/yak-swc/yak_swc/tests/fixture/constants/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/constants/output.dev.tsx
@@ -13,7 +13,6 @@ const colors = {
 const borderRadius = "4px";
 const stacking = 1;
 export const Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.Button_m7uBBu) {
   background-color: #007bff;
   color: #f8f9fa;

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
@@ -13,7 +13,6 @@ const colors = {
 const borderRadius = "4px";
 const stacking = 1;
 export const Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.ym7uBBu) {
   background-color: #007bff;
   color: #f8f9fa;

diff --git a/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.dev.tsx b/packages/yak-swc/yak_swc/tests/fixture/cross-file-constants/output.dev.tsx
@@ -7,7 +7,6 @@ import { fonts } from "./fontDefinitions";
 import { sizes } from "./sizeDefinitions";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
 export const Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.Button_m7uBBu) {
   font-size: --yak-css-import: url("./fontDefinitions:fonts:sm",mixin);
   color: --yak-css-import: url("./colorDefinitions:colors:dark:primary",mixin);

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
@@ -7,7 +7,6 @@ import { fonts } from "./fontDefinitions";
 import { sizes } from "./sizeDefinitions";
 import "./input.yak.module.css!=!./input?./input.yak.module.css";
 export const Button = /*YAK Extracted CSS:
-// cssmodules-pure-ignore
 :global(.ym7uBBu) {
   font-size: --yak-css-import: url("./fontDefinitions:fonts:sm",mixin);
   color: --yak-css-import: url("./colorDefinitions:colors:dark:primary",mixin);