publish 0.0.25

DigitecGalaxus · Jan 23, 2024 · c13e8dc · c13e8dc
1 parent 2fd2af7
commit c13e8dc
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/packages/next-yak/README.md b/packages/next-yak/README.md
@@ -235,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:

diff --git a/packages/next-yak/loaders/lib/getCssName.cjs b/packages/next-yak/loaders/lib/getCssName.cjs
@@ -105,7 +105,6 @@ const getStyledComponentName = (taggedTemplateExpressionPath) => {
  * @returns {string}
  */
 function getMemberExpressionName(node) {
-  console.log(node.object, node.property.type);
   if (
     !node.object ||
     !node.property ||

diff --git a/packages/next-yak/package.json b/packages/next-yak/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "type": "module",
   "types": "./dist/",
   "exports": {