@dr.pogodin/react-utils 1.8.5 → 1.10.0

package/config/babel/webpack.js

@@ -1,7 +1,5 @@
 /**
- * @category Configs
- * @module babel/webpack
- * @desc [Babel](https://babeljs.io/) preset for Webpack builds.
+ * [Babel](https://babeljs.io/) preset for Webpack builds.
  *
  * To include it into a Babel configuration:
  * ```json
@@ -139,11 +137,6 @@ function addStyling(config, env) {
 }
 
 /**
- * @static
- * @desc
- * ```js
- * import getPreset from '@dr.pogodin/react-utils/config/babel/webpack';
- * ```
  * Generates Babel preset for Webpack.
  * @param {object} babel Babel compiler.
  * @param {object} [ops] Preset options.

package/config/jest/default.js

@@ -1,37 +1,3 @@
-/**
- * @category Configs
- * @module jest
- * @desc Configuration for [Jest](https://facebook.github.io/jest/)
- * (JavaScript testing framework).
- *
- * **Beware:** It assumes you use recommended code structure in the project
- * using it: Jest configs in `config/jest` folder, the source code in `src`
- * folder, the build outputs in `build` folder, _etc._ With a different
- * project structure, it might be easier to compose necessary Jest config
- * from scratch.
- *
- * To set up create these two files in `config/jest` folder of your project:
- * ```js
- * // config/jest/config.js
- *
- * const config = require('@dr.pogodin/react-utils/config/jest/default');
- * // You can tune config as necessary here.
- * module.exports = config;
- * ```
- * ```js
- * // config/jest/setup.js
- *
- * import '@dr.pogodin/react-utils/config/jest/setup';
- * ```
- * Then point that config in Jest command, like so:
- * ```
- * jest --config config/jest/config.js
- * ```
- *
- * The current Jest environment setup script provided by `react-utils`
- * only loads `raf/polyfill`, required by React.
- */
-
 const path = require('path');
 
 const globalLibDir = path.resolve(process.execPath, '../../lib/node_modules');

package/config/shared/utils.js

@@ -1,111 +1,20 @@
 /**
  * Misc utilities reusable in different JS-format config files.
  */
-/* eslint-disable import/no-extraneous-dependencies */
 
-const fs = require('fs');
-const path = require('path');
-const cssesc = require('cssesc');
+const {
+  generateScopedNameFactory,
+} = require('@dr.pogodin/babel-plugin-react-css-modules/utils');
 
-const { interpolateName } = require('loader-utils');
+const generateScopedNameDev = generateScopedNameFactory(
+  '[package]___[path][name]___[local]___[hash:base64:6]',
+);
 
-/**
- * Normalizes file path to OS-independent format (adopted from css-loader).
- * @ignore
- * @param {string} file
- * @return {string}
- */
-function normalizePath(file) {
-  return path.sep === '\\' ? file.replace(/\\/g, '/') : file;
-}
-
-// eslint-disable-next-line no-control-regex
-const filenameReservedRegex = /[<>:"/\\|?*]/g;
-// eslint-disable-next-line no-control-regex
-const reControlChars = /[\u0000-\u001f\u0080-\u009f]/g;
-
-function escapeLocalident(localident) {
-  return cssesc(
-    localident
-      // For `[hash]` placeholder
-      .replace(/^((-?[0-9])|--)/, '_$1')
-      .replace(filenameReservedRegex, '-')
-      .replace(reControlChars, '-')
-      .replace(/\./g, '-'),
-    { isIdentifier: true },
-  );
-}
-
-/**
- * Returns the name of package containing the folder; i.e. it recursively looks
- * up from the folder for the closest package.json file, and returns the name in
- * that file. It also caches the results from previously fisited folders.
- * @ignore
- * @param {string} folder
- * @return {string}
- */
-function getPackageInfo(folder) {
-  let res = getPackageInfo.cache[folder];
-  if (!res) {
-    const p = path.resolve(folder, 'package.json');
-    /* eslint-disable global-require, import/no-dynamic-require */
-    res = fs.existsSync(p) ? {
-      name: require(p).name,
-      root: folder,
-    } : getPackageInfo(path.resolve(folder, '..'));
-    /* eslint-enable global-require, import/no-dynamic-require */
-    getPackageInfo.cache[folder] = res;
-  }
-  return res;
-}
-getPackageInfo.cache = {};
-
-function getLocalIdent(
-  { resourcePath },
-  localIdentName,
-  localName,
-  options = {},
-) {
-  const packageInfo = getPackageInfo(path.dirname(resourcePath));
-  const request = normalizePath(path.relative(packageInfo.root, resourcePath));
-  return interpolateName({
-    resourcePath,
-  }, localIdentName, {
-    ...options,
-    content: `${packageInfo.name + request}\x00${localName}`,
-    context: packageInfo.root,
-  }).replace(/\[package\]/gi, packageInfo.name)
-    .replace(/\[local\]/gi, localName)
-    .replace(/@/g, '-');
-}
-
-function generateScopedNameDev(localName, assetPath) {
-  // Mind: "css-loader" additionally escapes identifiers returned by
-  // getLocalIdent(); the babel plugins - don't, thus we need to escape
-  // ourselves.
-  return escapeLocalident(
-    getLocalIdent(
-      { resourcePath: assetPath },
-      '[package]___[path][name]___[local]___[hash:base64:6]',
-      localName,
-      {},
-    ),
-  );
-}
-
-function generateScopedNameProd(localName, assetPath) {
-  return escapeLocalident(
-    getLocalIdent(
-      { resourcePath: assetPath },
-      '[hash:base64:6]',
-      localName,
-      {},
-    ),
-  );
-}
+const generateScopedNameProd = generateScopedNameFactory(
+  '[hash:base64:6]',
+);
 
 module.exports = {
   generateScopedNameDev,
   generateScopedNameProd,
-  getLocalIdent,
 };

package/config/stylelint/default.js

@@ -1,23 +1,5 @@
-/**
- * @category Configs
- * @module stylelint
- * @desc
- * Configuration for [Stylelint](https://stylelint.io) (SCSS code linter).
- * At the moment a single Stylelint configuration is provided by `react-utils`,
- * and it just matches the
- * [standard Stylelint config](https://github.com/stylelint/stylelint-config-standard)
- * with a few extra options to ignore some valid rules and selectors not known
- * to Stylelint: `@content`, `@extend`, `@for`, `@include`, `@mixin`, `:global`.
- *
- * To use it, just create the following `.stylelintrc`:
- * ```json
- * {
- *   "extends": "./node_modules/@dr.pogodin/react-utils/config/stylelint/default"
- * }
- * ```
- */
 module.exports = {
-  extends: 'stylelint-config-standard',
+  extends: 'stylelint-config-standard-scss',
   rules: {
     'at-rule-no-unknown': [true, {
       ignoreAtRules: [
@@ -30,6 +12,7 @@ module.exports = {
         'use',
       ],
     }],
+    'selector-class-pattern': null,
     'selector-pseudo-class-no-unknown': [
       true, { ignorePseudoClasses: ['global'] },
     ],

package/config/webpack/app-base.js

@@ -15,14 +15,11 @@ const SM = require('sitemap');
 const { DefinePlugin, ProgressPlugin } = require('webpack');
 const WorkboxPlugin = require('workbox-webpack-plugin');
 
-const { getLocalIdent } = require('../shared/utils');
+const {
+  getLocalIdent,
+} = require('@dr.pogodin/babel-plugin-react-css-modules/utils');
 
 /**
- * @func configFactory
- * @desc
- * ```js
- * const configFactory = require('@dr.pogodin/react-utils/config/webpack/app-base');
- * ```
  * Creates a new Webpack config object, and performs some auxiliary operations
  * on the way.
  * @param {object} ops Configuration params. This allows to modify some

package/config/webpack/app-development.js

@@ -13,29 +13,6 @@ const { merge } = require('webpack-merge');
 
 const baseFactory = require('./app-base');
 
-/**
- * @func configFactory
- * @desc
- * ```js
- * const configFactory = require('@dr.pogodin/react-utils/config/webpack/app-development');
- * ```
- * Creates development Webpack configuration for applications. It is based on
- * {@link module:webpack/app-base webpack/app-base}, and differs form that in
- * the following:
- * - *development* Babel environment is enforced, and sets
- *   `[path][name]___[local]___[hash:base64:6]` as the default value of
- *   `cssLocalIdent` argument for the base config.
- *   - [`webpack-hot-middleware/client?reload=true`](https://github.com/glenjamin/webpack-hot-middleware)
- * - Emulates the following environment variables:
- *   - **`BABEL_ENV`** — It is set to *development* to inform any
- *     interested code that it is running in dev mode;
- *   - **`NODE_ENV`** — It is set to *development*.
- * - Adds the following plugins:
- *   - [HotModuleReplacementPlugin](https://webpack.js.org/plugins/hot-module-replacement-plugin/);
- *   - [NamedModulesPlugin](https://webpack.js.org/plugins/named-modules-plugin/).
- * @param {object} ops Config options, the saeme options as in the base config
- * are accepted.
- */
 module.exports = function configFactory(ops) {
   const o = _.defaults(_.clone(ops), {
     cssLocalIdent: '[package]___[path][name]___[local]___[hash:base64:6]',

package/config/webpack/app-production.js

@@ -10,26 +10,6 @@ const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const baseFactory = require('./app-base');
 
-/**
- * @func factoryConfig
- * @desc
- * ```js
- * const configFactory = require('@dr.pogodin/react-utils/config/webpack/app-production');
- * ```
- * Creates a new production Webpack config, and performs some auxiliary
- * operations on the way. This configuration is based on
- * {@link module:webpack/app-base webpack/app-base}
- * and it differs from that in the following:
- * - *production* Babel environment is enforced;
- * - Emulates the following environment variables:
- *   - **`BABEL_ENV`** — It is set to *production*;
- *   - **`NODE_ENV`** — It is set to *production*.
- * - Adds the following plugins:
- *   - [CSS Minimizer Webpack Plugin](https://www.npmjs.com/package/css-minimizer-webpack-plugin);
- *   - [UglifyJsPlugin](https://webpack.js.org/plugins/uglifyjs-webpack-plugin/).
- * @param {object} ops Accepts same options as the base config.
- * @return {object}
- */
 module.exports = function configFactory(ops) {
   const entry = [
     '@dr.pogodin/react-utils/build/production/client/init',

package/config/webpack/lib-base.js

@@ -9,73 +9,10 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 const { ProgressPlugin } = require('webpack');
 
-const { getLocalIdent } = require('../shared/utils');
+const {
+  getLocalIdent,
+} = require('@dr.pogodin/babel-plugin-react-css-modules/utils');
 
-/**
- * @func configFactory
- * @desc
- * ```js
- * const configFactory = require('@dr.pogodin/react-utils/config/webpack/lib-base');
- * ```
- * Creates a new Webpack config object.
- * @param {object} ops Configuration params. This allows to conveniently set
- * options that should be customized for specific libraries.
- * @param {string} ops.babelEnv Babel environment to use for Babel compilation
- * step;
- * @param {object} [ops.babelLoaderOptions] Overrides for default Babel options
- * of JSX and SVG files loader.
- * @param {string} ops.context Base URL for resolution of relative config paths.
- * @param {string} [ops.cssLocalIdent=hash:base64:6] The template for CSS
- * classnames generation by the Webpack's css-loader; it is passed into
- * the localIdentName param of the loader. It should match the corresponding
- * setting in the Babel config.
- * @param {string|string[]} ops.entry Entry point(s). The config may prepend
- * them by necessary polyfills.
- * @param {string} ops.library Name of the library to be build. It is important
- * for proper resolution of the library assets.
- * @param {string} [ops.outputPath=build] Output path.
- * @param {string} [ops.mode] [Webpack mode](https://webpack.js.org/concepts/mode/).
- * @return {Object}
- * - The generated config will opt to:
- *   - References to the font assets (EOF, OTF, SVG, TTF, WOFF, WOFF2 files from
- *     the `src/assets/fonts` folder of the library source code) will rewritten
- *     to `LIBRARY_NAME/src/assets/fonts/FILENAME.FILE_EXTENSION`
- *     so that the host package of the library will be able to find and bundle
- *     them;
- * - Bundle SCSS files from any folder of your source code, beside
- *  `node_modules` and its subfolders. The files will be compiled,
- *   bundled and extracted into the `build/{type}/style.css`
- *   bundles;
- * - Bundle JS, JSX, and SVG files; they will be compiled into the
- *   `build/{type}/web.bundle.js` bundles, using the Babel environment
- *    specified in the factory options, and
- *    [`config/babel/webpack`](./babel-config.js#webpack) config.
- *
- * - The following path aliases will be automatically set:
- *   - **`assets`** for `[CONTEXT]/src/assets`;
- *   - **`components`** for `[CONTEXT]/src/shared/components`;
- *   - **`fonts`** for `[CONTEXT]/src/assets/fonts`;
- *   - **`styles`** for `[CONTEXT]/src/styles`.
- *
- * Also `resolve.symlinks` Webpack option is set to *false* to avoid problems
- * with resolution of assets from packages linked with `npm link`.
- *
- * - The following packages are declared as externals:
- *   - `@babel/runtime`
- *   - `@dr.pogodin/react-global-state`
- *   - `@dr.pogodin/react-themes`
- *   - `@dr.pogodin/react-utils`
- *   - `axios`
- *   - `dayjs`
- *   - `lodash`
- *   - `prop-types`
- *   - `react`
- *   - `react-dom`
- *   - `react-helmet`
- *   - `react-router-dom`
- *   - `shortid`
- *   - `url-parse`
- */
 module.exports = function configFactory(ops) {
   return {
     context: ops.context,

package/config/webpack/lib-development.js

@@ -11,16 +11,6 @@ const { merge } = require('webpack-merge');
 
 const baseFactory = require('./lib-base');
 
-/**
- * @func configFactory
- * @desc
- * Extends and tunes {@link module:webpack/lib-development lib-development}
- * to use *development* Babel environment, and sets
- * `[path][name]___[local]___[hash:base64:6]`as
- * the template for generated CSS classnames.
- * @param {object} ops
- * @return {object}
- */
 module.exports = function configFactory(ops) {
   return merge(
     baseFactory({

package/config/webpack/lib-production.js

@@ -12,15 +12,6 @@ const { merge } = require('webpack-merge');
 
 const baseFactory = require('./lib-base');
 
-/**
- * @func configFactory
- * @desc
- * Extends and tunes {@link module:webpack/lib-production lib-production}
- * to use *production* Babel environment, and sets `[hash:base64:6]` as
- * the template for generated CSS classnames.
- * @param {object} ops
- * @return {object}
- */
 module.exports = function configFactory(ops) {
   const baseConfig = baseFactory({
     ...ops,

package/index.js

@@ -7,15 +7,26 @@
 /* eslint-disable global-require, import/no-dynamic-require,
   import/no-unresolved, no-eval */
 
-const IS_NODE = typeof process !== 'undefined'
-  && process.versions && process.versions.node;
+let lib;
 
-/* Note: The check must be placed directly inside if(..) so that webpack
- * is able to drop out unnecessary branch during the optimization. */
-if (process.env.NODE_ENV === 'production') {
-  module.exports = IS_NODE ? eval('require')('./build/production')
-    : require('./build/production/web.bundle');
-} else {
-  module.exports = IS_NODE ? eval('require')('./build/development')
-    : require('./build/development/web.bundle');
+try {
+  if (process.versions.node) {
+    lib = process.env.NODE_ENV === 'production'
+      ? './build/production' : './build/development';
+    lib = eval('require')(lib);
+  }
+} catch (error) {
+  lib = undefined;
 }
+
+if (!lib) {
+  // NOTE: process.env.NODE_ENV check must be done explicitly here to ensure
+  // that webpack is able to optimize out the unncessary branch.
+  if (process.env.NODE_ENV === 'production') {
+    lib = require('./build/production/web.bundle');
+  } else {
+    lib = require('./build/development/web.bundle');
+  }
+}
+
+module.exports = lib;

package/package.json

@@ -8,12 +8,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
-    "@dr.pogodin/babel-plugin-react-css-modules": "^6.2.1",
-    "@dr.pogodin/react-global-state": "^0.6.2",
+    "@dr.pogodin/babel-plugin-react-css-modules": "^6.4.1",
+    "@dr.pogodin/react-global-state": "^0.6.4",
     "@dr.pogodin/react-themes": "^1.3.3",
     "autoprefix": "^1.0.1",
-    "axios": "^0.21.4",
-    "commander": "^8.2.0",
+    "axios": "^0.23.0",
+    "commander": "^8.3.0",
     "compression": "^1.7.4",
     "config": "^3.3.6",
     "cookie-parser": "^1.4.5",
@@ -35,6 +35,7 @@
     "react-router-dom": "^5.3.0",
     "request-ip": "^2.1.3",
     "rimraf": "^3.0.2",
+    "serialize-javascript": "^6.0.0",
     "serve-favicon": "^2.5.0",
     "source-map-support": "^0.5.20",
     "url-parse": "^1.5.3",
@@ -43,58 +44,56 @@
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.15.5",
-    "@babel/node": "^7.15.4",
+    "@babel/cli": "^7.15.7",
+    "@babel/core": "^7.15.8",
+    "@babel/node": "^7.15.8",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.6",
+    "@babel/plugin-transform-runtime": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
     "@babel/types": "^7.15.6",
     "@dr.pogodin/babel-plugin-css-modules-transform": "^1.10.0",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.1.1",
     "@dr.pogodin/babel-preset-svgr": "^1.3.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "autoprefixer": "^10.3.4",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
+    "autoprefixer": "^10.3.7",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.2.0",
-    "babel-loader": "^8.2.2",
+    "babel-jest": "^27.3.1",
+    "babel-loader": "^8.2.3",
     "babel-plugin-module-resolver": "^4.1.0",
-    "better-docs": "^2.3.2",
-    "core-js": "^3.17.3",
-    "css-loader": "^6.2.0",
-    "css-minimizer-webpack-plugin": "^3.0.2",
+    "core-js": "^3.18.3",
+    "css-loader": "^6.4.0",
+    "css-minimizer-webpack-plugin": "^3.1.1",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-import-resolver-babel-module": "^5.3.1",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.4.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jest": "^25.2.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.2.0",
-    "jsdoc": "^3.6.7",
-    "mini-css-extract-plugin": "^2.3.0",
+    "jest": "^27.3.1",
+    "mini-css-extract-plugin": "^2.4.3",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
-    "postcss": "^8.3.6",
-    "postcss-loader": "^6.1.1",
-    "postcss-scss": "^4.0.0",
+    "postcss": "^8.3.11",
+    "postcss-loader": "^6.2.0",
+    "postcss-scss": "^4.0.1",
     "pretty": "^2.0.0",
     "react-refresh": "^0.10.0",
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
     "resolve-url-loader": "^4.0.0",
-    "sass": "^1.39.2",
-    "sass-loader": "^12.1.0",
+    "sass": "^1.43.3",
+    "sass-loader": "^12.2.0",
     "sitemap": "^7.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-standard": "^22.0.0",
+    "stylelint": "^14.0.0",
+    "stylelint-config-standard-scss": "^2.0.0",
     "supertest": "^6.1.6",
-    "webpack": "^5.52.1",
-    "webpack-dev-middleware": "^5.1.0",
-    "webpack-hot-middleware": "^2.25.0",
+    "webpack": "^5.59.1",
+    "webpack-dev-middleware": "^5.2.1",
+    "webpack-hot-middleware": "^2.25.1",
     "webpack-merge": "^5.8.0",
     "workbox-core": "^6.3.0",
     "workbox-precaching": "^6.3.0",
@@ -126,12 +125,11 @@
   },
   "scripts": {
     "build": "rimraf build && node bin/build -t development --lib && node bin/build -t production --lib",
-    "docs": "rimraf docs && jsdoc -c config/jsdoc/config.js",
     "jest": "NODE_CONFIG_ENV=test jest --no-cache -w 1 --config config/jest/default.js",
     "lint": "npm run lint:js && npm run lint:scss",
     "lint:js": "eslint --ext .js,.jsx .",
-    "lint:scss": "stylelint -- **/*.{css,scss} --syntax scss",
+    "lint:scss": "stylelint -- **/*.{css,scss}",
     "test": "npm run lint && npm run jest"
   },
-  "version": "1.8.5"
+  "version": "1.10.0"
 }

package/src/index.js

@@ -4,73 +4,18 @@ import { isomorphy, webpack } from 'utils';
 
 let server = null; // eslint-disable-line import/no-mutable-exports
 if (isomorphy.IS_SERVER_SIDE) {
-  const path = webpack.requireWeak('path');
-  server = webpack.requireWeak(path.resolve(__dirname, './server'));
+  try {
+    const path = webpack.requireWeak('path');
+    server = webpack.requireWeak(path.resolve(__dirname, './server'));
+  } catch (error) {
+    server = null;
+  }
 }
 
-/**
- * @category Utilities
- * @module _
- * @desc
- * ```js
- * import { _ } from '@dr.pogodin/react-utils';
- * ```
- * `_` is just an alias for [lodash](https://lodash.com/docs) library,
- * which provides various generic JS helpers.
- */
 export { default as _ } from 'lodash';
-
-/**
- * @category Utilities
- * @module api
- * @desc
- * ```js
- * import { api } from '@dr.pogodin/react-utils';
- * ```
- * `api` is just an alias for [`axios`](https://www.npmjs.com/package/axios)
- * library, which provides a great HTTP(S) client.
- */
 export { default as api } from 'axios';
-
-/**
- * @category Utilities
- * @module PT
- * @desc
- * ```js
- * import { PT } from '@dr.pogodin/react-utils';
- * ```
- * `PT` (short for `prop-types`) is an alias for
- * [prop-types](https://www.npmjs.com/package/prop-types) library,
- * which facilitates runtime type checks for React.
- */
 export * as PT from 'prop-types';
 
-/**
- * @category Utilities
- * @module ReactGlobalState
- * @desc
- * ```jsx
- * import {
- *   getGlobalState,
- *   GlobalStateProvider,
- *   useAsyncCollection,
- *   useAsyncData,
- *   useGlobalState,
- * } from '@dr.pogodin/react-utils';
- * ```
- * For convenience, `react-utils` re-exports components and hooks provided by
- * [react-global-state](https://dr.pogodin.studio/docs/react-global-state/index.html)
- * library, which  is a state of the art library for global state and
- * asynchronous data managment in React applications, powered by hooks and
- * Context API. It is simple, efficient, and with a full server-side rendering
- * (SSR) support.
- *
- * The standard {@link client} and {@link server} automatically wrap your
- * app into `<GlobalStateProvider>`, also `server` wires `react-global-state` to
- * SSR setup, and also exposes the actual incoming HTTP request object via SSR
- * context, to which it attaches it as `req` field.
- */
-
 export {
   getGlobalState,
   GlobalStateProvider,

package/src/styles/_mixins/fonts.scss

@@ -12,12 +12,12 @@
  */
 @mixin font-family($font-name, $font-weight, $font-style, $font-url, $font-file) {
   @font-face {
-    font-family: '#{$font-name}';
+    font-family: "#{$font-name}";
     font-display: block;
     font-weight: $font-weight;
     font-style: $font-style;
-    src: url('#{$font-url}#{$font-file}.eot');
-    src: url('#{$font-url}#{$font-file}.eot?#iefix') format('embedded-opentype'), url('#{$font-url}#{$font-file}.woff') format('woff'), url('#{$font-url}#{$font-file}.ttf') format('truetype'), url('#{$font-url}#{$font-file}.svg##{$font-name}') format('svg');
+    src: url("#{$font-url}#{$font-file}.eot");
+    src: url("#{$font-url}#{$font-file}.eot?#iefix") format("embedded-opentype"), url("#{$font-url}#{$font-file}.woff") format("woff"), url("#{$font-url}#{$font-file}.ttf") format("truetype"), url("#{$font-url}#{$font-file}.svg##{$font-name}") format("svg");
   }
 }
 
@@ -35,6 +35,6 @@
     font-display: block;
     font-style: $font-style;
     font-weight: $font-weight;
-    src: url('#{$font-url}.ttf') format('truetype');
+    src: url("#{$font-url}.ttf") format("truetype");
   }
 }