Add example of how to use CSS variables

Author: kristerkari

package.json

@@ -47,10 +47,11 @@
     "metro-react-native-babel-preset": "^0.53.1",
     "node-sass": "^4.11.0",
     "postcss": "^7.0.14",
+    "postcss-css-variables": "^0.12.0",
     "postcss-loader": "^3.0.0",
     "react-hot-loader": "3.1.3",
-    "react-native-typed-css-transformer": "^0.10.2",
-    "react-native-typed-sass-transformer": "^0.11.0",
+    "react-native-sass-transformer": "^1.4.0",
+    "react-native-typed-postcss-transformer": "^0.10.2",
     "react-test-renderer": "16.6.3",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
@@ -97,7 +98,7 @@
   },
   "postcss": {
     "plugins": {
-      "autoprefixer": {}
+      "postcss-css-variables": {}
     }
   },
   "eslintConfig": {

rn-transformer.js

@@ -1,12 +1,16 @@
 var upstreamTransformer = require("metro/src/reactNativeTransformer");
-var sassTransformer = require("react-native-typed-sass-transformer");
-var cssTransformer = require("react-native-typed-css-transformer");
+var sassTransformer = require("react-native-sass-transformer");
+var postCSSTransformer = require("react-native-typed-postcss-transformer");
 
 module.exports.transform = function({ src, filename, options }) {
   if (filename.endsWith(".scss")) {
-    return sassTransformer.transform({ src, filename, options });
+    return sassTransformer
+      .renderToCSS({ src, filename, options })
+      .then(css =>
+        postCSSTransformer.transform({ src: css, filename, options })
+      );
   } else if (filename.endsWith(".css")) {
-    return cssTransformer.transform({ src, filename, options });
+    return postCSSTransformer.transform({ src, filename, options });
   } else {
     return upstreamTransformer.transform({ src, filename, options });
   }

src/Link.css

@@ -1,11 +1,16 @@
+:root {
+  --text-color: #212529;
+  --link-color: blue;
+}
+
 .description {
   margin-bottom: 12px;
 }
 
 .descriptionText {
-  color: #212529;
+  color: var(--text-color);
 }
 
 .descriptionLink {
-  color: blue;
+  color: var(--link-color);
 }

webpack.config.js

@@ -1,5 +1,6 @@
 const webpack = require("webpack");
 const path = require("path");
+const autoprefixer = require("autoprefixer");
 
 var babelLoader = {
   loader: "babel-loader",
@@ -70,7 +71,10 @@ module.exports = {
             }
           },
           {
-            loader: "postcss-loader"
+            loader: "postcss-loader",
+            options: {
+              plugins: () => [autoprefixer()]
+            }
           }
         ]
       },
@@ -93,7 +97,10 @@ module.exports = {
             }
           },
           {
-            loader: "postcss-loader"
+            loader: "postcss-loader",
+            options: {
+              plugins: () => [autoprefixer()]
+            }
           },
           {
             loader: "sass-loader"

yarn.lock

@@ -3992,7 +3992,7 @@ escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
 
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
@@ -4311,7 +4311,7 @@ extend@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
 
-extend@~3.0.2:
+extend@^3.0.1, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
 
@@ -8019,6 +8019,15 @@ posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
 
+postcss-css-variables@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/postcss-css-variables/-/postcss-css-variables-0.12.0.tgz#0137b6ff15fb051bd29b36eabfea03472ccdd14c"
+  integrity sha512-fSgIfR+g/kZ2GeV3GH7wyNslDi7KH/Z+zwtHdEcmHv86mu+o71va9r9rqFLPR0VKi2BzoQZbCyw89oXK/XevIQ==
+  dependencies:
+    escape-string-regexp "^1.0.3"
+    extend "^3.0.1"
+    postcss "^6.0.8"
+
 postcss-html@^0.36.0:
   version "0.36.0"
   resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204"
@@ -8178,7 +8187,7 @@ postcss@^6.0.1:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^6.0.23:
+postcss@^6.0.23, postcss@^6.0.8:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
@@ -8507,22 +8516,22 @@ react-native-known-styling-properties@^1.0.5:
   resolved "https://registry.yarnpkg.com/react-native-known-styling-properties/-/react-native-known-styling-properties-1.0.5.tgz#dd99690d579c5136541e1df836e75088af6e7356"
   integrity sha512-PKRW5v9Um2/7mIaUy2fxg3XugP/QyVoqnzpnkY6AUTIlfyC2c/PeEhDwEVJgTotWiFCIj2lUACQ2lsG5zp0NUQ==
 
-react-native-typed-css-transformer@^0.10.2:
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/react-native-typed-css-transformer/-/react-native-typed-css-transformer-0.10.2.tgz#a3de30634443b492dadb7fb832c930ae4ee74d31"
-  integrity sha512-dSr0zH+KwdmC4KmibX89z5KTv2TEdyDwRQY60m61PwL/SMiGGGRcF0hRQZFBSs+mBaZ6sBDzwbrSkmA46p+x0A==
+react-native-sass-transformer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-native-sass-transformer/-/react-native-sass-transformer-1.4.0.tgz#1b6a1ed6f2b6338ba42f2a46afd1f23f9ada3439"
+  integrity sha512-PlRiaJIcDzYpIVDH0OQuabkMGy/zp7N/A14rqhBrFqhADXC0xR2W53Cb7CicL9CsOL4y7Sh2dv4pgMvqgMdwqQ==
   dependencies:
+    app-root-path "^2.1.0"
     css-to-react-native-transform "^1.8.1"
     semver "^5.6.0"
-    typed-css-modules "^0.3.7"
 
-react-native-typed-sass-transformer@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/react-native-typed-sass-transformer/-/react-native-typed-sass-transformer-0.11.0.tgz#8b51a83d338bc50f01613724b5eb406ace653dd4"
-  integrity sha512-mECGldsTNzb0j3qrEde3Qle3y4gjY1YLuHriDPRFJs3WTPN/FEGB9ModendoX2syoTTK+z2JPrQ3QeQJh93THw==
+react-native-typed-postcss-transformer@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/react-native-typed-postcss-transformer/-/react-native-typed-postcss-transformer-0.10.2.tgz#0a84d8c3ad9335ecebb1c66c8a025d01aabf5567"
+  integrity sha512-P/E7g2zTK/z3g83p2cvN3zIpcaN2XWtRKi2U3LvsJ8TzTULAEwtZpvmUEUauxdRLl4jz6iGC2a9yDKFyYj22aA==
   dependencies:
-    app-root-path "^2.1.0"
     css-to-react-native-transform "^1.8.1"
+    postcss-load-config "^2.0.0"
     semver "^5.6.0"
     typed-css-modules "^0.3.7"