From d0a2efefc0f6d00d2797c9afe53529fca239ebd2 Mon Sep 17 00:00:00 2001 From: Dale Sande Date: Tue, 25 Feb 2020 20:08:22 -0800 Subject: [PATCH] refactor: remove postcss-remove-selectors package #15 --- template/gulpfile.js | 18 +++++++++++------- template/package.temp | 22 +++++----------------- template/src/style.scss | 13 ++++++++----- 3 files changed, 24 insertions(+), 29 deletions(-) diff --git a/template/gulpfile.js b/template/gulpfile.js index 867b084c..4b403fd3 100644 --- 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 index 103089e4..ba93301d 100644 --- 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 index 984e9704..0f45bb7c 100644 --- 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); }