diff --git a/README.md b/README.md index e69de29..0bf20cb 100644 --- a/README.md +++ b/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 ( +
+ +
+ ); +} +``` + +## 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 + }, + ... +``` diff --git a/config/webpack.config.js b/config/webpack.config.js index 84c0974..721eb80 100644 --- a/config/webpack.config.js +++ b/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. diff --git a/package.json b/package.json index a9edf53..eb03f23 100644 --- a/package.json +++ b/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" } } diff --git a/src/App.js b/src/App.js index 14e3e1b..b07b53c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,11 @@ import React from "react"; +import "@ebay/skin/button.less"; function App() { return (

Hello World

+
); } diff --git a/yarn.lock b/yarn.lock index 590c90f..dbd7573 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1014,6 +1014,16 @@ resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18" integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg== +"@ebay/browserslist-config@^1.0.1": + version "1.0.1" + resolved "https://registry.npm.es.ebay.com/@/@ebay/browserslist-config/_attachments/browserslist-config-1.0.1.tgz#deccafb04101fa52507b8f2204161c8ed5e70375" + integrity sha512-5i4XOsKwoCYomZ9cF7H5OBroeHoYUriylg55mJwTARMbQVv21RnYKF/Bwi86ZlHz4S6YepxlaQorsxR6T2xv6w== + +"@ebay/skin@^9.5.4": + version "9.5.4" + resolved "https://registry.npm.es.ebay.com/@/@ebay/skin/_attachments/skin-9.5.4.tgz#d6a052bf8f2547f49b86fcce226b45bb3074c17c" + integrity sha512-eLQneE+NJ7sSsUUkqsLIesapfDe4BCjCjy/bfvA8v+QUEsbHD5nMCnVox526IJMSd+hn2jDvAveS8ae7BzykQw== + "@hapi/address@2.x.x": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" @@ -1871,6 +1881,41 @@ aproba@^1.0.3, aproba@^1.1.1: resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw== +arc-flag-parser@^2.0.0: + version "2.0.0" + resolved "https://registry.npm.es.ebay.com/a/arc-flag-parser/_attachments/arc-flag-parser-2.0.0.tgz#2937287c62ae928a612f3f7d7ef89a2363022ca8" + integrity sha512-9TLs6K+2sojaQqfC8+zoQyILN7dBywecKR8S0Lx+taPMVlCo//k1SpRSabR52DkrkxIvlPBQxyZkTXvYL0hr3A== + +arc-fs@^2.0.0: + version "2.0.0" + resolved "https://registry.npm.es.ebay.com/a/arc-fs/_attachments/arc-fs-2.0.0.tgz#b08a5eab7ff3906111834abfc27276ab487fab1a" + integrity sha512-NcU9Aw2GyjbMXWyBg9Naj9XBUDtCElXJxgOc32TGux3mn8W+vyg/becjCzAqNxyKv9D8ltnIU5tQkf2gWeIsbQ== + dependencies: + arc-resolver "^2.0.0" + +arc-resolver@^2.0.0: + version "2.0.0" + resolved "https://registry.npm.es.ebay.com/a/arc-resolver/_attachments/arc-resolver-2.0.0.tgz#3e648218ccce88809d4d76b4620824162c7f3c1f" + integrity sha512-nB+TBwnUK4tSg00GP8mekovIESnZoz0PKOyhMMvTxeqVr63CQfx8pysv1eW4PW/8oFbUQmFmLUug9dTYAhkZ6Q== + dependencies: + arc-flag-parser "^2.0.0" + cachedfs "^0.3.3" + +arc-server@^2.0.0: + version "2.0.0" + resolved "https://registry.npm.es.ebay.com/a/arc-server/_attachments/arc-server-2.0.0.tgz#685dac2663a475c488dbd7176e34cf262be0411b" + integrity sha512-lQT/aSVIP2ySs3AHHxnGGVN0Hlkl0ONcIJ+SryDx08yXs+OiJSEYNCzeNSE8a7y0kswcAn0ftYbCLHZxwGLC5g== + dependencies: + arc-fs "^2.0.0" + arc-resolver "^2.0.0" + +arc-webpack@^2.0.0: + version "2.0.0" + resolved "https://registry.npm.es.ebay.com/a/arc-webpack/_attachments/arc-webpack-2.0.0.tgz#074dbd3c2411ec74fc10ab30f41e4c0e8c99c1d2" + integrity sha512-RdXQjbfn9pNMkrNeDumbrF0EZ3Dyj8gRPdMQ0FTZtP+IY/h/9EXcoe90r6/uRCd0wBo0Bi+DbOGU2gPJ3Gwqlg== + dependencies: + arc-fs "^2.0.0" + are-we-there-yet@~1.1.2: version "1.1.5" resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21" @@ -1959,7 +2004,7 @@ arrify@^1.0.1: resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0= -asap@~2.0.6: +asap@~2.0.3, asap@~2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= @@ -2032,6 +2077,11 @@ async@^2.6.2: dependencies: lodash "^4.17.14" +async_hooks@^1.0.0: + version "1.0.0" + resolved "https://registry.npm.es.ebay.com/a/async_hooks/_attachments/async_hooks-1.0.0.tgz#815f5e861fe73f64eb29fd942c32e95c8064052f" + integrity sha1-gV9ehh/nP2TrKf2ULDLpXIBkBS8= + asynckit@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" @@ -2463,6 +2513,11 @@ buffer@^4.3.0: ieee754 "^1.1.4" isarray "^1.0.0" +bufferedstream@~1.6.0: + version "1.6.0" + resolved "https://registry.npm.es.ebay.com/b/bufferedstream/_attachments/bufferedstream-1.6.0.tgz#1b56be67132162d9f468bc886dd2c9160ddf2882" + integrity sha1-G1a+ZxMhYtn0aLyIbdLJFg3fKII= + builtin-status-codes@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8" @@ -2538,6 +2593,18 @@ cache-base@^1.0.1: union-value "^1.0.0" unset-value "^1.0.0" +cachedfs@^0.3.3: + version "0.3.3" + resolved "https://registry.npm.es.ebay.com/c/cachedfs/_attachments/cachedfs-0.3.3.tgz#012ab513475ff77ede1c6d59d8db84bc46b66aba" + integrity sha1-ASq1E0df937eHG1Z2NuEvEa2aro= + dependencies: + bufferedstream "~1.6.0" + lru-cache "=2.3.1" + memoizeasync "=0.4.2" + memoizesync "=0.4.2" + passerror "=0.0.2" + underscore "=1.5.2" + call-me-maybe@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b" @@ -2770,6 +2837,11 @@ clone-deep@^4.0.1: kind-of "^6.0.2" shallow-clone "^3.0.0" +clone@^2.1.1, clone@^2.1.2: + version "2.1.2" + resolved "https://registry.npm.es.ebay.com/c/clone/_attachments/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" + integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18= + co@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" @@ -3747,7 +3819,7 @@ entities@^2.0.0: resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4" integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw== -errno@^0.1.3, errno@~0.1.7: +errno@^0.1.1, errno@^0.1.3, errno@~0.1.7: version "0.1.7" resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618" integrity sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg== @@ -5041,6 +5113,11 @@ ignore@^4.0.6: resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== +image-size@~0.5.0: + version "0.5.5" + resolved "https://registry.npm.es.ebay.com/i/image-size/_attachments/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c" + integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w= + immer@1.10.0: version "1.10.0" resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d" @@ -6191,6 +6268,31 @@ left-pad@^1.3.0: resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e" integrity sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA== +less-loader@^5.0.0: + version "5.0.0" + resolved "https://registry.npm.es.ebay.com/l/less-loader/_attachments/less-loader-5.0.0.tgz#498dde3a6c6c4f887458ee9ed3f086a12ad1b466" + integrity sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg== + dependencies: + clone "^2.1.1" + loader-utils "^1.1.0" + pify "^4.0.1" + +less@^3.10.3: + version "3.10.3" + resolved "https://registry.npm.es.ebay.com/l/less/_attachments/less-3.10.3.tgz#417a0975d5eeecc52cff4bcfa3c09d35781e6792" + integrity sha512-vz32vqfgmoxF1h3K4J+yKCtajH0PWmjkIFgbs5d78E/c/e+UQTnI+lWK+1eQRE95PXM2mC3rJlLSSP9VQHnaow== + dependencies: + clone "^2.1.2" + optionalDependencies: + errno "^0.1.1" + graceful-fs "^4.1.2" + image-size "~0.5.0" + mime "^1.4.1" + mkdirp "^0.5.0" + promise "^7.1.1" + request "^2.83.0" + source-map "~0.6.0" + leven@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2" @@ -6336,6 +6438,11 @@ lower-case@^1.1.1: resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac" integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw= +lru-cache@=2.3.1: + version "2.3.1" + resolved "https://registry.npm.es.ebay.com/l/lru-cache/_attachments/lru-cache-2.3.1.tgz#b3adf6b3d856e954e2c390e6cef22081245a53d6" + integrity sha1-s632s9hW6VTiw5DmzvIggSRaU9Y= + lru-cache@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" @@ -6417,6 +6524,21 @@ mem@^4.0.0: mimic-fn "^2.0.0" p-is-promise "^2.0.0" +memoizeasync@=0.4.2: + version "0.4.2" + resolved "https://registry.npm.es.ebay.com/m/memoizeasync/_attachments/memoizeasync-0.4.2.tgz#de0319f582796ee2a5781a94c7435f451b7f466c" + integrity sha1-3gMZ9YJ5buKleBqUx0NfRRt/Rmw= + dependencies: + lru-cache "=2.3.1" + passerror "=0.0.2" + +memoizesync@=0.4.2: + version "0.4.2" + resolved "https://registry.npm.es.ebay.com/m/memoizesync/_attachments/memoizesync-0.4.2.tgz#3f34eb3cb4b76f5f6440d91c01f25125e9462b49" + integrity sha1-PzTrPLS3b19kQNkcAfJRJelGK0k= + dependencies: + lru-cache "=2.3.1" + memory-fs@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -6506,7 +6628,7 @@ mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24: dependencies: mime-db "1.42.0" -mime@1.6.0: +mime@1.6.0, mime@^1.4.1: version "1.6.0" resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1" integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg== @@ -7356,6 +7478,11 @@ pascalcase@^0.1.1: resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14" integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ= +passerror@=0.0.2: + version "0.0.2" + resolved "https://registry.npm.es.ebay.com/p/passerror/_attachments/passerror-0.0.2.tgz#c43090627b78d39ece96dbc7541f73f73efd9f4a" + integrity sha1-xDCQYnt4057OltvHVB9z9z79n0o= + path-browserify@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a" @@ -8258,6 +8385,13 @@ promise-inflight@^1.0.1: resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3" integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM= +promise@^7.1.1: + version "7.3.1" + resolved "https://registry.npm.es.ebay.com/p/promise/_attachments/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf" + integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg== + dependencies: + asap "~2.0.3" + promise@^8.0.3: version "8.0.3" resolved "https://registry.npm.es.ebay.com/p/promise/_attachments/promise-8.0.3.tgz#f592e099c6cddc000d538ee7283bb190452b0bf6" @@ -8725,7 +8859,7 @@ request-promise-native@^1.0.5: stealthy-require "^1.1.1" tough-cookie "^2.3.3" -request@^2.87.0, request@^2.88.0: +request@^2.83.0, request@^2.87.0, request@^2.88.0: version "2.88.0" resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef" integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg== @@ -9953,6 +10087,11 @@ uglify-js@^3.1.4: commander "~2.20.3" source-map "~0.6.1" +underscore@=1.5.2: + version "1.5.2" + resolved "https://registry.npm.es.ebay.com/u/underscore/_attachments/underscore-1.5.2.tgz#1335c5e4f5e6d33bbb4b006ba8c86a00f556de08" + integrity sha1-EzXF5PXm0zu7SwBrqMhqAPVW3gg= + unicode-canonical-property-names-ecmascript@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"