next-yak 0.0.25 → 0.0.26

package/README.md

@@ -172,33 +172,6 @@ module.exports = {
 
 [Nesting Example (video)](https://github.com/jantimon/next-yak/assets/4113649/33eeeb13-b0cf-499f-a1d3-ba6f51cf4308)
 
-## Build Time Constants
-
-The downside of dynamic properties is that they require inline style attributes.  
-While this is not a problem for most cases, we can't use them for media queries.
-
-`next-yak` allows you to define build time constants which can be used in your styles:
-
-```jsx
-import { styled } from 'next-yak';
-import { breakpoints, spacings } from './constants.yak';
-
-const Container = styled.div`
-  padding: ${spacings.md};
-  ${breakpoints.md} {
-    padding: ${spacings.lg};
-  }
-`;
-```
-
-| Feature          | Code                                            | Yak Constant files                             |
-|----------------  |-----------------------------------------------  |----------------------------------------------  |
-| File Extension   | `.js`, `.jsx`, `.tsx`, etc.                     | `.yak.js`, `.yak.jsx`, `.yak.tsx`, etc.        |
-| Runs at          | Compile time (Bundler)                          | Runtime (Node or Browser)                      |
-| Side effects     | Allowed                                         | Forbidden                                      |
-| Yak Features     | All (`styled`, `css`, ...)                      | -                                              | 
-
-
 ## Motivation
 
 Most of the existing CSS-in-JS libraries are either slow or have a complex api. This project tries to find a middle ground between speed and api complexity.
@@ -262,6 +235,36 @@ const Button = styled.button`
 `;
 ```
 
+
+## Build Time Constants
+
+The downside of dynamic properties is that they require inline style attributes.  
+While this is not a problem for most cases, we can't use them for media queries.
+
+`next-yak` allows you to define build time constants which can be used in your styles:
+
+```jsx
+import { styled } from 'next-yak';
+import { breakpoints, spacings } from './constants.yak';
+
+const Container = styled.div`
+  padding: ${spacings.md};
+  ${breakpoints.md} {
+    padding: ${spacings.lg};
+  }
+`;
+```
+
+| Feature          | Code                                            | Yak Constant files                             |
+|:-----------------|:------------------------------------------------|:-----------------------------------------------|
+| File Extension   | `.js`, `.jsx`, `.tsx`, etc.                     | `.yak.js`, `.yak.jsx`, `.yak.tsx`, etc.        | 
+| Runs at          |  Runtime (Node or Browser)                      | Compile time (Bundler)                         |
+| Side effects     | ✅                                              | 🚫                                             |
+| Yak Features     | All (`styled`, `css`, ...)                      | 🚫                                             | 
+
+
+[Build time constants (video)](https://github.com/jantimon/next-yak/assets/4113649/6bdc44df-2996-40a3-9255-4b9ed0df464a)
+
 ## Todos:
 
 next-yak is currently in the development phase, with several todos that must be completed before it is ready for production:

package/dist/static/index.cjs

@@ -0,0 +1,2 @@
+"use strict";var e=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var m=(n,r)=>{for(var t in r)e(n,t,{get:r[t],enumerable:!0})},f=(n,r,t,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of a(r))!g.call(n,i)&&i!==t&&e(n,i,{get:()=>r[i],enumerable:!(s=p(r,i))||s.enumerable});return n};var y=n=>f(e({},"__esModule",{value:!0}),n);var c={};m(c,{mixin:()=>o});module.exports=y(c);var o={};m(o,{css:()=>b});var b=(n,...r)=>String.raw(n,...r.map(t=>typeof t=="number"||typeof t=="string"?t:"")).trim();0&&(module.exports={mixin});
+//# sourceMappingURL=index.cjs.map

package/dist/static/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../static/index.ts","../../static/staticCssLiteral.tsx"],"sourcesContent":["//\n// Utility function to be used inside .yak.ts or .yak.js\n// files to define static css mixings\n//\n//\nexport * as mixin from \"./staticCssLiteral.js\"","/**\n * A stub that allows us to use the `css()` (css literal function) inside of *.yak files.\n *\n * This is mainly used for tooling like stylelint and typechecking inside css of *.yak files.\n * It works similar to String.raw but filters out undefined, null and false values to allow for conditionals.\n *\n * @example\n * ```tsx\n * // inside of example.yak.ts\n * import { mixin } from \"next-yak/static\";\n *\n * const styles = mixin.css`\n *   .foo {\n *     color: red;\n *     ${data.isBar && css`\n *       background: blue;\n *     `}\n *   }\n * `\n * ```\n */\nexport const css = (\n  strings: TemplateStringsArray,\n  ...values: Array<string | number | boolean | null | undefined | Function>\n): string =>\n  String.raw(\n    strings,\n    ...values.map((value) =>\n      // filter out everything but strings and numbers\n      typeof value === \"number\" || typeof value === \"string\" ? value : \"\"\n    )\n  ).trim();\n"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,IAAA,eAAAC,EAAAH,GCAA,IAAAI,EAAA,GAAAC,EAAAD,EAAA,SAAAE,IAqBO,IAAMA,EAAM,CACjBC,KACGC,IAEH,OAAO,IACLD,EACA,GAAGC,EAAO,IAAKC,GAEb,OAAOA,GAAU,UAAY,OAAOA,GAAU,SAAWA,EAAQ,EACnE,CACF,EAAE,KAAK","names":["static_exports","__export","staticCssLiteral_exports","__toCommonJS","staticCssLiteral_exports","__export","css","strings","values","value"]}

package/dist/static/index.d.cts

@@ -0,0 +1,31 @@
+/**
+ * A stub that allows us to use the `css()` (css literal function) inside of *.yak files.
+ *
+ * This is mainly used for tooling like stylelint and typechecking inside css of *.yak files.
+ * It works similar to String.raw but filters out undefined, null and false values to allow for conditionals.
+ *
+ * @example
+ * ```tsx
+ * // inside of example.yak.ts
+ * import { mixin } from "next-yak/static";
+ *
+ * const styles = mixin.css`
+ *   .foo {
+ *     color: red;
+ *     ${data.isBar && css`
+ *       background: blue;
+ *     `}
+ *   }
+ * `
+ * ```
+ */
+declare const css: (strings: TemplateStringsArray, ...values: Array<string | number | boolean | null | undefined | Function>) => string;
+
+declare const staticCssLiteral_css: typeof css;
+declare namespace staticCssLiteral {
+  export {
+    staticCssLiteral_css as css,
+  };
+}
+
+export { staticCssLiteral as mixin };

package/dist/static/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A stub that allows us to use the `css()` (css literal function) inside of *.yak files.
+ *
+ * This is mainly used for tooling like stylelint and typechecking inside css of *.yak files.
+ * It works similar to String.raw but filters out undefined, null and false values to allow for conditionals.
+ *
+ * @example
+ * ```tsx
+ * // inside of example.yak.ts
+ * import { mixin } from "next-yak/static";
+ *
+ * const styles = mixin.css`
+ *   .foo {
+ *     color: red;
+ *     ${data.isBar && css`
+ *       background: blue;
+ *     `}
+ *   }
+ * `
+ * ```
+ */
+declare const css: (strings: TemplateStringsArray, ...values: Array<string | number | boolean | null | undefined | Function>) => string;
+
+declare const staticCssLiteral_css: typeof css;
+declare namespace staticCssLiteral {
+  export {
+    staticCssLiteral_css as css,
+  };
+}
+
+export { staticCssLiteral as mixin };

package/dist/static/index.js

@@ -0,0 +1,2 @@
+var e=Object.defineProperty;var o=(t,n)=>{for(var r in n)e(t,r,{get:n[r],enumerable:!0})};var i={};o(i,{css:()=>s});var s=(t,...n)=>String.raw(t,...n.map(r=>typeof r=="number"||typeof r=="string"?r:"")).trim();export{i as mixin};
+//# sourceMappingURL=index.js.map

package/dist/static/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../static/staticCssLiteral.tsx"],"sourcesContent":["/**\n * A stub that allows us to use the `css()` (css literal function) inside of *.yak files.\n *\n * This is mainly used for tooling like stylelint and typechecking inside css of *.yak files.\n * It works similar to String.raw but filters out undefined, null and false values to allow for conditionals.\n *\n * @example\n * ```tsx\n * // inside of example.yak.ts\n * import { mixin } from \"next-yak/static\";\n *\n * const styles = mixin.css`\n *   .foo {\n *     color: red;\n *     ${data.isBar && css`\n *       background: blue;\n *     `}\n *   }\n * `\n * ```\n */\nexport const css = (\n  strings: TemplateStringsArray,\n  ...values: Array<string | number | boolean | null | undefined | Function>\n): string =>\n  String.raw(\n    strings,\n    ...values.map((value) =>\n      // filter out everything but strings and numbers\n      typeof value === \"number\" || typeof value === \"string\" ? value : \"\"\n    )\n  ).trim();\n"],"mappings":"0FAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,SAAAE,IAqBO,IAAMA,EAAM,CACjBC,KACGC,IAEH,OAAO,IACLD,EACA,GAAGC,EAAO,IAAKC,GAEb,OAAOA,GAAU,UAAY,OAAOA,GAAU,SAAWA,EAAQ,EACnE,CACF,EAAE,KAAK","names":["staticCssLiteral_exports","__export","css","strings","values","value"]}

package/loaders/babel-yak-plugin.cjs

@@ -145,7 +145,7 @@ module.exports = function (babel, options) {
           throw new Error("filePath is undefined");
         }
         const fileName = basename(filePath).replace(/\.tsx?/, "");
-        // Import 'yacijs' styles and assign to '__styleYak'
+        // Import 'next-yak' styles and assign to '__styleYak'
         // use webpacks !=! syntax to pretend that the typescript file is actually a css-module
         path.insertAfter(
           t.importDeclaration(
@@ -170,6 +170,7 @@ module.exports = function (babel, options) {
             specifier.imported
           );
           const localSpecifier = specifier.local || importSpecifier;
+
           if (
             importSpecifier.name === "styled" ||
             importSpecifier.name === "css" ||
@@ -211,7 +212,7 @@ module.exports = function (babel, options) {
         replaceQuasiExpressionTokens(
           path.node.quasi,
           (name) => {
-            // Replace constatns from .yak files and
+            // Replace constants from .yak files and
             if (name in replaces) {
               return replaces[name];
             }
@@ -247,13 +248,15 @@ module.exports = function (babel, options) {
         const variableName =
           styledApi || expressionType === "keyframesLiteral"
             ? getStyledComponentName(path)
-            : expressionType === "cssLiteral" ?
-              getCssName(path)
+            : expressionType === "cssLiteral"
+            ? getCssName(path)
             : null;
 
         const identifier = localIdent(
           variableName || "_yak",
-          variableName && expressionType !== "cssLiteral" ? null : this.classNameCount++,
+          variableName && expressionType !== "cssLiteral"
+            ? null
+            : this.classNameCount++,
           expressionType === "keyframesLiteral" ? "animation" : "className"
         );
 
@@ -345,7 +348,8 @@ module.exports = function (babel, options) {
               if (quasiTypes[i].currentNestingScopes.length > 0) {
                 // inside a nested scope a foreign css literal must not be used
                 // as we can not forward the scope
-                const isReferenceToMixin = t.isIdentifier(expression) || t.isCallExpression(expression);
+                const isReferenceToMixin =
+                  t.isIdentifier(expression) || t.isCallExpression(expression);
                 if (isReferenceToMixin) {
                   throw new InvalidPositionError(
                     `Mixins are not allowed inside nested selectors`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "type": "module",
   "types": "./dist/",
   "exports": {
@@ -8,6 +8,10 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./static": {
+      "import": "./dist/static/index.js",
+      "require": "./dist/static/index.cjs"
+    },
     "./withYak": {
       "require": "./withYak/index.cjs"
     },
@@ -27,15 +31,19 @@
     }
   },
   "scripts": {
-    "prepublishOnly": "npm run build && npm run test",
+    "prepublishOnly": "npm run build && npm run test && npm run test:types:code && npm run test:types:test",
     "build": "pnpm run --filter . \"/^build:/\"",
     "build:runtime": "tsup runtime/index.ts --target es2022 --clean --external react --external next-yak/context --format cjs,esm --minify --sourcemap --out-dir dist",
     "build:runtime:types": "tsup runtime/index.ts --target es2022 --clean --external react --dts-only --format cjs,esm --minify --sourcemap --out-dir dist",
+    "build:static": "tsup static/index.ts --target es2022 --clean --external react --external next-yak/context --format cjs,esm --minify --sourcemap --out-dir dist/static",
+    "build:static:types": "tsup static/index.ts --target es2022 --clean --external react --dts-only --format cjs,esm --minify --sourcemap --out-dir dist/static",
     "build:baseContext": "tsup runtime/context/baseContext.tsx --target es2022 --external react --dts --format cjs,esm --sourcemap --out-dir dist/context/",
     "build:context:client": "tsup runtime/context/index.tsx --target es2022 --external react --external next-yak/context/baseContext --dts --format cjs,esm --sourcemap --out-dir dist/context/",
     "build:context:server": "tsup runtime/context/index.server.tsx --target es2022 --external react --external next-yak/context/baseContext --external ./index.js --format cjs,esm --sourcemap --out-dir dist/context/",
     "build:withYak": "tsup withYak/index.ts --target es2022 --dts --format cjs --sourcemap --out-dir withYak --external ../loaders/tsloader.cjs --external ../loaders/cssloader.cjs",
-    "test": "vitest run && tsc -p tsconfig.json && tsc -p ./runtime/__tests__/tsconfig.json",
+    "test": "vitest run",
+    "test:types:code": "tsc -p tsconfig.json",
+    "test:types:test": "tsc -p ./runtime/__tests__/tsconfig.json",
     "test:watch": "vitest --watch"
   },
   "dependencies": {