refactor: remove postcss-remove-selectors package #15

AlaskaAirlines · Feb 26, 2020 · d0a2efe · d0a2efe
1 parent 6e4a2d4
commit d0a2efe
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 29 deletions.
diff --git a/template/gulpfile.js b/template/gulpfile.js
@@ -23,7 +23,7 @@ const gulp = require('gulp'),
   gulpautoprefixer = require('gulp-autoprefixer'),
   postcssCustomProperties = require('postcss-custom-properties'),
   postcss = require('gulp-postcss'),
-  removeSelectors = require('postcss-remove-selectors'),
+  removeRules = require('postcss-remove-rules'),
   StyleDictionary = require('style-dictionary');
 
 // task to build CSS/Sass resources from Token JSON files
@@ -85,9 +85,11 @@ gulp.task('processSrc', function() {
             preserve: true,
           }),
 
-          removeSelectors({
-            selectors: [':root'],
-          }),
+          removeRules({
+            rulesToRemove: {
+              ':root': '*'
+            }
+          })
         ])
       )
 
@@ -114,9 +116,11 @@ gulp.task('processDev', function() {
       // PostCss polyfill pipeline for CSS Custom Properties (CSS variables)
       .pipe(
         postcss([
-          removeSelectors({
-            selectors: [':root'],
-          }),
+          removeRules({
+            rulesToRemove: {
+              ':root': '*'
+            }
+          })
         ])
       )
 

diff --git a/template/package.temp b/template/package.temp
@@ -19,13 +19,13 @@
     "  3. Go to http://127.0.0.1:8081",
     "================================================================================"
   ],
-  "name": "@alaskaairux/ods-[name]",
+  "name": "@alaskaairux/ods-foo",
   "version": "0.0.0",
-  "description": "Orion Design System [name] element",
+  "description": "Orion Design System foo element",
   "author": "Product design and research",
   "repository": {
     "type": "git",
-    "url": "https://github.com/AlaskaAirlines/OrionStatelessComponents__ods-[name]"
+    "url": "https://github.com/AlaskaAirlines/OrionStatelessComponents__ods-foo"
   },
   "main": "index.js",
   "license": "Apache-2.0",
@@ -69,12 +69,11 @@
     "npm-watch": "^0.6.0",
     "postcss": "^7.0.17",
     "postcss-custom-properties": "^9.1.1",
-    "postcss-remove-selectors": "^2.0.0",
+    "postcss-remove-rules": "^1.0.0",
     "postcss-selector-replace": "^1.0.2",
     "semantic-release": "^15.13.16",
     "sinon": "^7.5.0",
     "style-dictionary": "^2.8.0",
-    "styleflux": "^1.2.0",
     "stylelint": "^13.2.0",
     "stylelint-config-standard": "^20.0.0",
     "wc-sass-render": "^1.2.1",
@@ -97,8 +96,6 @@
     "jsonLint": "jsonlint -q ./src/shape.json",
     "sassRender": "sass-render src/*.css src/tokens/*.scss",
     "sassRender-w": "sass-render -w src/**/*.{scss,css}",
-    "stylefluxCanonical": "styleflux -o ./altImports/canonical/*.css",
-    "stylefluxVariable": "styleflux -o ./altImports/variable/*.css",
     "sweep": "rm -rf ./altImports ./temp ./demo/css ./demo/fonts ./dist ./src/tokens | rm ./demo/sass/*token*.scss ./src/*.css ./src/*-css.js",
     "yamltest": "yamllint .travis.yml",
     "lint": "npm-run-all cssLint jsonLint yamltest",
@@ -148,14 +145,6 @@
     "access": "public"
   },
   "contributors": [
-    {
-      "name": "Dale Sande",
-      "email": "dale.sande@alaskaair.com"
-    },
-    {
-      "name": "Kevin Sonnichsen",
-      "email": "Kevin.Sonnichsen@alaskaair.com"
-    },
     {
       "name": "[author]",
       "email": "[author-email]"
@@ -164,7 +153,6 @@
   "keywords": [
     "alaska airlines",
     "orion design system",
-    "web components",
-    "[name]"
+    "web components"
   ]
 }
diff --git a/template/src/style.scss b/template/src/style.scss
@@ -3,11 +3,14 @@
 
 // ---------------------------------------------------------------------
 
-// Creates ods-[name] CSS UI definition of shape
+// Creates ods-foo CSS UI definition of shape
 
-// Boilerplate Sass imports
-@import "./tokens/tokenVariables";
-@import "./tokens/componentShapeVariables";
+// Import Auro tokens
+@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariables";
+@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SassCustomProperties";
+
+// Import deprecated  Design Token variables to support Orion values
+@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/tokenVariables";
 
 @import "./tokens/tokenProperties";
 @import "./tokens/componentShapeProperties";
@@ -31,5 +34,5 @@
 // }
 
 .testClass {
-  color: $color-base-galapagos;
+  color: var(--auro-color-border-primary-on-light);
 }