[AdminBundle] setup CSS Next

Kunstmaan · Oct 30, 2020 · ccf1c0d · ccf1c0d
1 parent 7cf60e5
commit ccf1c0d
Show file tree

Hide file tree

Showing 33 changed files with 7,738 additions and 9,603 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -4,31 +4,11 @@
     "browser": true,
     "es6": true
   },
-  "parserOptions": {
-    "sourceType": "module"
+  "globals": {
+    "dataLayer": "readonly"
   },
-  "extends": "airbnb-base",
+  "extends": ["./node_modules/@kunstmaan/eslint-config/index.js"],
   "rules": {
-    "arrow-parens": ["error", "always"],
-    "comma-dangle": ["error", "never"],
-    "default-case": "off",
-    "indent": ["error", 4, { "SwitchCase": 1 }],
-    "max-len": ["error", 120, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
-    "no-console": 0,
-    "no-new": "off",
-    "no-use-before-define": ["error", {"functions": false, "classes": true}],
-    "no-trailing-spaces": ["error", {"skipBlankLines": true}],
-    "linebreak-style": ["error", "unix"],
-    "object-curly-spacing": ["error", "never"],
-    "quotes": ["error", "single"],
-    "semi": ["error", "always"],
-    "space-before-blocks": ["error", "always"],
-    "space-before-function-paren": ["error", "never"],
-    "no-param-reassign": ["error", { "props": false }],
-    "import/prefer-default-export": "off",
-    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["gulpfile.babel.js"]}]
-  },
-  "globals": {
-    "module": true
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["gulpfile.babel.js", "./groundcontrol/**/*.js"]}]
   }
-}
+}
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,114 +1,5 @@
 {
-    "plugins": [
-        "stylelint-order"
-    ],
-    "extends": "stylelint-config-standard",
+    "extends": ["./node_modules/@kunstmaan/stylelint-config/index.js"],
     "rules": {
-        "indentation": 4,
-        "max-empty-lines": 2,
-        "comment-empty-line-before": null,
-        "color-named": "never",
-        "number-leading-zero": "never",
-        "length-zero-no-unit": true,
-        "declaration-bang-space-after": "never",
-        "declaration-bang-space-before": "always",
-        "declaration-block-no-duplicate-properties": true,
-        "declaration-empty-line-before": null,
-        "selector-list-comma-newline-after": "always",
-        "block-opening-brace-space-before": "always",
-        "at-rule-empty-line-before": null,
-        "selector-pseudo-element-colon-notation": "single",
-        "color-hex-case": "upper",
-        "color-hex-length": "long",
-        "block-no-empty": null,
-        "rule-empty-line-before": [
-            "always-multi-line", {
-                ignore: ["after-comment"]
-            }
-        ],
-        "max-nesting-depth": 3,
-        "order/declaration-block-property-groups-structure": [
-            {
-                "emptyLineBefore": "always",
-                "properties": [
-                    "include",
-                    "extend"
-                ]
-            },
-            {
-                "emptyLineBefore": "always",
-                "properties": [
-                    "content"
-                ]
-            },
-            {
-                "emptyLineBefore": "always",
-                "properties": [
-                    "float",
-                    "position",
-                    "top",
-                    "right",
-                    "bottom",
-                    "left",
-                    "z-index"
-                ]
-            },
-            {
-                "emptyLineBefore": "always",
-                "properties": [
-                    "display",
-                    "flex",
-                    "justify-content",
-                    "width",
-                    "height",
-                    "max-width",
-                    "max-height",
-                    "min-height",
-                    "min-width",
-                    "padding",
-                    "margin",
-                    "overflow",
-                    "transform"
-                ]
-            },
-            {
-                "emptyLineBefore": "always",
-                "properties": [
-                    "background"
-                ]
-            },
-            {
-                "emptyLineBefore": "always",
-                "properties": [
-                    "border",
-                    "outline"
-                ]
-            },
-            {
-                "emptyLineBefore": "always",
-                "properties": [
-                    "color",
-                    "font",
-                    "line-height",
-                    "text",
-                    "white-space",
-                    "word"
-                ]
-            },
-            {
-                "emptyLineBefore": "always",
-                "properties": [
-                    "list-style"
-                ]
-            },
-            {
-                "emptyLineBefore": "always",
-                "properties": [
-                    "transition",
-                    "will-change",
-                    "perspective"
-                ]
-            }
-        ]
     }
 }
diff --git a/groundcontrol/admin-bundle.tasks.js b/groundcontrol/admin-bundle.tasks.js
@@ -7,6 +7,7 @@ import path from 'path';
 import consoleArguments from './console-arguments';
 
 import createEslintTask from './tasks/eslint';
+import createStylelintTask from './tasks/stylelint';
 import createCopyTask from './tasks/copy';
 import {createCssLocalTask, createCssOptimizedTask} from './tasks/css';
 import createScriptsTask from './tasks/scripts';
@@ -26,13 +27,22 @@ adminBundle.tasks.eslint = createEslintTask({
     failAfterError: !consoleArguments.continueAfterTestError
 });
 
+adminBundle.tasks.stylelint = createStylelintTask({
+    src: `${adminBundle.config.srcPath}scssnext/**/*.scss`,
+});
+
 adminBundle.tasks.copy = gulp.parallel(
-    createCopyTask({src: [`${adminBundle.config.srcPath}img/**`], dest: `${adminBundle.config.distPath}img`})
+    createCopyTask({src: [`${adminBundle.config.srcPath}img/**`], dest: `${adminBundle.config.distPath}img`}),
+    createCopyTask({src: [`${adminBundle.config.srcPath}icons/**`], dest: `${adminBundle.config.distPath}icons`})
 );
 
 adminBundle.tasks.cssLocal = createCssLocalTask({src: `${adminBundle.config.srcPath}scss/*.scss`, dest: `${adminBundle.config.distPath}css`});
+adminBundle.tasks.cssNextLocal = createCssLocalTask({src: `${adminBundle.config.srcPath}scssnext/*.scss`, dest: `${adminBundle.config.distPath}cssnext`});
+
+
 
 adminBundle.tasks.cssOptimized = createCssOptimizedTask({src: `${adminBundle.config.srcPath}scss/*.scss`, dest: `${adminBundle.config.distPath}css`});
+adminBundle.tasks.cssNextOptimized = createCssOptimizedTask({src: `${adminBundle.config.srcPath}scssnext/*.scss`, dest: `${adminBundle.config.distPath}cssnext`});
 
 adminBundle.tasks.scripts = createScriptsTask({
     src: [
@@ -45,7 +55,7 @@ adminBundle.tasks.scripts = createScriptsTask({
         './node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js',
         './node_modules/cargobay/src/toggle/js/jquery.toggle.js',
         './node_modules/cargobay/src/scroll-to-top/js/jquery.scroll-to-top.js',
-        './node_modules/sortablejs/Sortable.js',
+        './node_modules/sortablejs/dist/sortable.umd.js',
         './node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js',
         './node_modules/jquery.typewatch/jquery.typewatch.js',
         './node_modules/ckeditor/ckeditor.js',

diff --git a/groundcontrol/start-local.task.js b/groundcontrol/start-local.task.js
@@ -69,8 +69,28 @@ export const buildOnChange = (done) => {
 
         const styleAssets = srcPath + 'scss/**/*.scss';
         gulp.watch(styleAssets, bundle.tasks.cssOptimized);
+
+        if (bundle.tasks.cssNextOptimized) {
+            const styleNextAssets = srcPath + 'scssnext/**/*.scss';
+            gulp.watch(styleNextAssets, bundle.tasks.cssNextOptimized);
+        }
     }
     done();
 };
 
+export function testOnChange(done) {
+    for (const bundle of BUNDLES) {
+        if (bundle.tasks.eslint) {
+            const srcPath = bundle.config.srcPath;
+            gulp.watch(`${srcPath}jsnext/**/*.js`, bundle.tasks.eslint);
+        }
+        if (bundle.tasks.stylelint) {
+            const srcPath = bundle.config.srcPath;
+            gulp.watch(`${srcPath}scssnext/**/*.scss`, bundle.tasks.stylelint);
+        }
+    }
+    done();
+}
+
+
 export default startLocalTask;
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -5,25 +5,28 @@ import {adminBundle} from './groundcontrol/admin-bundle.tasks';
 import {dashboardBundle} from './groundcontrol/dashboard-bundle.tasks';
 import {mediaBundle} from './groundcontrol/media-bundle.tasks';
 import {translatorBundle} from './groundcontrol/translator-bundle.tasks';
-import startLocalTask, {buildOnChange} from './groundcontrol/start-local.task';
+import startLocalTask, { buildOnChange, testOnChange } from './groundcontrol/start-local.task';
 import createBuildGroundControlSkeletonTask from './groundcontrol/tasks/build-gc-skeleton';
 
 
 // AdminBundle Tasks
 const analyzeAdminBundle = gulp.series(
-    adminBundle.tasks.eslint
+    adminBundle.tasks.eslint,
+    adminBundle.tasks.stylelint,
 );
 
 const buildLocalAdminBundle = gulp.series(
     adminBundle.tasks.copy,
     adminBundle.tasks.cssLocal,
+    adminBundle.tasks.cssNextLocal,
     adminBundle.tasks.scripts,
     adminBundle.tasks.bundle
 );
 
 const buildOptimizedAdminBundle = gulp.series(
     adminBundle.tasks.copy,
     adminBundle.tasks.cssOptimized,
+    adminBundle.tasks.cssNextOptimized,
     adminBundle.tasks.scripts,
     adminBundle.tasks.bundlePolyfills,
     adminBundle.tasks.bundleOptimized
@@ -95,7 +98,9 @@ const testAndBuildOptimized = gulp.series(
 const startLocal = gulp.series(
     buildLocal,
     startLocalTask,
-    buildOnChange
+    analyze,
+    buildOnChange,
+    testOnChange,
 );
 
 // Development sepcific tasks