feat: webpack configs, improvements, library dependency fix

emulsify.info.yml

@@ -23,10 +23,6 @@ libraries:
 #       component:
 #         css/chosen-drupal.css: false
 
-# CKEditor stylesheet loads in wysiwyg to give content editors a better experience
-ckeditor_stylesheets:
-  - dist/css/style.css
-
 regions:
   header: Header
   content: Content # the content region is required

emulsify.theme

@@ -30,7 +30,7 @@ function emulsify_library_info_alter(&$libraries, $extension) {
           $componentPathFromTheme = str_replace($theme_path . '/', '', $componentPathFromRoot); // /components/status-messages/
 
           // Decode the libraries.yml 
-          $new_libraries = Yaml::decode(file_get_contents($file->getRealPath()));
+          $new_libraries = Drupal\Component\Serialization\Yaml::decode(file_get_contents($file->getRealPath()));
 
           // Each libraries.yml could have multiple library-definitions
           foreach ($new_libraries as $key => $new_library) {
@@ -54,7 +54,7 @@ function emulsify_library_info_alter(&$libraries, $extension) {
                     // If the path to the file is absolutely defined, for example: 
                     // components/status-messages/dist/status-messages.css, 
                     // then it will work out of the box.
-                    if(substr($file_key, 0, 11) == 'components/') {
+                    if(substr($file_key, 0, 5) == 'dist/') {
                       // no need to do anything
                     } else {
                       // If a type is defined
@@ -80,7 +80,7 @@ function emulsify_library_info_alter(&$libraries, $extension) {
               // Do the same for the JS as we did for CSS
               if (isset($new_library['js'])) {
                 foreach($new_library['js'] as $file_key => $js_file) {
-                  if(substr($file_key, 0, 11) == 'components/') {
+                  if(substr($file_key, 0, 5) == 'dist/') {
                   } else {
                     if (isset($js_file['type'])) {
                       if ($js_file['type'] == 'external') {

webpack/global.js

@@ -0,0 +1 @@
+import '../components/global.scss';

webpack/loaders.js

@@ -53,9 +53,16 @@ const SVGSpriteLoader = {
   },
 };
 
+const FontLoader = {
+  test: /.(woff|woff2|ttf|eot|otf|svg)$/,
+  loader: 'file-loader',
+  include: [/fonts/],
+};
+
 module.exports = {
   JSLoader,
   CSSLoader,
   SVGSpriteLoader,
   ImageLoader,
+  FontLoader,
 };

webpack/plugins.js

@@ -7,6 +7,9 @@ const _ImageminPlugin = require('imagemin-webpack-plugin').default;
 const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
 const glob = require('glob');
 
+const _StyleLintPlugin = require('stylelint-webpack-plugin');
+const _ESLintPlugin = require('eslint-webpack-plugin');
+
 const imagePath = path.resolve(__dirname, '../images');
 
 const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
@@ -29,6 +32,17 @@ const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
 
 const ProgressPlugin = new webpack.ProgressPlugin();
 
+const StyleLintPlugin = new _StyleLintPlugin({
+  configFile: path.resolve(__dirname, '../', '.stylelintrc'),
+  context: path.resolve(__dirname, '../', 'components'),
+  files: '**/*.scss',
+});
+
+const ESLintPlugin = new _ESLintPlugin({
+  context: path.resolve(__dirname, '../', 'components'),
+  extensions: ['js'],
+});
+
 module.exports = {
   ProgressPlugin,
   MiniCssExtractPlugin,
@@ -46,4 +60,6 @@ module.exports = {
       '!*.{png,jpg,gif,svg}',
     ],
   }),
+  StyleLintPlugin,
+  ESLintPlugin,
 };

webpack/webpack.common.js

@@ -7,40 +7,23 @@ const webpackDir = path.resolve(__dirname);
 const rootDir = path.resolve(__dirname, '..');
 const distDir = path.resolve(rootDir, '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(scssPattern, jsPattern) {
+function getEntries(pattern, patternCss) {
   const entries = {};
 
-  // SCSS entries
-  glob.sync(scssPattern).forEach((file) => {
+  glob.sync(pattern).forEach((file) => {
     const filePath = file.split('components/')[1];
-    const newfilePath = `css/${filePath.replace('.scss', '')}`;
+    const newfilePath = `js/${filePath.replace('.js', '')}`;
     entries[newfilePath] = file;
   });
 
-  // JS entries
-  glob.sync(jsPattern).forEach((file) => {
+  glob.sync(patternCss).forEach((file) => {
     const filePath = file.split('components/')[1];
-    const newfilePath = `js/${filePath.replace('.js', '')}`;
+    const newfilePath = `css/${filePath.replace('.component.scss', '')}`;
     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;
-  });
+  entries.global = path.resolve(webpackDir, 'global.js');
 
   return entries;
 }
@@ -49,13 +32,20 @@ module.exports = {
   stats: {
     errorDetails: true,
   },
-  entry: getEntries(scssPattern, jsPattern),
+  entry: getEntries(
+    path.resolve(
+      rootDir,
+      'components/**/!(*.stories|*.component|*.min|*.test).js',
+    ),
+    path.resolve(rootDir, 'components/**/*.component.scss'),
+  ),
   module: {
     rules: [
       loaders.CSSLoader,
       loaders.SVGSpriteLoader,
       loaders.ImageLoader,
       loaders.JSLoader,
+      loaders.FontLoader,
     ],
   },
   plugins: [
@@ -64,6 +54,8 @@ module.exports = {
     plugins.SpriteLoaderPlugin,
     plugins.ProgressPlugin,
     plugins.CleanWebpackPlugin,
+    plugins.StyleLintPlugin,
+    plugins.ESLintPlugin,
   ],
   output: {
     path: distDir,