add sample postcss plugin

Author: smmoosavi

README.md

@@ -23,5 +23,9 @@
   - edit `webpack-helpers/utils.js` (add `addRule` function)
   - add `webpack-helpers/sassPatch.js` and use it in `webpack.monkey.js`
   - add and use sample sass file
+- edit postcss configs
+  - add package `yarn add postcss-inline-rtl`
+  - edit `webpack-helpers/sassPatch.js`
+  - add required changes in `src/index.js` and `sample.scss`
 
 [monkey-react-scripts]: https://github.com/monkey-patches/monkey-react-scripts

package.json

@@ -6,6 +6,7 @@
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "monkey-react-scripts": "^0.1.0",
     "node-sass": "^4.7.2",
+    "postcss-inline-rtl": "^0.9.8",
     "react": "^16.1.1",
     "react-dom": "^16.1.1",
     "react-scripts": "1.0.17",

src/index.js

@@ -4,5 +4,12 @@ import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 
+const IS_RTL = true
+if (IS_RTL) {
+    document.body.parentElement.dir = 'rtl'
+} else {
+    document.body.parentElement.dir = 'ltr'
+}
+
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();

src/sample.scss

@@ -2,4 +2,5 @@ $color: lighten(red, 30%);
 
 .red-bg {
   background-color: $color;
+  border-left: 4px solid red !important;
 }

webpack-helpers/sassPatch.js

@@ -10,6 +10,12 @@ module.exports.sassPatch = function sassPatch (webpackConfig, isDevelopment) {
   const postCssLoader = cssLoaders[cssLoaders.length - 1]
   postCssLoader.options.sourceMap = true // add source option to postcss
 
+  // add rtl css support
+  const postCssFunction = postCssLoader.options.plugins
+  postCssLoader.options.plugins = () => {
+      return [...postCssFunction(), require('postcss-inline-rtl')]
+  }
+
   // add sass support
   const sassLoader = {loader: require.resolve('sass-loader'), options: {sourceMap: true}}
   const sassLoaders = cssLoaders.concat(sassLoader)

yarn.lock

@@ -1466,6 +1466,10 @@ colormin@^1.0.5:
     css-color-names "0.0.4"
     has "^1.0.1"
 
+colors@~0.6.0-1:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.2.tgz#2423fe6678ac0c5dae8852e5d0e5be08c997abcc"
+
 colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
@@ -1484,6 +1488,10 @@ commander@^2.5.0, commander@^2.9.0:
   version "2.12.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.1.tgz#468635c4168d06145b9323356d1da84d14ac4a7a"
 
+commander@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781"
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -2687,6 +2695,13 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
+findup@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/findup/-/findup-0.1.5.tgz#8ad929a3393bac627957a7e5de4623b06b0e2ceb"
+  dependencies:
+    colors "~0.6.0-1"
+    commander "~2.1.0"
+
 flat-cache@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.0.tgz#d3030b32b38154f4e3b7e9c709f490f7ef97c481"
@@ -5028,6 +5043,13 @@ [email protected]:
   dependencies:
     postcss "^6.0.1"
 
+postcss-inline-rtl@^0.9.8:
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/postcss-inline-rtl/-/postcss-inline-rtl-0.9.8.tgz#7c90317b7c6c0f6d12ac53cb0e5126c191ab05cb"
+  dependencies:
+    postcss "^6.0.1"
+    rtlcss "^2.0.3"
+
 postcss-load-config@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
@@ -5237,7 +5259,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13:
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13, postcss@^6.0.14:
   version "6.0.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.14.tgz#5534c72114739e75d0afcf017db853099f562885"
   dependencies:
@@ -5909,6 +5931,16 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^2.0.0"
     inherits "^2.0.1"
 
+rtlcss@^2.0.3:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/rtlcss/-/rtlcss-2.2.1.tgz#f8537e4155208166b05e189802131936fcefd29e"
+  dependencies:
+    chalk "^2.3.0"
+    findup "^0.1.5"
+    mkdirp "^0.5.1"
+    postcss "^6.0.14"
+    strip-json-comments "^2.0.0"
+
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@@ -6338,7 +6370,7 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
-strip-json-comments@~2.0.1:
+strip-json-comments@^2.0.0, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"