tailwindthml-flips 1.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2021] [Rajeesh C V]
+
+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

@@ -0,0 +1,35 @@
+<img src="./img/logo.svg" height="60" align="right" />
+
+# tailwindcss flip
+
+[tailwindcss](https://tailwindcss.com) plugin for adding RTL(right-to-left) support.
+
+If your application needs to support multiple languages, then RTL support is a common requirement. Unfortunately, [tailwindcss](https://tailwindcss.com) doesn't have out-of-the-box support for RTL layout. There are few other plugins already exists like [tailwindcss-rtl](https://www.npmjs.com/package/tailwindcss-rtl) and [tailwindcss-dir](https://github.com/RonMelkhior/tailwindcss-dir). Both plugins generate variant styles, and you need to add those classes to the code; which is an additional effort if you already have an existing application.
+
+**tailwindcss-flip** takes an approach were, no code change is required instead, we generate utility classes using `[dir=rtl]` html attribute css selector.
+
+<img src="./img/demo.gif" />
+
+## Installation
+
+1. Install **tailwindcss-flip** package:
+
+```
+# Install using NPM
+npm install tailwindcss-flip --save-dev
+
+# Install using Yarn
+yarn add tailwindcss-flip --dev
+```
+
+2. Add plugin to your `tailwind.conf.js` file:
+
+```js
+ plugins: [require("tailwindcss-flip")],
+```
+
+## How to use
+
+Add `dir=rtl` attribute to the HTML tag or root element of your page. That's it, this plugin will automatically generate all the required utility classes for you.
+
+You can check the [example](./example) folder to see the usage in a react application.

package/lib/margin.js

@@ -0,0 +1,24 @@
+"use strict";
+
+const flatMap = require("lodash.flatmap");
+
+module.exports = function ({ addUtilities, theme, variants }) {
+  const generators = [
+    (size, modifier) => ({
+      [`[dir=rtl] .mr-${modifier}`]: {
+        "margin-left": `${size}`,
+        "margin-right": "unset",
+      },
+      [`[dir=rtl] .ml-${modifier}`]: {
+        "margin-left": "unset",
+        "margin-right": `${size}`,
+      },
+    }),
+  ];
+
+  const utilities = flatMap(generators, (generator) => {
+    return flatMap(theme("margin"), generator);
+  });
+
+  addUtilities(utilities, variants("margin"));
+};

package/lib/padding.js

@@ -0,0 +1,24 @@
+"use strict";
+
+const flatMap = require("lodash.flatmap");
+
+module.exports = function ({ addUtilities, theme, variants }) {
+  const generators = [
+    (size, modifier) => ({
+      [`[dir=rtl] .pr-${modifier}`]: {
+        "padding-left": `${size}`,
+        "padding-right": "unset",
+      },
+      [`[dir=rtl] .pl-${modifier}`]: {
+        "padding-left": "unset",
+        "padding-right": `${size}`,
+      },
+    }),
+  ];
+
+  const utilities = flatMap(generators, (generator) => {
+    return flatMap(theme("padding"), generator);
+  });
+
+  addUtilities(utilities, variants("padding"));
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "tailwindthml-flips",
+  "version": "1.0.3",
+  "description": "RTL plugin for tailwindcss",
+  "main": "lib/index.js",
+  "files": [
+    "lib/*.js"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cvrajeesh/tailwindcss-flip.git"
+  },
+  "keywords": [
+    "tailwindcss",
+    "rtl"
+  ],
+  "author": "Rajeesh C V",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cvrajeesh/tailwindcss-flip/issues"
+  },
+  "homepage": "https://github.com/cvrajeesh/tailwindcss-flip#readme",
+  "dependencies": {
+    "global": "^4.4.0",
+    "lodash.flatmap": "^4.5.0"
+  }
+}