feat: #17 remove gulp dependency

template/.travis.temp

@@ -13,7 +13,8 @@ notifactions:
   email: false
 
 before_script:
-  - npm run processSrc
+  - npm run sassBuild:component
+  - npm run postCss:component
   - npm run sassRender
   - npm run distJS
 

template/package.temp

@@ -53,22 +53,19 @@
     "@semantic-release/changelog": "^5.0.0",
     "@semantic-release/git": "^9.0.0",
     "@semantic-release/npm": "^7.0.3",
-    "@webcomponents/webcomponentsjs": "^2.2.9",
+    "@webcomponents/webcomponentsjs": "^[webcomponentsjs]",
     "autoprefixer": "^9.6.0",
     "concat": "^1.0.3",
     "copyfiles": "^2.1.0",
     "focus-visible": "^[focusVisible]",
-    "gulp": "^4.0.1",
-    "gulp-autoprefixer": "^7.0.1",
-    "gulp-postcss": "^8.0.0",
-    "gulp-sass": "^4.0.2",
     "husky": "^4.2.3",
     "lodash": "^4.17.11",
     "marked": "^0.8.0",
+    "nodemon": "^2.0.2",
     "npm-run-all": "^4.1.5",
-    "npm-watch": "^0.6.0",
     "postcss": "^7.0.17",
     "postcss-custom-properties": "^9.1.1",
+    "postcss-discard-comments": "^4.0.2",
     "postcss-remove-rules": "^1.0.0",
     "postcss-selector-replace": "^1.0.2",
     "rollup": "^1.31.1",
@@ -80,27 +77,30 @@
     "webpack-merge": "^4.2.2",
     "yaml-lint": "^1.2.4"
   },
-  "watch": {
-    "sassRender-w": ".src/**/*.scss"
-  },
+  "browserslist": [
+    "last 4 version",
+    "> 1%",
+    "IE 11"
+  ],
   "scripts": {
-    "build": "npm-run-all sassRender cssLint",
     "postinstall": "node packageScripts/postinstall.js",
     "cssLint": "stylelint './src/*.css'",
-    "dev": "npm-watch sassRender-w",
-    "dist": "npm-run-all distTokens sassRender cssLint",
+    "dev": "npm run sassBuild:watch",
     "distJS": "copyfiles -u 1 -V './src/**/*.js' ./dist",
     "sassRender": "sass-render src/*.css",
-    "sassRender-w": "sass-render -w src/**/*.{scss,css}",
     "sweep": "rm -rf ./altImports ./temp ./demo/css ./demo/fonts ./dist ./src/tokens | rm ./src/*.css ./src/*-css.js",
-    "yamltest": "yamllint .travis.yml",
-    "lint": "npm-run-all cssLint yamltest",
+    "lint": "npm-run-all cssLint test:yaml",
     "test": "karma start --coverage",
     "test:watch": "karma start --auto-watch=true --single-run=false",
     "test:ci": "npm-run-all test lint",
-    "processSrc": "gulp processSrc",
-    "processBuild": "gulp build",
-    "ciBuild": "npm-run-all processBuild processSrc sassRender distJS"
+    "test:yaml": "yamllint .travis.yml",
+    "ciBuild": "npm-run-all sassBuild sassRender cssLint distJS",
+    "sassBuild": "npm-run-all sassBuild:demo sassBuild:component postCss:component sassRender",
+    "sassBuild:dev": "npm-run-all sassBuild:demo sassBuild:component postCss:component sassRender",
+    "sassBuild:demo": "node-sass ./demo/sass/ --output ./demo/css/",
+    "sassBuild:component": "node-sass ./src/ --output ./src/",
+    "sassBuild:watch": "nodemon -e scss --watch src --exec npm run sassBuild:dev",
+    "postCss:component": "node ./scripts/postCss.js"
   },
   "husky": {
     "hooks": {

template/scripts/postCss.js

@@ -0,0 +1,25 @@
+const autoprefixer = require('autoprefixer')
+const postcss = require('postcss')
+const postcssCustomProperties = require('postcss-custom-properties')
+const removeRules = require('postcss-remove-rules')
+const comments = require('postcss-discard-comments')
+const fs = require('fs')
+
+fs.readFile('src/style.css', (err, css) => {
+  postcss([autoprefixer, postcssCustomProperties, comments])
+    .use(comments({
+      remove: function(comment) { return comment[0] == "@"; }
+    }))
+    .use(removeRules({
+      rulesToRemove: {
+        ':root': '*'
+      }
+    }))
+    .process(css, { from: 'src/style.css', to: 'src/style.css' })
+    .then(result => {
+      fs.writeFile('src/style.css', result.css, () => true)
+      if ( result.map ) {
+        fs.writeFile('src/style.map', result.map, () => true)
+      }
+    })
+})

template/src/style.scss

@@ -1,4 +1,4 @@
-// Copyright (c) [year] Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 // ---------------------------------------------------------------------
@@ -29,4 +29,7 @@
 
 .testClass {
   color:  var(--auro-color-border-error-on-light);
+  border: 1px solid var(--auro-color-border-error-on-light);
+  display: inline-block;
+  padding: var(--auro-text-body-size-default);
 }