tailwind-bootstrap-grid - npm Package Compare versions

Comparing version 2.0.0 to 2.0.2

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": "2.0.0",
+  "version": "2.0.2",
   "description": "Tailwindcss plugin to generate Bootstrap flexbox grid system.",
@@ -11,2 +11,3 @@ "keywords": [
     "layout",
+    "rtl",
     "tailwindcss"
@@ -34,4 +35,7 @@ ],
     "lint:md": "markdownlint README.md",
-    "semantic-release": "semantic-release",
+    "qa": "run-p test lint",
+    "release": "npm i && run-s clean build qa && standard-version",
     "start": "cross-env NODE_ENV=development webpack-dev-server --hot --config demo/webpack.config.js",
+    "tdd": "npm test -- --watch",
+    "test": "jest tests",
     "try-demo": "run-s clean build:demo && serve build",
@@ -69,6 +73,6 @@ "upgrade-interactive": "npx npm-check --update"
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
-    "@k.sh/eslint-config": "^1.10.0",
+    "@k.sh/eslint-config": "^1.11.0",
     "@mdx-js/loader": "^0.20.3",
@@ -82,24 +86,27 @@ "@mdx-js/tag": "^0.20.3",
     "cz-conventional-changelog": "^2.1.0",
-    "extract-css-chunks-webpack-plugin": "^4.0.1",
+    "extract-css-chunks-webpack-plugin": "^4.3.1",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^1.3.1",
+    "husky": "^2.0.0",
+    "jest": "^24.7.1",
     "lint-staged": "^8.1.5",
-    "markdownlint-cli": "^0.14.0",
+    "markdownlint-cli": "^0.16.0",
     "npm-run-all": "^4.1.5",
+    "postcss": "^7.0.14",
     "postcss-loader": "^3.0.0",
     "pretty-quick": "^1.10.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
-    "react-hot-loader": "^4.8.0",
+    "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": "^16.0.0-beta.18",
-    "serve": "^10.1.2",
-    "sort-package-json": "^1.21.0",
+    "serve": "^11.0.0",
+    "sort-package-json": "^1.22.1",
+    "standard-version": "^6.0.1",
     "stylefmt": "^6.0.3",
-    "tailwindcss": "^1.0.0-beta.3",
-    "webpack": "^4.29.6",
+    "tailwindcss": "^1.0.1",
+    "webpack": "^4.30.0",
     "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.2.1"
+    "webpack-dev-server": "^3.3.1"
   },
@@ -106,0 +113,0 @@ "peerDependencies": {

README.md

@@ -38,2 +38,14 @@ # tailwind-bootstrap-grid
 
+\* **NOTE**: When using the `.container` class from this plugin you will need to
+[disable](https://tailwindcss.com/docs/container/#disabling) the core
+[container container plugin](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 +61,4 @@
   container value for each breakpoint
+- `rtl` (default - `false`) - rtl support (`.offset-x` classes will start
+  responding to `[dir=ltr]` / `[dir=rtl]`)
 
@@ -66,7 +80,9 @@ For example to generate 10 column grid with no gutter and skip the container:
 
-## Tailwind configuration support
+## FAQ
 
-- ✅ custom screens
-- ✅ custom separator
-- 🚧 custom prefix - `no-gutters` class doesn't fully support it
+1. _**Why my `.container` doesn't have padding?**_ This plugin will not work properly
+   with [core container plugin](https://tailwindcss.com/docs/container/) as both
+   plugins expose a `.container` class.
+1. _**How to use rtl css?**_ Set the `ltr` or `rtl` [dir](https://www.w3schools.com/tags/att_global_dir.asp)
+   attribute on your container (usually the root `html`).
 
@@ -73,0 +89,0 @@ ## Related

No alert changes

Improved metrics

Total package byte prevSize

14631

18.91%

Number of package files

5

25%

Number of lines in readme file

102

18.6%

Worsened metrics

Dev dependency count

37

8.82%

No dependency changes