feat: add support for fixed px feature

.gitignore

@@ -10,7 +10,7 @@ altImports/
 ## CSS built from Sass process
 demo/css
 demo/sass/tokenProperties.scss
-src/style.css
+src/*.css
 
 ## *-css built from sass-render process
 *-css.js

demo/index.html

@@ -25,6 +25,14 @@
       <h1>auro-header</h1>
       <h2>default display types</h2>
 
+      <demo-snippet>
+        <template>
+          <auro-header>Hello World!</auro-header>
+          <auro-header type="px">Hello World!</auro-header>
+          <auro-header fixed>Hello World!</auro-header>
+        </template>
+      </demo-snippet>
+
       <demo-snippet>
         <template>
           <auro-header >Hello World!</auro-header>

docs/api.md

@@ -2,6 +2,13 @@
 
 auro-header is a custom element to make using headers with the Auro Design System seamless and easy.
 
+## Attributes
+
+| Attribute | Type      | Description                                      |
+|-----------|-----------|--------------------------------------------------|
+| `fixed`   | `Boolean` | Uses px values instead of rem                    |
+| `type`    | `String`  | **DEPRECATED** Option, `px`. Legacy option for converting REMs to PX. Use `fixed` feature. |
+
 ## Properties
 
 | Property  | Attribute | Type     | Default   | Description                                      |
@@ -11,4 +18,3 @@ auro-header is a custom element to make using headers with the Auro Design Syste
 | `level`   | `level`   | `String` |           | Determines heading level for HTML element. Options are `1` - `6` |
 | `margin`  | `margin`  | `String` |           | Specify either top or bottom margin(s) to be altered |
 | `size`    | `size`    | `String` |           | Specify size of margin adjustment, either `none`, `xxxs`, `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl` or `xxxl` |
-| `type`    | `type`    | `String` |           | Defines of CSS type of component. Option, `px`. To be used in areas where outer REM values cause inconsistent display of styles. |

package.json

@@ -66,6 +66,7 @@
     "postcss": "^7.0.32",
     "postcss-custom-properties": "^9.1.1",
     "postcss-discard-comments": "^4.0.2",
+    "postcss-rem-to-pixel": "^4.1.2",
     "postcss-remove-rules": "^1.0.0",
     "postcss-selector-replace": "^1.0.2",
     "semantic-release": "^17.1.1",

scripts/postCss.js

@@ -1,9 +1,11 @@
-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')
+const autoprefixer = require('autoprefixer');
+const postcss = require('postcss');
+const remToPx = require('postcss-rem-to-pixel');
+const removeNonRem = require('./removeNonRemPlugin.js');
+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])
@@ -22,4 +24,30 @@ fs.readFile('src/style.css', (err, css) => {
         fs.writeFile('src/style.map', result.map, () => true)
       }
     })
-})
+});
+
+/*
+Output a "fixed" stylesheet that only contains declarations with rem units
+converted to their px equivalent.
+*/
+const fixedFile = 'src/style-fixed.css';
+const fixedFileMap = 'src/style-fixed.map';
+fs.readFile(fixedFile, (err, css) => {
+  postcss([
+    autoprefixer,
+    postcssCustomProperties({preserve: false}),
+    comments,
+    removeNonRem,
+    remToPx({replace: true, propList: ['*']})
+  ])
+  .use(comments({
+      remove: function(comment) { return comment[0] == "@"; }
+    }))
+    .process(css, { from: fixedFile, to: fixedFile })
+    .then(result => {
+      fs.writeFile(fixedFile, result.css, () => true)
+      if ( result.map ) {
+        fs.writeFile(fixedFileMap, result.map, () => true)
+      }
+    })
+});

scripts/removeNonRemPlugin.js

@@ -0,0 +1,29 @@
+const postcss = require('postcss');
+
+const customPropertyRegExp = /^--[A-z][\w-]*$/;
+// Remove all declarations that do not contain rems
+module.exports = postcss.plugin('remove-non-rem', function (opts) {
+  opts = opts || {};
+
+  return function (css) {
+    css.walkDecls(decl => {
+      if (!decl.value.includes('rem') || customPropertyRegExp.test(decl.prop)) {
+        decl.remove();
+      }
+    });
+
+    css.walkRules(rule => {
+      if (rule.nodes.length == 0) {
+        rule.remove();
+      }
+    });
+
+    css.walkAtRules(rule => {
+      if (rule.nodes.length == 0) {
+        rule.remove();
+      }
+    });
+
+    css.wa
+  };
+});

src/auro-header.js

@@ -3,12 +3,13 @@
 
 // ---------------------------------------------------------------------
 
-import { LitElement, html, css } from "lit-element";
+import { LitElement, html } from "lit-element";
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 // Import touch detection lib
 import "focus-visible/dist/focus-visible.min.js";
 import styleCss from "./style-css.js";
+import styleCssFixed from './style-fixed-css.js';
 
 /**
  * auro-header is a custom element to make using headers with the Auro Design System seamless and easy.
@@ -18,7 +19,8 @@ import styleCss from "./style-css.js";
  * @attr {String} color - Allows user to pass in CSS custom property or direct hex value to change the color of the header
  * @attr {String} margin - Specify either top or bottom margin(s) to be altered
  * @attr {String} size - Specify size of margin adjustment, either `none`, `xxxs`, `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl` or `xxxl`
- * @attr {String} type - Defines of CSS type of component. Option, `px`. To be used in areas where outer REM values cause inconsistent display of styles.
+ * @attr {String} type - **DEPRECATED** Option, `px`. Legacy option for converting REMs to PX. Use `fixed` feature.
+ * @attr {Boolean} fixed - Uses px values instead of rem
  */
 
 // build the component class
@@ -37,15 +39,15 @@ class AuroHeader extends LitElement {
                   reflect: true },
       color:    { type: String },
       margin:   { type: String },
-      size:     { type: String },
-      type:     { type: String }
+      size:     { type: String }
     };
   }
 
   static get styles() {
-    return css`
-      ${styleCss}
-    `;
+    return [
+      styleCss,
+      styleCssFixed
+    ]
   }
 
   /**

src/style-fixed.scss

@@ -0,0 +1,5 @@
+@import './node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SassCustomProperties';
+
+:host([fixed]) {
+  @import './style.scss';
+}

src/style.scss

@@ -15,6 +15,12 @@ $auro-spacing-types: stack;
 @import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap";
 @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/spacingUtility";
 
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- //
+
+// All the following code is DEPRECATED!
+// With the update for the FIXED feature, this is no longer needed.
+// REMOVE all support for this feature with the next MAJOR release.
+
 // the following styles are only to support use of auro-header
 // in legacy UIs where hard-px values are needed.
 :host([type=px]) {