@emulsify/core 1.2.1 → 1.3.1

package/.history/config/webpack/loaders_20240730152304.js

@@ -0,0 +1,87 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const globImporter = require('node-sass-glob-importer');
+const fs = require('fs-extra');
+
+let babelConfig;
+let postcssConfig;
+
+// Check if custom babel config is available.
+if (fs.existsSync('./config/babel.config.js')) {
+  babelConfig = './config/babel.config.js';
+} else {
+  babelConfig = './node_modules/@emulsify/core/config/babel.config.js';
+}
+
+// Check if custom postcss config is available.
+if (fs.existsSync('./config/postcss.config.js')) {
+  postcssConfig = './config/postcss.config.js';
+} else {
+  postcssConfig = './node_modules/@emulsify/core/config/postcss.config.js';
+}
+
+const JSLoader = {
+  test: /^(?!.*\.(stories|component)\.js$).*\.js$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader',
+  options: {
+    configFile: babelConfig,
+  },
+};
+
+const ImageLoader = {
+  test: /\.(jpe?g|png|gif)$/i,
+  exclude: /icons\/.*\.svg$/,
+  loader: 'file-loader',
+};
+
+const CSSLoader = {
+  test: /\.s[ac]ss$/i,
+  exclude: /node_modules/,
+  use: [
+    MiniCssExtractPlugin.loader,
+    {
+      loader: 'css-loader',
+      options: {
+        sourceMap: true,
+        url: false,
+      },
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        sourceMap: true,
+        postcssOptions: {
+          config: postcssConfig,
+          plugins: [['autoprefixer']],
+        },
+      },
+    },
+    {
+      loader: 'sass-loader',
+      options: {
+        sourceMap: true,
+        sassOptions: {
+          importer: globImporter(),
+          outputStyle: 'compressed',
+        },
+      },
+    },
+  ],
+};
+
+const SVGSpriteLoader = {
+  test: /icons\/.*\.svg$/, // your icons directory
+  loader: 'svg-sprite-loader',
+  options: {
+    extract: true,
+    runtimeCompat: true,
+    spriteFilename: './icons.svg',
+  },
+};
+
+module.exports = {
+  JSLoader,
+  CSSLoader,
+  SVGSpriteLoader,
+  ImageLoader,
+};

package/.history/config/webpack/loaders_20240730152315.js

@@ -0,0 +1,87 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const globImporter = require('node-sass-glob-importer');
+const fs = require('fs-extra');
+
+let babelConfig;
+let postcssConfig;
+
+// Check if custom babel config is available.
+if (fs.existsSync('./config/babel.config.js')) {
+  babelConfig = './config/babel.config.js';
+} else {
+  babelConfig = './node_modules/@emulsify/core/config/babel.config.js';
+}
+
+// Check if custom postcss config is available.
+if (fs.existsSync('./config/postcss.config.js')) {
+  postcssConfig = './config/postcss.config.js';
+} else {
+  postcssConfig = './node_modules/@emulsify/core/config/postcss.config.js';
+}
+
+const JSLoader = {
+  test: /^(?!.*\.(stories|component)\.js$).*\.js$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader',
+  options: {
+    configFile: babelConfig,
+  },
+};
+
+const ImageLoader = {
+  test: /\.(jpe?g|png|gif|svg)$/i,
+  exclude: /icons\/.*\.svg$/,
+  loader: 'file-loader',
+};
+
+const CSSLoader = {
+  test: /\.s[ac]ss$/i,
+  exclude: /node_modules/,
+  use: [
+    MiniCssExtractPlugin.loader,
+    {
+      loader: 'css-loader',
+      options: {
+        sourceMap: true,
+        url: false,
+      },
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        sourceMap: true,
+        postcssOptions: {
+          config: postcssConfig,
+          plugins: [['autoprefixer']],
+        },
+      },
+    },
+    {
+      loader: 'sass-loader',
+      options: {
+        sourceMap: true,
+        sassOptions: {
+          importer: globImporter(),
+          outputStyle: 'compressed',
+        },
+      },
+    },
+  ],
+};
+
+const SVGSpriteLoader = {
+  test: /icons\/.*\.svg$/, // your icons directory
+  loader: 'svg-sprite-loader',
+  options: {
+    extract: true,
+    runtimeCompat: true,
+    spriteFilename: './icons.svg',
+  },
+};
+
+module.exports = {
+  JSLoader,
+  CSSLoader,
+  SVGSpriteLoader,
+  ImageLoader,
+};

package/.history/config/webpack/{loaders_20240401184511.js → loaders_20240806083911.js}

@@ -9,14 +9,14 @@ let postcssConfig;
 if (fs.existsSync('./config/babel.config.js')) {
   babelConfig = './config/babel.config.js';
 } else {
-  babelConfig = './node_modules/emulsify-core/config/babel.config.js';
+  babelConfig = './node_modules/@emulsify/core/config/babel.config.js';
 }
 
 // Check if custom postcss config is available.
 if (fs.existsSync('./config/postcss.config.js')) {
   postcssConfig = './config/postcss.config.js';
 } else {
-  postcssConfig = './node_modules/emulsify-core/config/postcss.config.js';
+  postcssConfig = './node_modules/@emulsify/core/config/postcss.config.js';
 }
 
 const JSLoader = {
@@ -59,6 +59,7 @@ const CSSLoader = {
     {
       loader: 'sass-loader',
       options: {
+        api: "legacy",
         sourceMap: true,
         sassOptions: {
           importer: globImporter(),

package/.history/config/webpack/loaders_20240806084032.js

@@ -0,0 +1,88 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const globImporter = require('node-sass-glob-importer');
+const fs = require('fs-extra');
+
+let babelConfig;
+let postcssConfig;
+
+// Check if custom babel config is available.
+if (fs.existsSync('./config/babel.config.js')) {
+  babelConfig = './config/babel.config.js';
+} else {
+  babelConfig = './node_modules/@emulsify/core/config/babel.config.js';
+}
+
+// Check if custom postcss config is available.
+if (fs.existsSync('./config/postcss.config.js')) {
+  postcssConfig = './config/postcss.config.js';
+} else {
+  postcssConfig = './node_modules/@emulsify/core/config/postcss.config.js';
+}
+
+const JSLoader = {
+  test: /^(?!.*\.(stories|component)\.js$).*\.js$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader',
+  options: {
+    configFile: babelConfig,
+  },
+};
+
+const ImageLoader = {
+  test: /\.(png|svg|jpg|gif)$/i,
+  exclude: /icons\/.*\.svg$/,
+  loader: 'file-loader',
+};
+
+const CSSLoader = {
+  test: /\.s[ac]ss$/i,
+  exclude: /node_modules/,
+  use: [
+    MiniCssExtractPlugin.loader,
+    {
+      loader: 'css-loader',
+      options: {
+        sourceMap: true,
+        url: false,
+      },
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        sourceMap: true,
+        postcssOptions: {
+          config: postcssConfig,
+          plugins: [['autoprefixer']],
+        },
+      },
+    },
+    {
+      loader: 'sass-loader',
+      options: {
+        api: 'legacy',
+        sourceMap: true,
+        sassOptions: {
+          importer: globImporter(),
+          outputStyle: 'compressed',
+        },
+      },
+    },
+  ],
+};
+
+const SVGSpriteLoader = {
+  test: /icons\/.*\.svg$/, // your icons directory
+  loader: 'svg-sprite-loader',
+  options: {
+    extract: true,
+    runtimeCompat: true,
+    spriteFilename: './icons.svg',
+  },
+};
+
+module.exports = {
+  JSLoader,
+  CSSLoader,
+  SVGSpriteLoader,
+  ImageLoader,
+};

package/.history/config/webpack/plugins_20240730152746.js

@@ -0,0 +1,77 @@
+/* eslint-disable no-underscore-dangle */
+const path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
+const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const glob = require('glob');
+
+const imagePath = path.resolve(__dirname, '../../../../../assets/images');
+
+const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: '[id].css',
+});
+
+const ImageminPlugin = new ImageMinimizerPlugin({
+  minimizer: {
+    implementation: ImageMinimizerPlugin.imageminMinify,
+    options: {
+      // Lossless optimization with custom option
+      // Feel free to experiment with options for better result for you
+      plugins: [
+        ["gifsicle", { interlaced: true }],
+        ["jpegtran", { progressive: true }],
+        ["optipng", { optimizationLevel: 5 }],
+        // Svgo configuration here https://github.com/svg/svgo#configuration
+        [
+          "svgo",
+          {
+            plugins: [
+              {
+                name: "preset-default",
+                params: {
+                  overrides: {
+                    removeViewBox: false,
+                    addAttributesToSVGElement: {
+                      params: {
+                        attributes: [
+                          { xmlns: "http://www.w3.org/2000/svg" },
+                        ],
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      ],
+    },
+  },
+});
+
+const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
+  plainSprite: true,
+});
+
+const ProgressPlugin = new webpack.ProgressPlugin();
+
+module.exports = {
+  ProgressPlugin,
+  MiniCssExtractPlugin,
+  ImageminPlugin,
+  SpriteLoaderPlugin,
+  CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
+    cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      '!*.{png,jpg,gif,svg}',
+    ],
+  }),
+};

package/.history/config/webpack/plugins_20240730152818.js

@@ -0,0 +1,76 @@
+/* eslint-disable no-underscore-dangle */
+const path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
+const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const glob = require('glob');
+
+const imagePath = path.resolve(__dirname, '../../../../../assets/images');
+
+const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: '[id].css',
+});
+
+const ImageminPlugin = new ImageMinimizerPlugin({
+  minimizer: {
+    implementation: ImageMinimizerPlugin.imageminMinify,
+    options: {
+      // Lossless optimization with custom option
+      plugins: [
+        ["gifsicle", { interlaced: true }],
+        ["jpegtran", { progressive: true }],
+        ["optipng", { optimizationLevel: 5 }],
+        // Svgo configuration here https://github.com/svg/svgo#configuration
+        [
+          "svgo",
+          {
+            plugins: [
+              {
+                name: "preset-default",
+                params: {
+                  overrides: {
+                    removeViewBox: false,
+                    addAttributesToSVGElement: {
+                      params: {
+                        attributes: [
+                          { xmlns: "http://www.w3.org/2000/svg" },
+                        ],
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      ],
+    },
+  },
+});
+
+const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
+  plainSprite: true,
+});
+
+const ProgressPlugin = new webpack.ProgressPlugin();
+
+module.exports = {
+  ProgressPlugin,
+  MiniCssExtractPlugin,
+  ImageminPlugin,
+  SpriteLoaderPlugin,
+  CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
+    cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      '!*.{png,jpg,gif,svg}',
+    ],
+  }),
+};

package/.history/config/webpack/plugins_20240730153144.js

@@ -0,0 +1,76 @@
+/* eslint-disable no-underscore-dangle */
+const path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
+const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const glob = require('glob');
+
+const imagePath = path.resolve(__dirname, '../../../../../assets/images');
+
+const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: '[id].css',
+});
+
+const ImageminPlugin = new ImageMinimizerPlugin({
+  minimizer: {
+    implementation: ImageMinimizerPlugin.imageminMinify,
+    options: {
+      // Lossless optimization with custom option
+      plugins: [
+        ['gifsicle', { interlaced: true }],
+        ['jpegtran', { progressive: true }],
+        ['optipng', { optimizationLevel: 5 }],
+        // Svgo configuration here https://github.com/svg/svgo#configuration
+        [
+          "svgo",
+          {
+            plugins: [
+              {
+                name: "preset-default",
+                params: {
+                  overrides: {
+                    removeViewBox: false,
+                    addAttributesToSVGElement: {
+                      params: {
+                        attributes: [
+                          { xmlns: "http://www.w3.org/2000/svg" },
+                        ],
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      ],
+    },
+  },
+});
+
+const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
+  plainSprite: true,
+});
+
+const ProgressPlugin = new webpack.ProgressPlugin();
+
+module.exports = {
+  ProgressPlugin,
+  MiniCssExtractPlugin,
+  ImageminPlugin,
+  SpriteLoaderPlugin,
+  CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
+    cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      '!*.{png,jpg,gif,svg}',
+    ],
+  }),
+};

package/.history/config/webpack/plugins_20240730153215.js

@@ -0,0 +1,76 @@
+/* eslint-disable no-underscore-dangle */
+const path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
+const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const glob = require('glob');
+
+const imagePath = path.resolve(__dirname, '../../../../../assets/images');
+
+const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: '[id].css',
+});
+
+const ImageminPlugin = new ImageMinimizerPlugin({
+  minimizer: {
+    implementation: ImageMinimizerPlugin.imageminMinify,
+    options: {
+      // Lossless optimization with custom option
+      plugins: [
+        ['gifsicle', { interlaced: true }],
+        ['jpegtran', { progressive: true }],
+        ['optipng', { optimizationLevel: 5 }],
+        // Svgo configuration here https://github.com/svg/svgo#configuration
+        [
+          "svgo",
+          {
+            plugins: [
+              {
+                name: "preset-default",
+                params: {
+                  overrides: {
+                    removeViewBox: false,
+                    addAttributesToSVGElement: {
+                      params: {
+                        attributes: [
+                          { xmlns: "http://www.w3.org/2000/svg" },
+                        ],
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      ],
+    },
+  },
+});
+
+const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
+  plainSprite: true,
+});
+
+const ProgressPlugin = new webpack.ProgressPlugin();
+
+module.exports = {
+  ProgressPlugin,
+  MiniCssExtractPlugin,
+  ImageminPlugin,
+  SpriteLoaderPlugin,
+  CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
+    cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      '!*.{png,jpg,gif,svg}',
+    ],
+  }),
+};

package/.history/config/webpack/{webpack.common_20240607090919.js → webpack.common_20240730152548.js}

@@ -4,8 +4,8 @@ const loaders = require('./loaders');
 const plugins = require('./plugins');
 
 const webpackDir = path.resolve(__dirname);
-const rootDir = path.resolve(__dirname, '../../../..');
-const distDir = path.resolve(__dirname, '../../../../dist');
+const rootDir = path.resolve(__dirname, '../../../../..');
+const distDir = path.resolve(__dirname, '../../../../../dist');
 
 // Glob pattern for scss files that ignore file names prefixed with underscore.
 const scssPattern = path.resolve(rootDir, 'components/**/!(_*).scss');
@@ -60,11 +60,13 @@ module.exports = {
   },
   plugins: [
     plugins.MiniCssExtractPlugin,
-    plugins.ImageminPlugin,
     plugins.SpriteLoaderPlugin,
     plugins.ProgressPlugin,
     plugins.CleanWebpackPlugin,
   ],
+  optimization: [
+    plugins.ImageminPlugin,
+  ],
   output: {
     path: distDir,
     filename: '[name].js',

package/.history/config/webpack/webpack.common_20240730152652.js

@@ -0,0 +1,76 @@
+const path = require('path');
+const glob = require('glob');
+const loaders = require('./loaders');
+const plugins = require('./plugins');
+
+const webpackDir = path.resolve(__dirname);
+const rootDir = path.resolve(__dirname, '../../../../..');
+const distDir = path.resolve(__dirname, '../../../../../dist');
+
+// Glob pattern for scss files that ignore file names prefixed with underscore.
+const scssPattern = path.resolve(rootDir, 'components/**/!(_*).scss');
+// Glob pattern for JS files.
+const jsPattern = path.resolve(
+  rootDir,
+  'components/**/!(*.stories|*.component|*.min|*.test).js',
+);
+
+// Prepare list of scss and js file for "entry".
+function getEntries(scssMatcher, jsMatcher) {
+  const entries = {};
+
+  // SCSS entries
+  glob.sync(scssMatcher).forEach((file) => {
+    const filePath = file.split('components/')[1];
+    const newfilePath = `css/${filePath.replace('.scss', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  // JS entries
+  glob.sync(jsMatcher).forEach((file) => {
+    const filePath = file.split('components/')[1];
+    const newfilePath = `js/${filePath.replace('.js', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  entries.svgSprite = path.resolve(webpackDir, 'svgSprite.js');
+
+  // CSS Files.
+  glob.sync(`${webpackDir}/css/*js`).forEach((file) => {
+    const baseFileName = path.basename(file);
+    const newfilePath = `css/${baseFileName.replace('.js', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  return entries;
+}
+
+module.exports = {
+  stats: {
+    errorDetails: true,
+  },
+  entry: getEntries(scssPattern, jsPattern),
+  module: {
+    rules: [
+      loaders.CSSLoader,
+      loaders.SVGSpriteLoader,
+      loaders.ImageLoader,
+      loaders.JSLoader,
+    ],
+  },
+  plugins: [
+    plugins.MiniCssExtractPlugin,
+    plugins.SpriteLoaderPlugin,
+    plugins.ProgressPlugin,
+    plugins.CleanWebpackPlugin,
+  ],
+  optimization: {
+    minimizer: [
+      plugins.ImageminPlugin
+    ]
+  },
+  output: {
+    path: distDir,
+    filename: '[name].js',
+  },
+};