next-yak 0.0.1 → 0.0.2

package/README.md

@@ -56,9 +56,9 @@ Therefore you have to create a `postcss.config.js` file in your project root:
 // postcss.config.js
 module.exports = {
   plugins: {
-    'postcss-nested':{},
-	}
-}
+    'postcss-nested': {},
+  }
+};
 ```
 
 ## Example
@@ -82,13 +82,13 @@ const App = () => (
 
 ## Performance Gains
 
-[![CSS Extract](https://raw.githubusercontent.com/jantimon/yacijs/main/css-extract.gif)](https://raw.githubusercontent.com/jantimon/yacijs/main/css-extract.gif)
+[![CSS Extract](https://raw.githubusercontent.com/jantimon/next-yak/main/css-extract.gif)](https://raw.githubusercontent.com/jantimon/next-yak/main/css-extract.gif)
 
 ## How it works
 
 next-yak converts css-in-js into css modules. This allows to use the full power of postcss and its plugins. It also allows to use the same optimizations for css files and css-in-js.
 
-[![Compile Flow](https://raw.githubusercontent.com/jantimon/yacijs/main/compile-flow.webp)](https://raw.githubusercontent.com/jantimon/yacijs/main/compile-flow.webp)
+[![Compile Flow](https://raw.githubusercontent.com/jantimon/next-yak/main/compile-flow.webp)](https://raw.githubusercontent.com/jantimon/next-yak/main/compile-flow.webp)
 
 
 ### Atomic CSS

package/dist/atoms.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Allows to use atomic CSS classes in a styled or css block
+ *
+ * @usage
+ *
+ * ```tsx
+ * import { styled, atoms } from "next-yak";
+ *
+ * const Button = styled.button<{ $primary?: boolean }>`
+ *  ${atoms("text-teal-600", "text-base", "rounded-md")}
+ *  ${props => props.$primary && atoms("shadow-md")}
+ * `;
+ * ```
+ */
+export declare const atoms: (...atoms: string[]) => () => {
+    className: string;
+};
+//# sourceMappingURL=atoms.d.ts.map

package/dist/atoms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.d.ts","sourceRoot":"","sources":["../runtime/atoms.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,KAAK,aAAc,MAAM,EAAE;;CAGvC,CAAC"}

package/dist/atoms.js

@@ -0,0 +1,19 @@
+/**
+ * Allows to use atomic CSS classes in a styled or css block
+ *
+ * @usage
+ *
+ * ```tsx
+ * import { styled, atoms } from "next-yak";
+ *
+ * const Button = styled.button<{ $primary?: boolean }>`
+ *  ${atoms("text-teal-600", "text-base", "rounded-md")}
+ *  ${props => props.$primary && atoms("shadow-md")}
+ * `;
+ * ```
+ */
+export const atoms = (...atoms) => {
+    const className = atoms.join(" ");
+    return () => ({ className });
+};
+//# sourceMappingURL=atoms.js.map

package/dist/atoms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.js","sourceRoot":"","sources":["../runtime/atoms.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,GAAG,KAAe,EAAE,EAAE;IACxC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClC,OAAO,GAAG,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;AACjC,CAAC,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { css } from "./cssLiteral";
-export * from "./styled";
+export { styled } from "./styled";
+export { atoms } from "./atoms";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../runtime/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,cAAc,CAAC;AACjC,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../runtime/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,3 +1,4 @@
 export { css } from "./cssLiteral";
-export * from "./styled";
+export { styled } from "./styled";
+export { atoms } from "./atoms";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../runtime/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,cAAc,CAAC;AACjC,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../runtime/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "exports": {
     ".": "./dist/index.js",

package/runtime/atoms.tsx

@@ -0,0 +1,18 @@
+/**
+ * Allows to use atomic CSS classes in a styled or css block
+ * 
+ * @usage
+ * 
+ * ```tsx
+ * import { styled, atoms } from "next-yak";
+ * 
+ * const Button = styled.button<{ $primary?: boolean }>`
+ *  ${atoms("text-teal-600", "text-base", "rounded-md")}
+ *  ${props => props.$primary && atoms("shadow-md")}
+ * `;
+ * ```
+ */
+export const atoms = (...atoms: string[]) => {
+    const className = atoms.join(" ");
+    return () => ({ className });
+};

package/runtime/index.ts

@@ -1,2 +1,3 @@
-export {css} from "./cssLiteral";
-export * from "./styled";
+export { css } from "./cssLiteral";
+export { styled } from "./styled";
+export { atoms } from "./atoms";