Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues and cleanup #16

Merged
merged 10 commits into from
Feb 26, 2020
Prev Previous commit
Next Next commit
fix: remove CSS post processing #11
  • Loading branch information
blackfalcon committed Feb 26, 2020
commit 1d582c01dabee466c2491dc56117fad6aea8f345
7 changes: 1 addition & 6 deletions template/.travis.temp
Original file line number Diff line number Diff line change
@@ -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
8 changes: 5 additions & 3 deletions template/demo/sass/style.scss
Original file line number Diff line number Diff line change
@@ -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
110 changes: 3 additions & 107 deletions template/gulpfile.js
Original file line number Diff line number Diff line change
@@ -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')
)
);
7 changes: 1 addition & 6 deletions template/package.temp
Original file line number Diff line number Diff line change
@@ -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": {