Raveena/ebay skin arc integration

README.md

@@ -0,0 +1,72 @@
+# Installation
+
+You need to install the following packages in order to use ebay skin:
+
+```
+yarn add @ebay/skin @ebay/browserslist-config
+```
+
+## Bundling
+
+We will be loading
+
+### Webpack configuration
+
+yarn add -D less less-loader # Optionally install arc-webpack if you need
+
+Then, in your webpack configuration:
+
+```
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.less$/,
+        loader: 'less-loader', // compiles Less to CSS
+      },
+    ],
+  },
+};
+```
+
+Optionally, if you also want arc-webpack check https://github.com/eBay/arc/tree/master/packages/arc-webpack
+
+## Usage
+
+```
+import "@ebay/skin/button.less";
+
+function App() {
+  return (
+    <div className="App">
+      <button className="btn btn--primary">Button</button>
+    </div>
+  );
+}
+```
+
+## Example
+
+If you are using create-react-app then you need to eject it (Unless you want to use customize-cra) and then update the webpack config like:
+
+```
+const lessRegex = /\.less$/;
+...
+...
+
+    module: {
+        rules: {
+            ...
+            {
+              test: lessRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                  sourceMap: isEnvProduction && shouldUseSourceMap
+                },
+                "less-loader"
+              ),
+              sideEffects: true
+            },
+            ...
+```

config/webpack.config.js

@@ -26,6 +26,7 @@ const ForkTsCheckerWebpackPlugin = require("react-dev-utils/ForkTsCheckerWebpack
 const typescriptFormatter = require("react-dev-utils/typescriptFormatter");
 
 const postcssNormalize = require("postcss-normalize");
+const AdaptivePlugin = require("arc-webpack");
 
 const appPackageJson = require(paths.appPackageJson);
 
@@ -46,6 +47,7 @@ const useTypeScript = fs.existsSync(paths.appTsConfig);
 const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
+const lessRegex = /\.less$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
 
 // This is the production and development configuration.
@@ -81,8 +83,7 @@ module.exports = function(webpackEnv) {
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
-      isEnvDevelopment && require.resolve("style-loader"),
-      isEnvProduction && {
+      {
         loader: MiniCssExtractPlugin.loader,
         options: shouldUseRelativeAssetPaths ? { publicPath: "../../" } : {}
       },
@@ -453,6 +454,17 @@ module.exports = function(webpackEnv) {
                 }
               })
             },
+            {
+              test: lessRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                  sourceMap: isEnvProduction && shouldUseSourceMap
+                },
+                "less-loader"
+              ),
+              sideEffects: true
+            },
             // Opt-in support for SASS (using .scss or .sass extensions).
             // By default we support SASS Modules with the
             // extensions .module.scss or .module.sass
@@ -570,13 +582,12 @@ module.exports = function(webpackEnv) {
       // See https://github.com/facebook/create-react-app/issues/186
       isEnvDevelopment &&
         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-      isEnvProduction &&
-        new MiniCssExtractPlugin({
+      new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
           // both options are optional
           filename: "static/css/[name].[contenthash:8].css",
           chunkFilename: "static/css/[name].[contenthash:8].chunk.css"
-        }),
+      }),
       // Generate an asset manifest file with the following content:
       // - "files" key: Mapping of all asset filenames to their corresponding
       //   output file so that tools can pick it up without having to parse
@@ -651,7 +662,8 @@ module.exports = function(webpackEnv) {
           silent: true,
           // The formatter is invoked directly in WebpackDevServerUtils during development
           formatter: isEnvProduction ? typescriptFormatter : undefined
-        })
+        }),
+      new AdaptivePlugin({ flags: { "skin-ds6": true } })
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell Webpack to provide empty mocks for them so importing them works.

package.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@babel/core": "7.7.4",
+    "@ebay/browserslist-config": "^1.0.1",
+    "@ebay/skin": "^9.5.4",
     "@svgr/webpack": "4.3.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
@@ -135,5 +137,13 @@
     "presets": [
       "react-app"
     ]
+  },
+  "devDependencies": {
+    "arc-resolver": "^2.0.0",
+    "arc-server": "^2.0.0",
+    "arc-webpack": "^2.0.0",
+    "async_hooks": "^1.0.0",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0"
   }
 }

src/App.js

@@ -1,9 +1,11 @@
 import React from "react";
+import "@ebay/skin/button.less";
 
 function App() {
   return (
     <div className="App">
       <p>Hello World</p>
+      <button className="btn btn--primary">Button</button>
     </div>
   );
 }