output style file

config/playwright/rollup.config.js

@@ -6,7 +6,7 @@ const rollupPluginServe = require('rollup-plugin-serve');
 
 const createRollupConfig = require('../rollup/rollup.config');
 const rollupPluginHtml = require('./rollup.pluginHtml');
-const rollupAdditionalWatchFiles = require('./rollup.pluginAdditionalWatchFiles');
+// const rollupAdditionalWatchFiles = require('./rollup.pluginAdditionalWatchFiles');
 
 const portRange = {
   min: 20000,
@@ -38,6 +38,7 @@ module.exports = (testDir, onListening = null) => {
       minified: false,
       module: false,
     },
+    extractStyle: false,
     rollup: {
       input: path.resolve(testDir, meta.input),
       context: 'this',
@@ -52,7 +53,7 @@ module.exports = (testDir, onListening = null) => {
         ),
         ...(onListening
           ? [
-              rollupAdditionalWatchFiles([htmlFilePath]),
+              // rollupAdditionalWatchFiles([htmlFilePath]),
               rollupPluginServe({
                 contentBase: dist,
                 historyApiFallback: `/${htmlName}`,

config/rollup/defaultOptions.js

@@ -10,6 +10,7 @@ module.exports = {
     minified: true,
     module: true,
   },
+  extractStyle: false,
   alias: {},
   rollup: {
     input: './src/index',

config/rollup/pipeline.build.js

@@ -5,7 +5,12 @@ const rollupTs = require('rollup-plugin-ts');
 
 const babelConfigUmd = require('./babel.config.umd');
 const babelConfigEsm = require('./babel.config.esm');
-const { rollupCommonjs, rollupResolve, rollupAlias } = require('./pipeline.common.plugins');
+const {
+  rollupCommonjs,
+  rollupResolve,
+  rollupAlias,
+  rollupScss,
+} = require('./pipeline.common.plugins');
 const { extensions } = require('../../resolve.config.json');
 
 const createOutputWithMinifiedVersion = (output, esm, buildMinifiedVersion) =>
@@ -38,8 +43,8 @@ const createOutputWithMinifiedVersion = (output, esm, buildMinifiedVersion) =>
       : []
   );
 
-module.exports = (esm, options, declarationFiles = false) => {
+module.exports = (esm, options, { declarationFiles = false, outputStyle = false } = {}) => {
-  const { rollup, paths, versions, alias } = options;
+  const { rollup, paths, versions, alias, extractStyle } = options;
   const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
   const { name, file, globals, exports, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
   const { minified: buildMinifiedVersion } = versions;
@@ -66,9 +71,14 @@ module.exports = (esm, options, declarationFiles = false) => {
   return {
     input,
     output,
+    treeshake: {
+      propertyReadSideEffects: false,
+      moduleSideEffects: false,
+    },
     ...rollupOptions,
     plugins: [
       rollupAlias(alias),
+      rollupScss(extractStyle, outputStyle),
       rollupTs({
         tsconfig: (resolvedConfig) => ({
           ...resolvedConfig,
@@ -109,6 +119,6 @@ module.exports = (esm, options, declarationFiles = false) => {
         extensions,
       }),
       ...plugins,
-    ],
+    ].filter(Boolean),
   };
 };

config/rollup/pipeline.common.plugins.js

@@ -1,4 +1,8 @@
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
 const { nodeResolve: rollupPluginResolve } = require('@rollup/plugin-node-resolve');
+const rollupPluginScss = require('rollup-plugin-scss');
+const rollupPluginIgnoreImport = require('rollup-plugin-ignore-import');
 const rollupPluginCommonjs = require('@rollup/plugin-commonjs');
 const rollupPluginAlias = require('@rollup/plugin-alias');
 const { extensions, directories } = require('../../resolve.config.json');
@@ -20,4 +24,17 @@ module.exports = {
       moduleDirectories: directories,
       extensions,
     }),
+  rollupScss: (extractStyleOption, output) => {
+    if (extractStyleOption) {
+      return output
+        ? rollupPluginScss({
+            output,
+            processor: () => postcss([autoprefixer()]),
+          })
+        : rollupPluginIgnoreImport({
+            extensions: ['.scss', '.sass', '.css'],
+            body: 'export default undefined;',
+          });
+    }
+  },
 };

config/rollup/pipeline.dev.js

@@ -1,9 +1,14 @@
 const path = require('path');
 const { default: rollupEsBuild } = require('rollup-plugin-esbuild');
-const { rollupCommonjs, rollupResolve, rollupAlias } = require('./pipeline.common.plugins');
+const {
+  rollupCommonjs,
+  rollupResolve,
+  rollupAlias,
+  rollupScss,
+} = require('./pipeline.common.plugins');
 
 module.exports = (options) => {
-  const { rollup, paths, alias } = options;
+  const { rollup, paths, alias, extractStyle } = options;
   const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
   const { file, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
   const { src: srcPath, dist: distPath } = paths;
@@ -22,6 +27,7 @@ module.exports = (options) => {
     output,
     ...rollupOptions,
     plugins: [
+      rollupScss(extractStyle),
       rollupAlias(alias),
       rollupResolve(srcPath),
       rollupEsBuild({
@@ -32,6 +38,6 @@ module.exports = (options) => {
       }),
       rollupCommonjs(sourcemap),
       ...plugins,
-    ],
+    ].filter(Boolean),
   };
 };

config/rollup/rollup.config.js

@@ -11,12 +11,19 @@ const pipelineDev = require('./pipeline.dev');
 const repoRoot = path.resolve(__dirname, '../../');
 
 const appendExtension = (file) =>
-  path.extname(file) === '' ? file + resolve.extensions.find((ext) => fs.existsSync(path.resolve(`${file}${ext}`))) : file;
+  path.extname(file) === ''
+    ? file + resolve.extensions.find((ext) => fs.existsSync(path.resolve(`${file}${ext}`)))
+    : file;
 
-const normalizePath = (pathName) => (pathName ? pathName.split(path.sep).join(path.posix.sep) : pathName);
+const normalizePath = (pathName) =>
+  pathName ? pathName.split(path.sep).join(path.posix.sep) : pathName;
 
 const resolvePath = (basePath, pathToResolve, appendExt) => {
-  const result = pathToResolve ? (path.isAbsolute(pathToResolve) ? pathToResolve : path.resolve(basePath, pathToResolve)) : null;
+  const result = pathToResolve
+    ? path.isAbsolute(pathToResolve)
+      ? pathToResolve
+      : path.resolve(basePath, pathToResolve)
+    : null;
   return normalizePath(result && appendExt ? appendExtension(result) : result);
 };
 
@@ -32,19 +39,38 @@ const getWorkspaceAliases = () =>
       } catch {}
 
       obj[`@/${path.basename(absolutePath)}`] = `${normalizePath(
-        path.resolve(absolutePath, projTsConfig?.compilerOptions?.baseUrl || defaultOptions.paths.src)
+        path.resolve(
+          absolutePath,
+          projTsConfig?.compilerOptions?.baseUrl || defaultOptions.paths.src
+        )
       )}`;
       return obj;
     }, {});
 
 const mergeAndResolveOptions = (userOptions) => {
-  const { mode: defaultMode, paths: defaultPaths, versions: defaultVersions, alias: defaultAlias, rollup: defaultRollup } = defaultOptions;
+  const {
-  const { project, mode: rawMode, paths: rawPaths = {}, versions: rawVersions = {}, alias: rawAlias = {}, rollup: rawRollup = {} } = userOptions;
+    mode: defaultMode,
+    paths: defaultPaths,
+    versions: defaultVersions,
+    alias: defaultAlias,
+    rollup: defaultRollup,
+    extractStyle: defaultExtractStyle,
+  } = defaultOptions;
+  const {
+    project,
+    mode: rawMode,
+    paths: rawPaths = {},
+    versions: rawVersions = {},
+    alias: rawAlias = {},
+    rollup: rawRollup = {},
+    extractStyle: rawExtractStyle,
+  } = userOptions;
   const projectPath = process.cwd();
   const mergedOptions = {
     project: project || path.basename(projectPath),
     mode: rawMode || defaultMode,
     repoRoot,
+    extractStyle: rawExtractStyle ?? defaultExtractStyle,
     paths: {
       ...defaultPaths,
       ...rawPaths,
@@ -67,12 +93,11 @@ const mergeAndResolveOptions = (userOptions) => {
       },
     },
   };
-  const { src, dist, types, tests } = mergedOptions.paths;
+  const { src, dist, types } = mergedOptions.paths;
 
   mergedOptions.paths.src = resolvePath(projectPath, src);
   mergedOptions.paths.dist = resolvePath(projectPath, dist);
   mergedOptions.paths.types = resolvePath(projectPath, types);
-  mergedOptions.paths.tests = resolvePath(projectPath, tests);
 
   mergedOptions.rollup.input = resolvePath(projectPath, mergedOptions.rollup.input, true);
   mergedOptions.rollup.output = {
@@ -95,13 +120,13 @@ const createConfig = (userOptions = {}) => {
     console.log('PROJECT : ', project);
     console.log('OPTIONS : ', options);
 
-    const umd = pipelineBuild(false, options, true);
+    const umd = pipelineBuild(false, options, { declarationFiles: true, outputStyle: true });
     const esm = buildModuleVersion ? pipelineBuild(true, options) : null;
 
     return [umd, esm].filter((build) => !!build);
   }
 
-  return pipelineDev(options);
+  return [pipelineDev(options)];
 };
 
 module.exports = createConfig;

package.json

@@ -19,6 +19,7 @@
     "@types/jest": "^26.0.24",
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",
+    "autoprefixer": "^10.4.7",
     "babel-jest": "^28.1.1",
     "bufferutil": "^4.0.1",
     "canvas": "^2.6.1",
@@ -45,10 +46,13 @@
     "playwright-core": "^1.22.2",
     "playwright-firefox": "^1.22.2",
     "playwright-webkit": "^1.22.2",
+    "postcss": "^8.4.14",
     "prettier": "^2.6.2",
     "rollup": "^2.75.5",
     "rollup-plugin-esbuild": "^4.9.1",
+    "rollup-plugin-ignore-import": "^1.3.2",
     "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-styles": "^3.10.0",
     "rollup-plugin-terser": "^6.1.0",

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -1284,7 +1284,7 @@ const createOverflowUpdate = (structureSetupElements, state) => {
     _nativeScrollbarIsOverlaid
   } = getEnvironment();
   const doViewportArrange = !_viewportIsTarget && !_nativeScrollbarStyling && (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y);
-  const [updateSizeFraction, getCurrentSizeFraction] = createCache(whCacheOptions, fractionalSize.bind(0, _host));
+  const [updateSizeFraction, getCurrentSizeFraction] = createCache(whCacheOptions, fractionalSize.bind(0, _viewport));
   const [updateViewportScrollSizeCache, getCurrentViewportScrollSizeCache] = createCache(whCacheOptions, scrollSize.bind(0, _viewport));
   const [updateOverflowAmountCache, getCurrentOverflowAmountCache] = createCache(whCacheOptions);
   const [updateOverflowStyleCache] = createCache(xyCacheOptions);
@@ -2367,40 +2367,15 @@ const addPlugin = addedPlugin => each(isArray(addedPlugin) ? addedPlugin : [adde
   pluginRegistry[plugin[0]] = plugin[1];
 });
 
-function getDefaultExportFromCjs (x) {
+const optionsTemplateTypes = {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+  boolean: '__TPL_boolean_TYPE__',
-}
+  number: '__TPL_number_TYPE__',
-
+  string: '__TPL_string_TYPE__',
-var _extends = {exports: {}};
+  array: '__TPL_array_TYPE__',
-
+  object: '__TPL_object_TYPE__',
-(function (module) {
+  function: '__TPL_function_TYPE__',
-  function _extends() {
+  null: '__TPL_null_TYPE__'
-    module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
+};
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    }, module.exports.__esModule = true, module.exports["default"] = module.exports;
-    return _extends.apply(this, arguments);
-  }
-
-  module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
-})(_extends);
-
-getDefaultExportFromCjs(_extends.exports);
-
-const templateTypePrefixSuffix = ['__TPL_', '_TYPE__'];
-const optionsTemplateTypes = ['boolean', 'number', 'string', 'array', 'object', 'function', 'null'].reduce((result, item) => {
-  result[item] = templateTypePrefixSuffix[0] + item + templateTypePrefixSuffix[1];
-  return result;
-}, {});
 
 const numberAllowedValues = optionsTemplateTypes.number;
 const booleanAllowedValues = optionsTemplateTypes.boolean;

packages/overlayscrollbars/rollup.config.js

@@ -3,6 +3,7 @@ const { devDependencies, peerDependencies } = require('./package.json');
 
 module.exports = createRollupConfig({
   project: 'OverlayScrollbars',
+  extractStyle: true,
   rollup: {
     external: Object.keys(devDependencies || {}).concat(Object.keys(peerDependencies || {})),
     output: {

packages/overlayscrollbars/src/index.scss

@@ -0,0 +1,4 @@
+@import './styles/sizeobserver.scss';
+@import './styles/trinsicobserver.scss';
+@import './styles/scrollbars.scss';
+@import './styles/structure.scss';

packages/overlayscrollbars/src/index.ts

@@ -1 +1,3 @@
+import 'index.scss';
+
 export { OverlayScrollbars as default } from 'overlayscrollbars';

packages/overlayscrollbars/src/plugins/optionsValidation/validation.ts

@@ -58,28 +58,15 @@ type OptionsTemplateTypesDictionary = {
   readonly null: OptionsTemplateType<null>;
 };
 
-/**
+const optionsTemplateTypes: OptionsTemplateTypesDictionary = {
- * A prefix and suffix tuple which serves as recognition pattern for template types.
+  boolean: '__TPL_boolean_TYPE__',
- */
+  number: '__TPL_number_TYPE__',
-const templateTypePrefixSuffix: readonly [string, string] = ['__TPL_', '_TYPE__'];
+  string: '__TPL_string_TYPE__',
-
+  array: '__TPL_array_TYPE__',
-/**
+  object: '__TPL_object_TYPE__',
- * A object which serves as a mapping for "normal" types and template types.
+  function: '__TPL_function_TYPE__',
- * Key   = normal type string
+  null: '__TPL_null_TYPE__',
- * value = template type string
+};
- */
-const optionsTemplateTypes: OptionsTemplateTypesDictionary = [
-  'boolean',
-  'number',
-  'string',
-  'array',
-  'object',
-  'function',
-  'null',
-].reduce((result, item) => {
-  result[item] = templateTypePrefixSuffix[0] + item + templateTypePrefixSuffix[1];
-  return result;
-}, {} as OptionsTemplateTypesDictionary);
 
 /**
  * Validates the given options object according to the given template object and returns a object which looks like:

packages/overlayscrollbars/src/styles/structure.scss

@@ -1,7 +1,3 @@
-@import './sizeobserver.scss';
-@import './trinsicobserver.scss';
-@import './scrollbars.scss';
-
 .os-environment {
   --os-custom-prop: -1;
   position: fixed;

packages/overlayscrollbars/tests/playwright/environment/index.browser.ts

@@ -1,4 +1,4 @@
-import 'styles/overlayscrollbars.scss';
+import 'index.scss';
 import { createDOM, appendChildren } from 'support';
 import { getEnvironment } from 'environment';
 

packages/overlayscrollbars/tests/playwright/observers/domObserver/index.browser.ts

@@ -1,4 +1,4 @@
-import 'styles/overlayscrollbars.scss';
+import 'index.scss';
 import './index.scss';
 import should from 'should';
 import { generateSelectCallback, iterateSelect } from '@/testing-browser/Select';

packages/overlayscrollbars/tests/playwright/observers/sizeObserver/index.browser.ts

@@ -1,4 +1,4 @@
-import 'styles/overlayscrollbars.scss';
+import 'index.scss';
 import './index.scss';
 import './handleEnvironment';
 import should from 'should';

packages/overlayscrollbars/tests/playwright/observers/trinsicObserver/index.browser.ts

@@ -1,4 +1,4 @@
-import 'styles/overlayscrollbars.scss';
+import 'index.scss';
 import './index.scss';
 import './handleEnvironment';
 import should from 'should';

packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts

@@ -1,5 +1,5 @@
 import './index.scss';
-import 'styles/overlayscrollbars.scss';
+import 'index.scss';
 import should from 'should';
 import { OverlayScrollbars } from 'overlayscrollbars';
 import { resize } from '@/testing-browser/Resize';

packages/overlayscrollbars/tests/playwright/setups/structureSetup/observers/index.browser.ts

@@ -1,5 +1,5 @@
 import './index.scss';
-import 'styles/overlayscrollbars.scss';
+import 'index.scss';
 
 // test viewport inheritted attrs (tabindex) for multiple and single element init
 // test appear & resize for multiple and single element init

packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts

@@ -1,8 +1,8 @@
-import 'styles/overlayscrollbars.scss';
+import 'index.scss';
 import './index.scss';
 import './handleEnvironment';
-import should from 'should';
 import { OverlayScrollbars } from 'overlayscrollbars';
+import should from 'should';
 import {
   assignDeep,
   clientSize,

yarn.lock

@@ -2015,6 +2015,18 @@ at-least-node@^1.0.0:
   resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
+autoprefixer@^10.4.7:
+  version "10.4.7"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.7.tgz#1db8d195f41a52ca5069b7593be167618edbbedf"
+  integrity sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==
+  dependencies:
+    browserslist "^4.20.3"
+    caniuse-lite "^1.0.30001335"
+    fraction.js "^4.2.0"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2205,6 +2217,16 @@ browserslist@^4.0.0, browserslist@^4.20.2, browserslist@^4.20.4:
     node-releases "^2.0.5"
     update-browserslist-db "^1.0.0"
 
+browserslist@^4.20.3:
+  version "4.21.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.1.tgz#c9b9b0a54c7607e8dc3e01a0d311727188011a00"
+  integrity sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==
+  dependencies:
+    caniuse-lite "^1.0.30001359"
+    electron-to-chromium "^1.4.172"
+    node-releases "^2.0.5"
+    update-browserslist-db "^1.0.4"
+
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -2319,6 +2341,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001317, caniuse-lite@^1.0.30001328, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001358.tgz#473d35dabf5e448b463095cab7924e96ccfb8c00"
   integrity sha512-hvp8PSRymk85R20bsDra7ZTCpSVGN/PAz9pSAjPSjKC+rNmnUk5vCRgJwiTT/O4feQ/yu/drvZYpKxxhbFuChw==
 
+caniuse-lite@^1.0.30001335, caniuse-lite@^1.0.30001359:
+  version "1.0.30001363"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001363.tgz#26bec2d606924ba318235944e1193304ea7c4f15"
+  integrity sha512-HpQhpzTGGPVMnCjIomjt+jvyUu8vNFo3TaDiZ/RcoTrlOq/5+tC8zHdsbgFB6MxmaY+jCpsH09aD80Bb4Ow3Sg==
+
 canvas@^2.6.1:
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.9.1.tgz#58ec841cba36cef0675bc7a74ebd1561f0b476b0"
@@ -2943,6 +2970,11 @@ electron-to-chromium@^1.4.164, electron-to-chromium@^1.4.84:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.167.tgz#72424aebc85df12c5331d37b1bcfd1ae01322c55"
   integrity sha512-lPHuHXBwpkr4RcfaZBKm6TKOWG/1N9mVggUpP4fY3l1JIUU2x4fkM8928smYdZ5lF+6KCTAxo1aK9JmqT+X71Q==
 
+electron-to-chromium@^1.4.172:
+  version "1.4.185"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.185.tgz#3432d7944f1c5fe20664bb45d9cced2151405ce2"
+  integrity sha512-9kV/isoOGpKkBt04yYNaSWIBn3187Q5VZRtoReq8oz5NY/A4XmU6cAoqgQlDp7kKJCZMRjWZ8nsQyxfpFHvfyw==
+
 emittery@^0.10.2:
   version "0.10.2"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
@@ -3446,6 +3478,11 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
+estree-walker@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
+  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
+
 estree-walker@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
@@ -3627,6 +3664,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+fraction.js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
+  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+
 fs-extra@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
@@ -5405,6 +5447,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
 normalize-url@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
@@ -6073,7 +6120,7 @@ postcss-value-parser@^3.0.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -6086,7 +6133,7 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.2.4, postcss@^8.4.13:
+postcss@^8.2.4, postcss@^8.4.13, postcss@^8.4.14:
   version "8.4.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
   integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
@@ -6476,6 +6523,11 @@ rollup-plugin-esbuild@^4.9.1:
     joycon "^3.0.1"
     jsonc-parser "^3.0.0"
 
+rollup-plugin-ignore-import@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-ignore-import/-/rollup-plugin-ignore-import-1.3.2.tgz#5379eac73d2c7e389ebeb5b3a90ae4c15c15e6c8"
+  integrity sha512-q7yH2c+PKVfb61+MTXqqyBHIgflikumC7OEB+OfQWNsSmDqE5FLZLeewcBGl1VDmjDjSXuALXsaBjyIsl3oNmQ==
+
 rollup-plugin-livereload@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.5.tgz#4747fa292a2cceb0c972c573d71b3d66b4252b37"
@@ -6483,6 +6535,13 @@ rollup-plugin-livereload@^2.0.0:
   dependencies:
     livereload "^0.9.1"
 
+rollup-plugin-scss@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-scss/-/rollup-plugin-scss-3.0.0.tgz#35ad0adc614217e0278e702d8a674820faa0929e"
+  integrity sha512-UldNaNHEon2a5IusHvj/Nnwc7q13YDvbFxz5pfNbHBNStxGoUNyM+0XwAA/UafJ1u8XRPGdBMrhWFthrrGZdWQ==
+  dependencies:
+    rollup-pluginutils "^2.3.3"
+
 rollup-plugin-serve@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-serve/-/rollup-plugin-serve-1.1.0.tgz#0654a57021a21b903340c69940f7463706e8288d"
@@ -6541,6 +6600,13 @@ rollup-plugin-ts@^3.0.1:
     ts-clone-node "^1.0.0"
     tslib "^2.4.0"
 
+rollup-pluginutils@^2.3.3:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
+  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
+  dependencies:
+    estree-walker "^0.6.1"
+
 rollup@^2.59.0, rollup@^2.75.5:
   version "2.75.7"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.75.7.tgz#221ff11887ae271e37dcc649ba32ce1590aaa0b9"
@@ -7350,6 +7416,14 @@ update-browserslist-db@^1.0.0:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-browserslist-db@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz#dbfc5a789caa26b1db8990796c2c8ebbce304824"
+  integrity sha512-jnmO2BEGUjsMOe/Fg9u0oczOe/ppIDZPebzccl1yDWGLFP16Pa1/RM5wEoKYPG2zstNcDuAStejyxsOuKINdGA==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"