CI: extract scss, icons, fonts to a separate project (#27777)

Co-authored-by: Alexander Bulychev <[email protected]>
Co-authored-by: Alexander Bulychev <[email protected]>

.github/CODEOWNERS

@@ -1,7 +1,7 @@
 # General d.ts files
 
-*.d.ts                   @DevExpress/devextreme-apireviewers @DevExpress/devextreme-techwriters
-/packages/devextreme/ts/**                   @DevExpress/devextreme-apireviewers
+*.d.ts                          @DevExpress/devextreme-apireviewers @DevExpress/devextreme-techwriters
+/packages/devextreme/ts/**      @DevExpress/devextreme-apireviewers
 
 # Localization strings
 
@@ -11,49 +11,49 @@
 
 ## grid_core
 
-/packages/devextreme/js/__internal/grids/**                 @DevExpress/devextreme-grids
-/packages/devextreme/js/ui/grid_core/**                     @DevExpress/devextreme-grids
-/packages/devextreme/js/ui/shared/**                        @DevExpress/devextreme-grids
-/packages/devextreme/js/common/grids.d.ts                   @DevExpress/devextreme-grids @DevExpress/devextreme-apireviewers @DevExpress/devextreme-techwriters
-/packages/devextreme/scss/widgets/base/_gridBase.scss       @DevExpress/devextreme-grids
-/packages/devextreme/scss/widgets/generic/gridBase/**       @DevExpress/devextreme-grids
-/packages/devextreme/scss/widgets/material/gridBase/**      @DevExpress/devextreme-grids
+/packages/devextreme/js/__internal/grids/**                     @DevExpress/devextreme-grids
+/packages/devextreme/js/ui/grid_core/**                         @DevExpress/devextreme-grids
+/packages/devextreme/js/ui/shared/**                            @DevExpress/devextreme-grids
+/packages/devextreme/js/common/grids.d.ts                       @DevExpress/devextreme-grids @DevExpress/devextreme-apireviewers @DevExpress/devextreme-techwriters
+/packages/devextreme-scss/scss/widgets/base/_gridBase.scss      @DevExpress/devextreme-grids
+/packages/devextreme-scss/scss/widgets/generic/gridBase/**      @DevExpress/devextreme-grids
+/packages/devextreme-scss/scss/widgets/material/gridBase/**     @DevExpress/devextreme-grids
 
 ## data_grid
 
-/packages/devextreme/js/ui/data_grid.d.ts                   @DevExpress/devextreme-grids @DevExpress/devextreme-apireviewers @DevExpress/devextreme-techwriters
-/packages/devextreme/js/ui/data_grid.js                     @DevExpress/devextreme-grids
-/packages/devextreme/js/ui/data_grid/**                     @DevExpress/devextreme-grids
-/packages/devextreme/scss/widgets/base/dataGrid/**          @DevExpress/devextreme-grids
-/packages/devextreme/scss/widgets/generic/dataGrid/**       @DevExpress/devextreme-grids
-/packages/devextreme/scss/widgets/material/dataGrid/**      @DevExpress/devextreme-grids
+/packages/devextreme/js/ui/data_grid.d.ts                       @DevExpress/devextreme-grids @DevExpress/devextreme-apireviewers @DevExpress/devextreme-techwriters
+/packages/devextreme/js/ui/data_grid.js                         @DevExpress/devextreme-grids
+/packages/devextreme/js/ui/data_grid/**                         @DevExpress/devextreme-grids
+/packages/devextreme-scss/scss/widgets/base/dataGrid/**         @DevExpress/devextreme-grids
+/packages/devextreme-scss/scss/widgets/generic/dataGrid/**      @DevExpress/devextreme-grids
+/packages/devextreme-scss/scss/widgets/material/dataGrid/**     @DevExpress/devextreme-grids
 /packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/**    @DevExpress/devextreme-grids
-/packages/devextreme/testing/testcafe/model/dataGrid/**     @DevExpress/devextreme-grids
-/packages/devextreme/testing/testcafe/tests/dataGrid/**     @DevExpress/devextreme-grids
+/packages/devextreme/testing/testcafe/model/dataGrid/**         @DevExpress/devextreme-grids
+/packages/devextreme/testing/testcafe/tests/dataGrid/**         @DevExpress/devextreme-grids
 
 ## tree_list
 
 /packages/devextreme/js/ui/tree_list.d.ts                   @DevExpress/devextreme-grids @DevExpress/devextreme-apireviewers @DevExpress/devextreme-techwriters
 /packages/devextreme/js/ui/tree_list.js                     @DevExpress/devextreme-grids
 /packages/devextreme/js/ui/tree_list/**                     @DevExpress/devextreme-grids
-/packages/devextreme/scss/widgets/base/treeList/**          @DevExpress/devextreme-grids
-/packages/devextreme/scss/widgets/generic/treeList/**       @DevExpress/devextreme-grids
-/packages/devextreme/scss/widgets/material/treeList/**      @DevExpress/devextreme-grids
+/packages/devextreme-scss/scss/widgets/base/treeList/**     @DevExpress/devextreme-grids
+/packages/devextreme-scss/scss/widgets/generic/treeList/**  @DevExpress/devextreme-grids
+/packages/devextreme-scss/scss/widgets/material/treeList/** @DevExpress/devextreme-grids
 /packages/devextreme/testing/tests/DevExpress.ui.widgets.treeList/**    @DevExpress/devextreme-grids
 /packages/devextreme/testing/testcafe/model/treeList.ts     @DevExpress/devextreme-grids
 /packages/devextreme/testing/testcafe/tests/treeList/**     @DevExpress/devextreme-grids
 
 ## pivot_grid
 
-/packages/devextreme/js/ui/pivot_grid.d.ts                  @DevExpress/devextreme-grids @DevExpress/devextreme-apireviewers @DevExpress/devextreme-techwriters
-/packages/devextreme/js/ui/pivot_grid.js                    @DevExpress/devextreme-grids
-/packages/devextreme/js/ui/pivot_grid/**                    @DevExpress/devextreme-grids
-/packages/devextreme/scss/widgets/base/pivotGrid/**         @DevExpress/devextreme-grids
-/packages/devextreme/scss/widgets/generic/pivotGrid/**      @DevExpress/devextreme-grids
-/packages/devextreme/scss/widgets/material/pivotGrid/**     @DevExpress/devextreme-grids
+/packages/devextreme/js/ui/pivot_grid.d.ts                      @DevExpress/devextreme-grids @DevExpress/devextreme-apireviewers @DevExpress/devextreme-techwriters
+/packages/devextreme/js/ui/pivot_grid.js                        @DevExpress/devextreme-grids
+/packages/devextreme/js/ui/pivot_grid/**                        @DevExpress/devextreme-grids
+/packages/devextreme-scss/scss/widgets/base/pivotGrid/**        @DevExpress/devextreme-grids
+/packages/devextreme-scss/scss/widgets/generic/pivotGrid/**     @DevExpress/devextreme-grids
+/packages/devextreme-scss/scss/widgets/material/pivotGrid/**    @DevExpress/devextreme-grids
 /packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/**   @DevExpress/devextreme-grids
-/packages/devextreme/testing/testcafe/model/pivotGrid/**    @DevExpress/devextreme-grids
-/packages/devextreme/testing/testcafe/tests/pivotGrid/**    @DevExpress/devextreme-grids
+/packages/devextreme/testing/testcafe/model/pivotGrid/**        @DevExpress/devextreme-grids
+/packages/devextreme/testing/testcafe/tests/pivotGrid/**        @DevExpress/devextreme-grids
 
 # DevOps
 

.github/workflows/lint.yml

@@ -246,8 +246,8 @@ jobs:
         pnpm install
 
     - name: Lint CSS
-      working-directory: ./packages/devextreme
-      run: pnpx nx lint-css
+      working-directory: ./packages/devextreme-scss
+      run: pnpx nx lint
 
   pnpm_lock:
     runs-on: devextreme-shr2

.github/workflows/playgrounds_tests.yml

@@ -63,7 +63,7 @@ jobs:
     - name: Zip artifacts
       working-directory: ./packages/devextreme
       run: |
-        7z a -tzip -mx3 -mmt2 artifacts.zip artifacts scss/bundles
+        7z a -tzip -mx3 -mmt2 artifacts.zip artifacts ../devextreme-scss/scss/bundles
 
     - name: Upload build artifacts
       uses: actions/upload-artifact@v3

.github/workflows/qunit_tests-additional-renovation.yml

@@ -66,7 +66,7 @@ jobs:
       - name: Zip artifacts
         working-directory: ./packages/devextreme
         run: |
-          7z a -tzip -mx3 -mmt2 artifacts.zip artifacts scss/bundles testing/tests/Renovation/widgets.json
+          7z a -tzip -mx3 -mmt2 artifacts.zip artifacts ../devextreme-scss/scss/bundles testing/tests/Renovation/widgets.json
 
       - name: Upload build artifacts
         uses: actions/upload-artifact@v3

.github/workflows/qunit_tests-renovation.yml

@@ -65,7 +65,7 @@ jobs:
     - name: Zip artifacts
       working-directory: ./packages/devextreme
       run: |
-        7z a -tzip -mx3 -mmt2 artifacts.zip artifacts scss/bundles testing/tests/Renovation/widgets.json
+        7z a -tzip -mx3 -mmt2 artifacts.zip artifacts ../devextreme-scss/scss/bundles testing/tests/Renovation/widgets.json
 
     - name: Upload build artifacts
       uses: actions/upload-artifact@v3

.github/workflows/styles.yml

@@ -52,7 +52,7 @@ jobs:
         pnpm install
 
     - name: Run tests
-      run: pnpx nx test-styles devextreme-main
+      run: pnpx nx test devextreme-scss
 
   notify:
     runs-on: devextreme-shr2

.github/workflows/testcafe_tests.yml

@@ -63,7 +63,7 @@ jobs:
     - name: Zip artifacts
       working-directory: ./packages/devextreme
       run: |
-        7z a -tzip -mx3 -mmt2 artifacts.zip artifacts scss/bundles
+        7z a -tzip -mx3 -mmt2 artifacts.zip artifacts ../devextreme-scss/scss/bundles
 
     - name: Upload build artifacts
       uses: actions/upload-artifact@v3

.github/workflows/themebuilder_tests.yml

@@ -53,7 +53,7 @@ jobs:
         pnpm install
 
     - name: Build etalon bundles
-      working-directory: ./packages/devextreme
+      working-directory: ./packages/devextreme-scss
       run: pnpx gulp style-compiler-themes-ci
 
     - name: Build
@@ -65,12 +65,12 @@ jobs:
       run: pnpx nx test
 
     - name: Check styles for duplicate rules (generic)
-      working-directory: ./packages/devextreme
-      run: pnpx stylelint --config testing/styles/bundles-stylelint-config.json "artifacts/**/dx.light.css"
+      working-directory: ./packages/devextreme-scss
+      run: pnpx stylelint --config tests/bundles-stylelint-config.json "../devextreme/artifacts/**/dx.light.css"
 
     - name: Check styles for duplicate rules (material)
-      working-directory: ./packages/devextreme
-      run: pnpx stylelint --config testing/styles/bundles-stylelint-config.json "artifacts/**/dx.material.blue.light.css"
+      working-directory: ./packages/devextreme-scss
+      run: pnpx stylelint --config tests/bundles-stylelint-config.json "../devextreme/artifacts/**/dx.material.blue.light.css"
 
   notify:
     runs-on: devextreme-shr2

e2e/testcafe-devextreme/tests/common/icons.ts

@@ -333,7 +333,7 @@ test('SVG icon set', async (t) => {
 
     await ClientFunction(() => {
       $(`#${id}`)
-        .append($(`<img src="../../../packages/devextreme/images/icons/${themeName}/${iconName}.svg">`))
+        .append($(`<img src="../../../packages/devextreme-scss/images/icons/${themeName}/${iconName}.svg">`))
         .append($('<div>').text(`${iconName}`));
     }, {
       dependencies: {

packages/devextreme-scss/.browserslistrc

@@ -0,0 +1,4 @@
+last 2 versions
+ ios > 9
+> 1%
+not dead

packages/devextreme-scss/.gitignore

@@ -0,0 +1 @@
+scss/bundles

packages/devextreme-scss/build/gulp-data-uri.js

@@ -0,0 +1,42 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const sass = require('sass-embedded');
+const dataUriRegex = /data-uri\((?:'(image\/svg\+xml;charset=UTF-8)',\s)?['"]?([^)'"]+)['"]?\)/g;
+
+const svg = (buffer, svgEncoding) => {
+    const encoding = svgEncoding || 'image/svg+xml;charset=UTF-8';
+    const svg = encodeURIComponent(buffer.toString());
+
+    return `"data:${encoding},${svg}"`;
+};
+
+const img = (buffer, ext) => {
+    return `"data:image/${ext};base64,${buffer.toString('base64')}"`;
+};
+
+const handler = (_, svgEncoding, fileName) => {
+    const relativePath = path.join(__dirname, '..', fileName);
+    const filePath = path.resolve(relativePath);
+    const ext = filePath.split('.').pop();
+    const data = fs.readFileSync(filePath);
+    const buffer = Buffer.from(data);
+    const escapedString = ext === 'svg' ? svg(buffer, svgEncoding) : img(buffer, ext);
+    return `url(${escapedString})`;
+};
+
+const sassFunction = (args) => {
+    const hasEncoding = args.getLength() === 2;
+    const encoding = hasEncoding ? args.getValue(0).getValue() : null;
+    const url = hasEncoding ? args.getValue(1).getValue() : args.getValue(0).getValue();
+
+    return new sass.SassString(handler(null, encoding, url), { quotes: false });
+};
+
+module.exports = {
+    resolveDataUri: (content) => content.replace(dataUriRegex, handler),
+    sassFunctions: {
+        'data-uri($args...)': sassFunction,
+    }
+};

packages/devextreme/build/gulp/styles/style-compiler.js → packages/devextreme-scss/build/style-compiler.js

@@ -13,12 +13,12 @@ const autoPrefix = require('gulp-autoprefixer');
 const parseArguments = require('minimist');
 
 const cleanCssSanitizeOptions = require('./clean-css-options.json');
-const cleanCssOptions = require('../../../../devextreme-themebuilder/src/data/clean-css-options.json');
+const cleanCssOptions = require('../../devextreme-themebuilder/src/data/clean-css-options.json');
 const { getThemes } = require('./theme-options');
-const functions = require('../gulp-data-uri').sassFunctions;
-const starLicense = require('../header-pipes').starLicense;
+const functions = require('./gulp-data-uri').sassFunctions;
+const starLicense = require('../../devextreme/build/gulp/header-pipes').starLicense;
 
-const cssArtifactsPath = join(process.cwd(), 'artifacts', 'css');
+const cssArtifactsPath = join(process.cwd(), '..', 'devextreme', 'artifacts', 'css');
 
 const DEFAULT_DEV_BUNDLE_NAMES = [
     'light',
@@ -152,8 +152,3 @@ task('style-compiler-themes-watch', () => {
     watch('scss/**/*', parallel(() => compileBundles(bundles), 'copy-fonts-and-icons'))
         .on('ready', () => console.log('style-compiler-themes task is watching for changes...'));
 });
-
-module.exports = {
-    generateScssBundleName,
-    generateScssBundles
-};

packages/devextreme-scss/gulpfile.js

@@ -0,0 +1,37 @@
+/* eslint-env node */
+/* eslint-disable no-console */
+
+const gulp = require('gulp');
+const env = require('../devextreme/build/gulp/env-variables');
+const cache = require('gulp-cache');
+const shell = require('gulp-shell');
+
+gulp.task('clean', function(callback) {
+    require('del').sync([
+        '../devextreme/artifacts/css/**',
+        '../devextreme/scss/bundles/**'
+    ], { force: true });
+    cache.clearAll();
+    callback();
+});
+
+require('./build/style-compiler');
+
+if(env.TEST_CI) {
+    console.warn('Using test CI mode!');
+}
+
+function createStyleCompilerBatch() {
+    return gulp.series(
+      'clean',
+      env.TEST_CI
+        ? ['style-compiler-themes-ci']
+        : ['style-compiler-themes']
+    );
+}
+
+gulp.task('default', createStyleCompilerBatch());
+
+gulp.task('watch', gulp.series(
+    'style-compiler-themes-watch'
+));