fix: remove CSS post processing #11

AlaskaAirlines · Feb 26, 2020 · ca09c2b · ca09c2b
1 parent 31bf54a
commit ca09c2b
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 114 deletions.
diff --git 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
@@ -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
@@ -24,23 +24,23 @@ 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');
+  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();
-});
+// gulp.task('copyFonts', function(cb) {
+//   copyfiles(
+//     [
+//       './node_modules/@alaskaairux/orion-web-core-style-sheets/dist/fonts/*.*',
+//       './demo/fonts/',
+//     ],
+//     true,
+//     cb
+//   );
+//   cb();
+// });
 
 // task to build CSS/Sass resources from Token JSON files
 gulp.task('buildTokens', function(cb) {
@@ -112,75 +112,75 @@ 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 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() {
@@ -211,23 +211,23 @@ 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')
+// // 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([
+//     // 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"],
-      })
-    ]))
+//       selectorReplace({
+//         before: [":host", "&(:not(.is-touching))", "&(.focus-visible)"],
+//         after: ["&", "&:not(.is-touching)", "&.focus-visible"],
+//       })
+//     ]))
 
-    // Output final CSS in destination
-    .pipe(gulp.dest('./altImports/'));
-});
+//     // Output final CSS in destination
+//     .pipe(gulp.dest('./altImports/'));
+// });
 
 // Sass watcher
 gulp.task('sassWatch', function() {
@@ -242,13 +242,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
@@ -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": {