diff --git a/template/.travis.temp b/template/.travis.temp index e0edc4dd..8e6e6015 100644 --- a/template/.travis.temp +++ b/template/.travis.temp @@ -14,12 +14,7 @@ notifactions: before_script: - npm run buildTokens - - gulp processSrc - - gulp processImportsCanonical - - gulp processImportsVariable - - npm run stylefluxCanonical - - npm run stylefluxVariable - - gulp reprocessClean + - npm run processSrc - npm run distTokens - npm run sassRender - npm run distJS diff --git a/template/demo/sass/style.scss b/template/demo/sass/style.scss index e5199b56..010f3dd1 100644 --- a/template/demo/sass/style.scss +++ b/template/demo/sass/style.scss @@ -1,7 +1,9 @@ +// Import Auro tokens +@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariables"; +@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SassCustomProperties"; -// Import generated Design Token variables -@import "./demo/sass/tokenVariables"; -@import "./demo/sass/tokenProperties"; +// Import deprecated Design Token variables to support Orion values +@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/tokenVariables"; // Import baseline library dependencies // Mixins diff --git a/template/gulpfile.js b/template/gulpfile.js index 46927c9f..867b084c 100644 --- a/template/gulpfile.js +++ b/template/gulpfile.js @@ -24,23 +24,7 @@ const gulp = require('gulp'), postcssCustomProperties = require('postcss-custom-properties'), postcss = require('gulp-postcss'), removeSelectors = require('postcss-remove-selectors'), - StyleDictionary = require('style-dictionary'), - copyfiles = require('copyfiles'), - selectorReplace = require('postcss-selector-replace'); - -// task to copy font files from the OWCSS npm to the local project -// resources are NOT to be committed to version control -gulp.task('copyFonts', function(cb) { - copyfiles( - [ - './node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts/*.*', - './demo/fonts/', - ], - true, - cb - ); - cb(); -}); + StyleDictionary = require('style-dictionary'); // task to build CSS/Sass resources from Token JSON files gulp.task('buildTokens', function(cb) { @@ -112,76 +96,6 @@ gulp.task('processSrc', function() { ); }); -// task for Production Sass processing and legacy support -gulp.task('processImportsCanonical', function() { - // set path to where Sass files are located to be processed - return ( - gulp - .src('./src/*.scss') - - // Sass pipeline - .pipe( - gulpSass({ - errLogToConsole: true, - outputStyle: 'compressed', //alt options: nested, compact, compressed, expanded - }) - ) - - // Post Sass to CSS process for addressing proprietary prefixes - //.pipe(gulpautoprefixer({ browsers: ['last 4 versions'], cascade: false })) - - // PostCss polyfill pipeline for CSS Custom Properties (CSS variables) - .pipe( - postcss([ - // Boolean flag determines if CSS Custom Property code is in final output - // or only outputs legacy supported version CSS - postcssCustomProperties({ - preserve: false, - }), - - removeSelectors({ - selectors: [':root'], - }), - ]) - ) - - // Output final CSS in destination - .pipe(gulp.dest('./altImports/canonical/')) - ); -}); - -// task for Production Sass processing and legacy support -gulp.task('processImportsVariable', function() { - // set path to where Sass files are located to be processed - return ( - gulp - .src('./src/*.scss') - - // Sass pipeline - .pipe( - gulpSass({ - errLogToConsole: true, - outputStyle: 'compressed', //alt options: nested, compact, compressed, expanded - }) - ) - - // Post Sass to CSS process for addressing proprietary prefixes - //.pipe(gulpautoprefixer({ browsers: ['last 4 versions'], cascade: false })) - - // PostCss polyfill pipeline for CSS Custom Properties (CSS variables) - .pipe( - postcss([ - removeSelectors({ - selectors: [':root'], - }), - ]) - ) - - // Output final CSS in destination - .pipe(gulp.dest('./altImports/variable/')) - ); -}); - // task for Development Sass processing gulp.task('processDev', function() { // set path to where Sass files are located to be processed @@ -211,24 +125,6 @@ gulp.task('processDev', function() { ); }); -// task for Development Sass processing -gulp.task('reprocessClean', function() { - // set path to where Sass files are located to be processed - return gulp.src('./altImports/**/*.scss') - - // PostCss polyfill pipeline for CSS Custom Properties (CSS variables) - .pipe(postcss([ - - selectorReplace({ - before: [":host", "&(:not(.is-touching))", "&(.focus-visible)"], - after: ["&", "&:not(.is-touching)", "&.focus-visible"], - }) - ])) - - // Output final CSS in destination - .pipe(gulp.dest('./altImports/')); -}); - // Sass watcher gulp.task('sassWatch', function() { gulp.watch( @@ -242,13 +138,13 @@ gulp.task('sassWatch', function() { gulp.task( 'build', gulp.series( - gulp.parallel('copyFonts', 'buildTokens', 'processDemo', 'processSrc') + gulp.parallel('buildTokens', 'processDemo', 'processSrc') ) ); gulp.task( 'dev', gulp.series( - gulp.parallel('copyFonts', 'buildTokens', 'processDemo', 'processDev','sassWatch') + gulp.parallel('buildTokens', 'processDemo', 'processDev','sassWatch') ) ); diff --git a/template/package.temp b/template/package.temp index b85e03b2..86ec77a9 100644 --- a/template/package.temp +++ b/template/package.temp @@ -57,7 +57,6 @@ "autoprefixer": "^9.6.0", "concat": "^1.0.3", "copyfiles": "^2.1.0", - "css-byebye": "^2.0.0", "focus-visible": "^4.1.5", "gulp": "^4.0.1", "gulp-autoprefixer": "^6.0.0", @@ -107,11 +106,7 @@ "test:watch": "karma start --auto-watch=true --single-run=false", "test:ci": "npm-run-all test lint", "processSrc": "gulp processSrc", - "processImportsCanonical": "gulp processImportsCanonical", - "processImportsVariable": "gulp processImportsVariable", - "reprocessClean": "gulp reprocessClean", - "ciBuild": "npm-run-all buildTokens processSrc processImportsCanonical processImportsVariable stylefluxCanonical stylefluxVariable reprocessClean distTokens sassRender distJS", - "devBuild": "npm-run-all buildTokens processSrc distTokens sassRender distJS" + "ciBuild": "npm-run-all buildTokens processSrc distTokens sassRender distJS" }, "husky": { "hooks": {