Use NX for task management

.github/disabled-workflows/ci_next.yml

@@ -45,10 +45,10 @@ jobs:
         run: npm ci --no-audit --no-fund
 
       - name: Lint scripts
-        run: npm run eslint
+        run: npm run lint:scripts
 
       - name: Lint styles
-        run: npm run stylelint
+        run: npm run lint:styles
 
       - name: Build docs
         run: npm run docs

.github/disabled-workflows/publish_npm_next.yml

@@ -70,7 +70,7 @@ jobs:
       - name: Build themes for dist
         run: |
           npm run sass:flat
-          npm run dist:swatches
+          npm run sass:swatches
 
       - name: Determine correct version to publish
         run: |

.github/workflows/_compile-themes.yml

@@ -41,7 +41,7 @@ jobs:
 
       - name: Build swatch for a11y tests
         run: |
-          npm run dist:swatches
+          npm run sass:swatches:dist
           npx sass-build build --file packages/default/dist/default-ocean-blue-a11y.scss --outFile packages/default/dist/default-ocean-blue-a11y.css
 
       - name: Pack themes

.github/workflows/_lint-scripts.yml

@@ -38,8 +38,8 @@ jobs:
 
       - name: Lint scripts
         run: |
-          npm run eslint
+          npm run lint:scripts
 
       - name: Check types
         run: |
-          npm run check-types
+          npm run typecheck -w packages/html

.github/workflows/_lint-styles.yml

@@ -42,7 +42,7 @@ jobs:
 
       - name: Lint styles
         run: |
-          npm run stylelint
+          npm run lint:styles
 
       - name: Ensure standalone build
         run: |

.github/workflows/_render-test-pages.yml

@@ -114,7 +114,7 @@ jobs:
         env:
           HEADLESS: 'true'
         run: |
-          npm run render-test-pages
+          npm run test:render-test-pages
 
       - name: Pack test pages
         env:

.github/workflows/_test-contrast.yml

@@ -73,7 +73,7 @@ jobs:
         run: find .tmp -name "*.tar" -type f -exec tar -xf {} \;
 
       - name: Test contrast (${{ matrix.chunk }} of ${{ matrix.max-chunks }})
-        run: xvfb-run --auto-servernum --server-args="-screen 0, 1366x768x24" npm run test-contrast
+        run: xvfb-run --auto-servernum --server-args="-screen 0, 1366x768x24" npm run test:contrast
         env:
           MAX_CHUNKS: ${{ inputs.max-chunks }}
           CURRENT_CHUNK: ${{ matrix.chunk }}

.github/workflows/ci_weekly.yml

@@ -42,23 +42,23 @@ jobs:
 
       - name: Lint scripts
         run: |
-          npm run eslint
+          npm run lint:scripts
 
       - name: Check types
         run: |
-          npm run check-types
+          npm run typecheck -w packages/html
 
       - name: Build scripts
         run: |
-          npm run build:scripts
+          npm run build
 
       - name: Build test pages
         run: |
           npm run build:tests
 
       - name: Lint styles
         run: |
-          npm run stylelint
+          npm run lint:styles
 
       - name: Ensure standalone build
         run: |

.gitignore

@@ -16,3 +16,7 @@ debug.log
 
 # Lock files
 # package-lock.json
+
+# NX
+.nx/cache
+.nx/workspace-data

.husky/pre-commit

@@ -1 +1 @@
-npm run lint-staged
+npm run lint:staged

README.md

@@ -59,28 +59,10 @@ To guard against regressions and make pull request reviews easier, the CI build
 To generate screenshots for a specific theme:
 
 1. Build the theme with `npm run sass`
-1. Run `npm run create-screenshots <theme>`, substituting `<theme>` with a theme name.
+1. Run `npm run test:create-screenshots <theme>`, substituting `<theme>` with a theme name.
 
 These steps will create new screenshots in `tests/_output`. Note that due to platform differences, all of the files will be marked as changed.
 
-### Embedding Resources
-
-To avoid hosting-related issues in projects that use the themes, the resources are embedded by encoding them in the output CSS. For more details, refer to [this issue](https://github.com/telerik/kendo-theme-default/issues/41#issuecomment-258472183).
-
-To embed the latest resources:
-
-1. Run the `npm run embed-assets` task. The task generates a file with the same name which registers a Base64-encoded version in the `$data-uris` SCSS map. For example, the `foo.woff` font file will be encoded in a `foo.scss` file which can later be imported through `@import './font/foo';`.
-1. Inline the encoded file inside the CSS through `map-get( $data-uris, 'foo.woff' )`. For example:
-
-```scss
-$web-font-uri: map-get( $data-uris, 'WebComponentsIcons.woff' );
-
-@font-face {
-    font-family: 'WebComponentsIcons';
-    src: url( $web-font-uri ) format( "woff" );
-}
-```
-
 ### Documenting Variables
 
 The available variables for customizing each theme are listed in the article on customization for each theme (`docs/customization.md`) The file is generated from the SCSS source files by running the `npm run docs` command.

gulpfile.js

@@ -5,16 +5,12 @@ const { globSync } = require("glob");
 const gulp = require("gulp");
 
 const { sassFlatten } = require('@progress/kendo-theme-tasks/src/build/sass-flatten');
-const { embedFileBase64 } = require('@progress/kendo-theme-tasks/src/embedFile');
-const { getArg, getEnvArg } = require("@progress/kendo-theme-tasks/src/utils");
-const { createComponent } = require('@progress/kendo-theme-tasks/src/create');
-
+const { getArg } = require("@progress/kendo-theme-tasks/src/utils");
 
 // Settings
 const paths = {
     sass: {
         all: "packages/*/scss/**/*.scss",
-        assets: "packages/*/scss/**/*.{png,gif,ttf,woff}",
         themes: "packages/!(html)",
         theme: "scss/all.scss",
         swatches: "lib/swatches/*.json",
@@ -147,28 +143,6 @@ function swatchJsonTransformer( json ) {
 }
 // #endregion
 
-
-// #region assets
-gulp.task("assets", function() {
-    let files = globSync(paths.sass.assets);
-    let template = fs.readFileSync('lib/data-uri.template', 'utf8');
-
-    files.forEach( file => {
-        embedFileBase64({
-            file: file,
-            output: {
-                filename: '[name].scss',
-                path: path.dirname( file )
-            },
-            template: template
-        });
-    });
-
-    return Promise.resolve();
-});
-// #endregion
-
-
 // #region dist
 function distFlat() {
     let file = paths.sass.theme;
@@ -194,22 +168,3 @@ function distSwatches() {
 }
 gulp.task("dist:swatches", distSwatches);
 // #endregion
-
-// #region Components
-
-/**
- * A task that creates all the needed files for a new component.
- *
- * @example npm run create-component --name=accordion
- * @example gulp create-component --name accordion
- *
- * @param {string} [name] - The name of the new component.
- */
-gulp.task("create-component", function( done ) {
-    const name = getArg('--name') || getEnvArg('name') || null;
-
-    createComponent({ name });
-    done();
-});
-
-// #endregion

integrations/gulp-sass/package.json

@@ -1,4 +1,6 @@
 {
+  "name": "integrations.gulp",
+  "version": "0.0.0",
   "scripts": {
     "build": "gulp compile"
   },

integrations/parcel/package.json

@@ -1,4 +1,6 @@
 {
+  "name": "integrations.parcel",
+  "version": "0.0.0",
   "targets": {
     "default": {
       "source": "styles/default.scss"

integrations/vite/package.json

@@ -1,4 +1,6 @@
 {
+  "name": "integrations.vite",
+  "version": "0.0.0",
   "scripts": {
     "build": "vite build"
   },

integrations/webpack/package.json

@@ -1,4 +1,6 @@
 {
+  "name": "integrations.webpack",
+  "version": "0.0.0",
   "scripts": {
     "build": "webpack"
   },

nx.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "./node_modules/nx/schemas/nx-schema.json",
+  "defaultBase": "develop",
+  "workspaceLayout": {
+    "libsDir": "packages"
+  },
+  "targetDefaults": {
+    "lint": {
+      "cache": true,
+      "executor": "nx:run-script",
+      "options": {
+        "script": "lint"
+      }
+    },
+    "build": {
+      "cache": true
+    },
+    "build:tests": {
+      "cache": true
+    },
+    "sass": {
+      "cache": true,
+      "outputs": [
+        "{projectRoot}/dist/**/*.css"
+      ]
+    },
+    "sass:flat": {
+      "cache": true,
+      "outputs": [
+        "{projectRoot}/dist/**/*.scss"
+      ]
+    },
+    "sass:swatches": {
+      "cache": true,
+      "outputs": [
+        "{projectRoot}/dist/**/*.css",
+        "{projectRoot}/dist/**/*.scss"
+      ]
+    },
+    "docs": {
+      "cache": true
+    }
+  }
+}