tailwind-to-style 2.3.2 → 2.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Bigetion
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,6 +1,10 @@
-
 # tailwind-to-style
 
+[![npm version](https://img.shields.io/npm/v/tailwind-to-style.svg)](https://www.npmjs.com/package/tailwind-to-style)
+[![Build Status](https://github.com/Bigetion/tailwind-to-style/workflows/CI%2FCD/badge.svg)](https://github.com/Bigetion/tailwind-to-style/actions)
+[![npm downloads](https://img.shields.io/npm/dm/tailwind-to-style.svg)](https://www.npmjs.com/package/tailwind-to-style)
+[![license](https://img.shields.io/npm/l/tailwind-to-style.svg)](https://github.com/Bigetion/tailwind-to-style/blob/main/LICENSE)
+
 `tailwind-to-style` is a JavaScript library designed to convert Tailwind CSS utility classes into inline styles or JavaScript objects. This is especially useful when you need to dynamically apply styles to elements in frameworks like React, where inline styles or style objects are frequently used.
 
 The library exposes two main functions:
@@ -71,7 +75,7 @@ This will apply the Tailwind classes directly as inline styles in the React comp
 
 ### 2. `twsx`
 
-`twsx` is an advanced function that builds on `tws` by allowing you to define **nested styles** and more complex CSS structures. It supports **grouping**, **responsive variants**, **state variants**, and **dynamic utilities**, making it ideal for more advanced styling needs.
+`twsx` is an advanced function that builds on `tws` by allowing you to define **nested styles** and more complex CSS structures. It supports **grouping**, **responsive variants**, **state variants**, **dynamic utilities**, and **direct CSS properties** via the `@css` directive, making it ideal for more advanced styling needs.
 
 #### Features of `twsx`:
 - Allows **nested styles** similar to SCSS, enabling more complex CSS structures.
@@ -79,6 +83,7 @@ This will apply the Tailwind classes directly as inline styles in the React comp
 - Fully supports **responsive variants** (`sm`, `md`, `lg`, etc.).
 - Handles **state variants** like `hover`, `focus`, and more.
 - Supports **dynamic utilities** such as `w-[300px]`, `bg-[rgba(0,0,0,0.5)]`.
+- **@css directive**: Apply custom CSS properties directly for more complex styles like transitions and animations.
 
 #### Usage
 
@@ -227,9 +232,123 @@ console.log(styles);
 }
 ```
 
+#### `@css` Direct CSS Properties:
+
+With the `@css` feature, you can directly add CSS properties that aren't available as Tailwind utilities or when you need more complex CSS values like transitions, animations, or custom properties.
+
+There are several ways to use the `@css` feature:
+
+1. **As a nested object inside selectors**:
+
+```javascript
+const styles = twsx({
+  ".button": [
+    "bg-blue-500 text-white rounded-md",
+    {
+      "@css": {
+        transition: "all 0.3s ease-in-out",
+        "will-change": "transform, opacity"
+      },
+      "&:hover": "bg-blue-600"
+    }
+  ]
+});
+```
+
+**Output**:
+```css
+.button {
+  background-color: #3b82f6;
+  color: white;
+  border-radius: 0.375rem;
+  transition: all 0.3s ease-in-out;
+  will-change: transform, opacity;
+}
+.button:hover {
+  background-color: #2563eb;
+}
+```
+
+2. **As a direct property in the selector**:
+
+```javascript
+const styles = twsx({
+  ".button @css transition": "all 0.3s ease-in-out",
+  ".button": "bg-blue-500 text-white rounded-md",
+  ".button:hover": "bg-blue-600"
+});
+```
+
+This syntax is especially useful when you need to add just a single CSS property that isn't available in Tailwind.
+
+The `@css` feature is particularly helpful for properties that require complex values with spaces (like transitions, animations, and transforms) which can't be represented with standard Tailwind utility classes.
+
+#### Advanced `@css` Examples:
+
+You can combine `@css` with responsive and state variants:
+
+```javascript
+const styles = twsx({
+  ".modal": [
+    "bg-white rounded-lg shadow-xl",
+    {
+      "@css": {
+        transform: "translateY(0)",
+        transition: "transform 0.3s ease-out, opacity 0.2s ease-in-out",
+        "will-change": "transform, opacity"
+      },
+      "&.hidden": [
+        "opacity-0",
+        {
+          "@css": {
+            transform: "translateY(-20px)"
+          }
+        }
+      ],
+      "md:@css width": "500px",
+      "lg:@css width": "700px"
+    }
+  ]
+});
+```
+
+**Output**:
+```css
+.modal {
+  background-color: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  transform: translateY(0);
+  transition: transform 0.3s ease-out, opacity 0.2s ease-in-out;
+  will-change: transform, opacity;
+}
+.modal.hidden {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+@media (min-width: 768px) {
+  .modal {
+    width: 500px;
+  }
+}
+@media (min-width: 1024px) {
+  .modal {
+    width: 700px;
+  }
+}
+```
+
+The `@css` feature provides a powerful way to bridge the gap between Tailwind's utility classes and custom CSS when needed, without leaving the `twsx` syntax.
+
+## License
+
+## Contributing
+
+Contributions are welcome! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.
+
 ## License
 
-This library is licensed under the MIT License. See the LICENSE file for more details.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
 ---
 

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export declare function tws(classNames: string, format?: number): any;
+export declare function twsx(config: object): string;