tailwind-bootstrap-grid - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

index.js

@@ -11,2 +11,3 @@ const _ = require('lodash');
  * @param {Object} [containerMaxWidths={ sm: '540px', md: '720px', lg: '960px', xl: '1140px' }] - the `max-width` container value for each breakpoint
+ * @param {boolean} [rtl=false] - Whether to enable rtl support
  */
@@ -23,2 +24,3 @@ /**
   containerMaxWidths = { sm: '540px', md: '720px', lg: '960px', xl: '1140px' },
+  rtl = false,
 } = {}) => options => {
@@ -177,15 +179,7 @@ const { addUtilities, addComponents, config, e } = options;
         {
-          '.order-first': {
-            order: '-1',
-          },
+          '.order-first': { order: '-1' },
+          '.order-last': { order: gridColumns + 1 },
         },
-        {
-          '.order-last': {
-            order: gridColumns + 1,
-          },
-        },
         ...[0, ...columns].map(size => ({
-          [`.order-${size}`]: {
-            order: `${size}`,
-          },
+          [`.order-${size}`]: { order: `${size}` },
         })),
@@ -203,7 +197,13 @@ ],
       [
-        ...[0, ...columns.slice(0, -1)].map(size => ({
-          [`.offset-${size}`]: {
-            marginLeft: `${(100 / gridColumns) * size}%`,
-          },
-        })),
+        ...[0, ...columns.slice(0, -1)].map(size => {
+          const margin = `${(100 / gridColumns) * size}%`;
+          return rtl
+            ? {
+                [`[dir="ltr"] .offset-${size}`]: { marginLeft: margin },
+                [`[dir="rtl"] .offset-${size}`]: { marginRight: margin },
+              }
+            : {
+                [`.offset-${size}`]: { marginLeft: margin },
+              };
+        }),
       ],
@@ -210,0 +210,0 @@ ['responsive']

package.json

 {
   "name": "tailwind-bootstrap-grid",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Tailwindcss plugin to generate Bootstrap flexbox grid system.",
@@ -11,2 +11,3 @@ "keywords": [
     "layout",
+    "rtl",
     "tailwindcss"
@@ -34,4 +35,6 @@ ],
     "lint:md": "markdownlint README.md",
+    "qa": "run-p test lint",
     "semantic-release": "semantic-release",
     "start": "cross-env NODE_ENV=development webpack-dev-server --hot --config demo/webpack.config.js",
+    "test": "jest tests",
     "try-demo": "run-s clean build:demo && serve build",
@@ -69,36 +72,50 @@ "upgrade-interactive": "npx npm-check --update"
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.3.1",
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
-    "@k.sh/eslint-config": "^1.8.1",
-    "@mdx-js/loader": "^0.16.8",
-    "@mdx-js/tag": "^0.16.8",
+    "@k.sh/eslint-config": "^1.11.0",
+    "@mdx-js/loader": "^0.20.3",
+    "@mdx-js/tag": "^0.20.3",
+    "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
     "cross-env": "^5.2.0",
-    "css-loader": "^2.1.0",
-    "cssnano": "^4.1.8",
+    "css-loader": "^2.1.1",
+    "cssnano": "^4.1.10",
     "cz-conventional-changelog": "^2.1.0",
-    "extract-css-chunks-webpack-plugin": "^3.3.2",
+    "extract-css-chunks-webpack-plugin": "^4.3.1",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^1.3.1",
-    "lint-staged": "^8.1.0",
-    "markdownlint-cli": "^0.13.0",
+    "jest": "^24.7.1",
+    "lint-staged": "^8.1.5",
+    "markdownlint-cli": "^0.15.0",
     "npm-run-all": "^4.1.5",
+    "postcss": "^7.0.14",
     "postcss-loader": "^3.0.0",
     "pretty-quick": "^1.10.0",
-    "prop-types": "^15.6.2",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-hot-loader": "^4.6.3",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-helmet": "^5.2.0",
+    "react-hot-loader": "^4.8.4",
     "react-live": "^1.12.0",
     "rimraf": "^2.6.3",
     "semantic-release": "^15.13.3",
-    "serve": "^10.1.1",
-    "sort-package-json": "^1.18.0",
+    "serve": "^11.0.0",
+    "sort-package-json": "^1.22.1",
     "stylefmt": "^6.0.3",
     "tailwindcss": "^0.7.4",
-    "webpack": "^4.29.0",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.1.14"
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.3.1"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^0"
+  },
+  "greenkeeper": {
+    "ignore": [
+      "@mdx-js/loader",
+      "@mdx-js/tag",
+      "react-live"
+    ]
   }
 }

README.md

@@ -7,2 +7,3 @@ # tailwind-bootstrap-grid
 [![code style: prettier][code-style-badge]][code-style]
+[![Greenkeeper badge](https://badges.greenkeeper.io/buz-zard/tailwind-bootstrap-grid.svg)](https://greenkeeper.io/)
 
@@ -38,2 +39,12 @@ Bootstrap v4 flexbox grid system as a tailwindcss plugin.
 
+\* **NOTE**: This plugin will not work with [tailwindcss/plugins/container](https://tailwindcss.com/docs/container/)
+as both plugins expose a `.container` class
+
+## Features & Tailwind options support
+
+- ✅ custom screens
+- ✅ custom separator
+- 🚧 custom prefix (`no-gutters` class doesn't fully support it)
+- ✅ rtl
+
 ## Options
@@ -49,2 +60,3 @@
   container value for each breakpoint
+- `rtl` (default - `false`) - rtl support (inverses the offset classes)
 
@@ -66,8 +78,2 @@ For example to generate 10 column grid with no gutter and skip the container:
 
-## Tailwind configuration support
-
-- ✅ custom screens
-- ✅ custom separator
-- 🚧 custom prefix - `no-gutters` class doesn't fully support it
-
 ## Related
@@ -74,0 +80,0 @@

No alert changes

Improved metrics

Total package byte prevSize

12912

7.86%

Number of lines in readme file

91

7.06%

Worsened metrics

Dependency count

3

50%

Dev dependency count

37

12.12%

No dependency changes