From ca387bcabe753b6a2448f9b186387b88c5207426 Mon Sep 17 00:00:00 2001 From: Irma Kurnia Date: Mon, 8 May 2023 15:33:46 +0700 Subject: [PATCH] perf: update to Lit2.0, TS support, issue templates, component registration extension #167 Change to be committed: modified: .npmignore modified: .stylelintrc modified: package-lock.json modified: package.json modified: README.md new file: tsconfig.json modified: .github/settings.yml deleted: .github/ISSUE_TEMPLATE/bug_report.md new file: .github/ISSUE_TEMPLATE/bug_report.yml deleted: .github/ISSUE_TEMPLATE/feature_request.md new file: .github/ISSUE_TEMPLATE/feature_request.yml deleted: .github/ISSUE_TEMPLATE/general-support.md new file: .github/ISSUE_TEMPLATE/general-support.yml modified: .husky/pre-commit modified: demo/index.html modified: scripts/postCss.js deleted: scripts/removeNonRemPlugin.js modified: src/auro-hyperlink.js deleted: src/style-fixed.scss --- .github/ISSUE_TEMPLATE/bug_report.md | 57 ----- .github/ISSUE_TEMPLATE/bug_report.yml | 56 +++++ .github/ISSUE_TEMPLATE/feature_request.md | 29 --- .github/ISSUE_TEMPLATE/feature_request.yml | 29 +++ .github/ISSUE_TEMPLATE/general-support.md | 33 --- .github/ISSUE_TEMPLATE/general-support.yml | 24 +++ .github/settings.yml | 2 +- .husky/pre-commit | 2 +- .npmignore | 2 + .stylelintrc | 109 +--------- README.md | 120 +++++------ demo/index.html | 18 +- package-lock.json | 232 --------------------- package.json | 23 +- scripts/postCss.js | 121 +---------- scripts/removeNonRemPlugin.js | 27 --- src/auro-hyperlink.js | 6 +- src/style-fixed.scss | 5 - tsconfig.json | 18 ++ 19 files changed, 226 insertions(+), 687 deletions(-) delete mode 100644 .github/ISSUE_TEMPLATE/bug_report.md create mode 100644 .github/ISSUE_TEMPLATE/bug_report.yml delete mode 100644 .github/ISSUE_TEMPLATE/feature_request.md create mode 100644 .github/ISSUE_TEMPLATE/feature_request.yml delete mode 100644 .github/ISSUE_TEMPLATE/general-support.md create mode 100644 .github/ISSUE_TEMPLATE/general-support.yml delete mode 100644 scripts/removeNonRemPlugin.js delete mode 100644 src/style-fixed.scss create mode 100644 tsconfig.json diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md deleted file mode 100644 index 88b957b..0000000 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -name: Bug report -about: Create a report to help us improve -title: '[issue summary] Please verify code version before submitting new issue' -labels: 'auro-hyperlink, Type: Bug, not-reviewed' ---- - -## Describe the bug - - - -## Verify the version of @aurodesignsystem/auro-hyperlink you have installed - -**The current version is:** -[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-hyperlink?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-hyperlink) - -My project has @aurodesignsystem/auro-hyperlink v installed - -## To Reproduce - -Steps to reproduce the behavior: - -1. Go to '...' -1. Click on '....' -1. Scroll down to '....' -1. See error - -Are you able to reproduce this issue on the [Auro doc site](https://auro.alaskaair.com/)? - -- [ ] YES -- [ ] NO - -## Expected behavior - - - -## Screenshots - - - -## Desktop (please complete the following information): - - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] - -## Smartphone (please complete the following information): - - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] - -## Additional context - - - diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml new file mode 100644 index 0000000..a6a0c97 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -0,0 +1,56 @@ +name: Feature request +description: Create a report to help us improve +title: '[issue summary] Please verify version before submitting new issue' +labels: + - 'Type: Bug' + - not-reviewed + - auro-hyperlink +body: + - type: markdown + attributes: + value: | + Thanks for taking the time to fill out this bug report! + - type: input + id: version + attributes: + label: Please verify the version of auro-hyperlink you have installed + - type: markdown + attributes: + value: > + [![See it on + NPM!](https://img.shields.io/npm/v/@alaskaairux/auro-hyperlink?style=for-the-hyperlink&color=orange)](https://www.npmjs.com/package/@alaskaairux/auro-hyperlink) + - type: textarea + id: details + attributes: + label: Please describe the bug + description: List out the steps to reproduce the behavior + placeholder: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error + - type: dropdown + id: repro + attributes: + label: Reproducing the error + description: Are you able to reproduce this issue on the [Auro docsite](https://auro.alaskaair.com/)? + options: + - This issue is reproducible on the Auro docsite + - This issue cannot be reproduced on the Auro docsite + - type: textarea + id: expected + attributes: + label: Expected behavior + description: Please add a clear and concise description of what you expected to + happen. + - type: dropdown + id: browsers + attributes: + label: What browsers are you seeing the problem on? + multiple: true + options: + - Firefox + - Chrome + - Safari + - Microsoft Edge + - type: textarea + id: context + attributes: + label: Additional context + description: Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md deleted file mode 100644 index 6d751f5..0000000 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -name: Feature request -about: Suggest an idea for this project -title: '[feature summary]' -labels: 'auro-hyperlink, Type: Feature, not-reviewed' ---- - -## Is your feature request related to a problem? Please describe. - - - -## Describe the solution you'd like - - - -## Describe alternatives you've considered - - - -## Additional context - - - -## Verify the version of @aurodesignsystem/auro-hyperlink you have installed - -**The current version is:** -[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-hyperlink?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-hyperlink) - -My project has @aurodesignsystem/auro-hyperlink v installed diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml new file mode 100644 index 0000000..1073c4b --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -0,0 +1,29 @@ +name: Feature request +description: Suggest an idea for this project +title: 'auro-hyperlink: [feature summary]' +labels: + - 'Type: Feature' + - not-reviewed + - auro-hyperlink +body: + - type: textarea + id: request + attributes: + label: Is your feature request related to a problem? Please describe. + description: A clear and concise description of what the problem is. + placeholder: Ex. I'm always frustrated when [...] + - type: textarea + id: solution + attributes: + label: Describe the solution you'd like + description: A clear and concise description of what you want to happen. + - type: textarea + id: alternative + attributes: + label: Describe alternatives you've considered + description: A clear and concise description of any alternative solutions or features you've considered. + - type: textarea + id: context + attributes: + label: Additional context + description: Add any other context or screenshots about the feature request here. diff --git a/.github/ISSUE_TEMPLATE/general-support.md b/.github/ISSUE_TEMPLATE/general-support.md deleted file mode 100644 index 86ad986..0000000 --- a/.github/ISSUE_TEMPLATE/general-support.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -name: General support -about: Suggestions that are not related to bugs or new features -title: 'As a [user] I need help with [issue]' -labels: 'auro-hyperlink, not-reviewed' ---- - -# General Support Request - - - - -## Support request - - - -## Possible Solution - - - - -## Context - - - - -## Your Environment - - - -* Browser Name and version: -* Operating System and version (desktop or mobile): -* Link to your project: diff --git a/.github/ISSUE_TEMPLATE/general-support.yml b/.github/ISSUE_TEMPLATE/general-support.yml new file mode 100644 index 0000000..42f4407 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/general-support.yml @@ -0,0 +1,24 @@ +name: General support +description: Suggestions that are not related to bugs or new features +title: 'auro-hyperlink: [issue]' +labels: + - 'Type: Question' + - 'Type: Feature' + - not-reviewed + - auro-hyperlink +body: + - type: textarea + id: request + attributes: + label: General Support Request + description: A clear and concise description of what you are interested in seeing. + - type: textarea + id: solution + attributes: + label: Possible Solution + description: Not obligatory, but suggest an idea of how to implement the requested update. + - type: textarea + id: context + attributes: + label: Additional context + description: Add any other context or screenshots about the feature request here. diff --git a/.github/settings.yml b/.github/settings.yml index 191e7de..eb83083 100644 --- a/.github/settings.yml +++ b/.github/settings.yml @@ -51,7 +51,7 @@ branches: dismiss_stale_reviews: true # Blocks merge until code owners have reviewed. require_code_owner_reviews: true - # Specify which users and teams can dismiss pull request reviews. Pass an empty dismissal_restrictions object to disable. User and team dismissal_restrictions are only available for organization-owned repositories. Omit this parameter for personal repositories. + # Required. Require status checks to pass before merging. Set to null to disable dismissal_restrictions: users: ["blackfalcon"] # Required. Require status checks to pass before merging. Set to null to disable diff --git a/.husky/pre-commit b/.husky/pre-commit index deb2b66..06563ea 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -./node_modules/.bin/npm-run-all preCommit test linters postinstall +./node_modules/.bin/npm-run-all linters test diff --git a/.npmignore b/.npmignore index f0aa48b..05723d8 100644 --- a/.npmignore +++ b/.npmignore @@ -18,6 +18,8 @@ demo/**/*.scss demo/**/*.html demo/**/*.md +dist/es5.js + index.html # ignore src diff --git a/.stylelintrc b/.stylelintrc index ca06604..92d834b 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,107 +1,12 @@ { - "extends": ["stylelint-config-recommended", "stylelint-config-idiomatic-order", "stylelint-config-standard-scss"], - "plugins": [ - "stylelint-scss" + "extends": [ + "stylelint-config-recommended" ], "rules": { - "alpha-value-notation": "number", - "at-rule-empty-line-before": [ "always", { - "except": [ - "after-same-name", - "blockless-after-same-name-blockless", - "first-nested", - ], - "ignore": [ - "after-comment", - "blockless-after-blockless" - ] - } ], - "at-rule-no-unknown": null, - "color-function-notation": "modern", - "color-named": "never", - "declaration-block-no-duplicate-custom-properties": true, - "declaration-block-no-duplicate-properties": true, - "declaration-block-no-redundant-longhand-properties": true, - "declaration-no-important": true, - "font-family-name-quotes": "always-where-recommended", - "font-weight-notation": "numeric", - "function-url-no-scheme-relative": true, - "function-url-quotes": "always", - "hue-degree-notation": "angle", - "max-nesting-depth": 5, - "named-grid-areas-no-invalid": true, - "no-empty-source": null, - "no-unknown-animations": true, - "no-invalid-position-at-import-rule": null, - "scss/at-else-closing-brace-newline-after": "always-last-in-chain", - "scss/at-else-closing-brace-space-after": "always-intermediate", - "scss/at-else-empty-line-before": "never", - "scss/at-else-if-parentheses-space-before": "always", - "scss/at-function-parentheses-space-before": "never", - "scss/at-if-closing-brace-newline-after": "always-last-in-chain", - "scss/at-if-closing-brace-space-after": "always-intermediate", - "scss/at-if-no-null": true, - "scss/at-import-partial-extension": null, - "scss/at-mixin-parentheses-space-before": "never", - "scss/at-rule-conditional-no-parentheses": true, - "scss/at-rule-no-unknown": true, - "scss/comment-no-empty": true, - "scss/declaration-nested-properties-no-divided-groups": true, - "scss/dollar-variable-colon-newline-after": "always-multi-line", - "scss/dollar-variable-colon-space-after": "always-single-line", - "scss/dollar-variable-colon-space-before": "never", - "scss/dollar-variable-empty-line-before": [ - "always", - { - "except": [ - "first-nested", - "after-dollar-variable" - ], - "ignore": [ - "after-comment", - "inside-single-line-block" - ] - } - ], - "scss/dollar-variable-first-in-block": [ - true, - { - "ignore": [ - "comments", - "imports" - ] - } - ], - "scss/dollar-variable-no-missing-interpolation": true, - "scss/double-slash-comment-whitespace-inside": "always", - "scss/map-keys-quotes": "always", - "scss/no-duplicate-dollar-variables": true, - "scss/no-duplicate-mixins": true, - "scss/no-global-function-names": true, - "scss/operator-no-newline-after": true, - "scss/operator-no-newline-before": true, - "scss/operator-no-unspaced": true, - "scss/selector-nest-combinators": "always", - "scss/selector-no-redundant-nesting-selector": true, - "selector-attribute-quotes": "always", - "selector-max-attribute": 1, - "selector-max-class": 1, - "selector-max-combinators": 1, - "selector-max-compound-selectors": 2, - "selector-max-id": 1, - "selector-max-pseudo-class": 2, - "selector-max-type": 1, - "selector-max-universal": 1, - "selector-no-qualifying-type": true, - "selector-pseudo-element-colon-notation": "single", - "selector-type-no-unknown": [ - true, - { - "ignore": [ - "custom-elements" - ] - } - ], - "shorthand-property-no-redundant-values": true + "no-duplicate-selectors": null, + "font-family-no-duplicate-names": null, + "no-descending-specificity": null, + "selector-type-no-unknown": null, + "declaration-block-no-duplicate-properties": null } } diff --git a/README.md b/README.md index d9cb722..054c747 100644 --- a/README.md +++ b/README.md @@ -15,8 +15,8 @@ The following sections are editable by making changes to the following files: | Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` | | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` | | Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` | ---> - +--> + # Hyperlink @@ -24,18 +24,18 @@ The following sections are editable by making changes to the following files: `` is a wrapper components for an HTML `` element containing styling and behavior. - - + + ## Default auro-hyperlink - - + + ```html -Hello World -``` - - +Hello World +``` + + ## hyperlink use cases @@ -45,19 +45,19 @@ The `` elements should be used in situations where users may: * stand-alone link element for navigation * inline link element for navigation * optional role as button when hyperlink UI is needed for submit action - - + + ## UI development browser support For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport) - - + + ## Installation and Use -Installation and use of auro-hyperlink can be done as either a JS Import or using the bundled CDN asset, then reference the Custom Element in your HTML. - +Installation and use of auro-hyperlink can be done as either a JS Import or using the bundled CDN asset, then reference the Custom Element in your HTML. + ### JS Import @@ -72,66 +72,60 @@ $ npm i @aurodesignsystem/auro-hyperlink Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer. - - + + ### Define dependency in project component Defining the component dependency within each component that is using the `` component. - - + + ```js import "@aurodesignsystem/auro-hyperlink"; ``` - - + + ### CDN Use -In cases where the project is not able to process JS assets, there are pre-processed assets available for use. - +In cases where the project is not able to process JS assets, there are pre-processed assets available for use. + #### Install Include the following HTML code in the `` element of your page. - - + + ```html - - - -``` - -**NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk. - -### CDN options - -Both [Unpkg](https://www.unpkg.com/) and [JSDelivr](https://www.jsdelivr.com/) are free open source options that you can use. These are 3rd party resources and Auro is not responsible for their uptime. **Use at your own risk.** These bundle resources are included with the npm package, you are free to use any CDN resource that fits your needs. + + + +``` -**NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk. - +**NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk. + ### Using the custom element After the web component is imported by JavaScript or CDN, reference the component in HTML. - - + + ```html -Hello World -``` +Hello World +``` -Review the API documentation for advanced uses and examples. - +Review the API documentation for advanced uses and examples. + ### Limitations and Risks When multiple micro frontends are combined and result in a custom element being imported more than once, only the first instance of the imported custom element is used. All subsequent attempts to load the custom element will fail. If a micro frontend loaded into the document subsequently attempts to load a new version of the component with an updated API, it will fail to load. This can result in unexpected API functionality. -For a detailed explanation of this issue, see this article: [Versioning Web Components](https://dev.to/florianrappl/versioning-web-components-3bda) by [Florian Rappl](https://dev.to/florianrappl). - +For a detailed explanation of this issue, see this article: [Versioning Web Components](https://dev.to/florianrappl/versioning-web-components-3bda) by [Florian Rappl](https://dev.to/florianrappl). + ### Recommended Use and Version Control There are two important parts of every Auro component. The class and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-hyperlink` custom element is defined automatically. @@ -147,16 +141,16 @@ registerComponent('custom-hyperlink'); This will create a new custom element that you can use in your HTML that will function identically to the `auro-hyperlink` element. ```html - -``` - + +``` + ### Design Token CSS Custom Property dependency The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens). - - + + ### CSS Custom Property fallbacks @@ -164,8 +158,8 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens]( Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties. - - + + ## Development @@ -173,8 +167,8 @@ In order to develop against this project, if you are not part of the core team, Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document. - - + + ### Start development environment @@ -194,29 +188,29 @@ $ npm run build:watch $ npm run serve ``` - - + + ### API generation The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control. - - + + ### Testing Automated tests are required for every Auro component. See `.\test\auro-hyperlink.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details. - - + + ### Bundled assets Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets. - - + + ### Demo deployment diff --git a/demo/index.html b/demo/index.html index 98ac98e..b8fc83c 100644 --- a/demo/index.html +++ b/demo/index.html @@ -20,18 +20,18 @@ - - - + + +
- - - + + + diff --git a/package-lock.json b/package-lock.json index 5e3ca4d..d517008 100644 --- a/package-lock.json +++ b/package-lock.json @@ -496,12 +496,6 @@ "@jridgewell/trace-mapping": "0.3.9" } }, - "@csstools/cascade-layer-name-parser": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.2.tgz", - "integrity": "sha512-xm7Mgwej/wBfLoK0K5LfntmPJzoULayl1XZY9JYgQgT29JiqNw++sLnx95u5y9zCihblzkyaRYJrsRMhIBzRdg==", - "dev": true - }, "@csstools/css-parser-algorithms": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.1.1.tgz", @@ -4679,23 +4673,6 @@ "function-bind": "^1.1.1" } }, - "has-ansi": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", - "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==", - "dev": true, - "requires": { - "ansi-regex": "^2.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==", - "dev": true - } - } - }, "has-bigints": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", @@ -5400,12 +5377,6 @@ "integrity": "sha512-qjdpeo2yKlYTH7nFdK0vbZWuTCesk4o63v5iVOlhMQPfuIZQfW/HI35SjfhA+4qpg36rnFSvUK5b1m+ckIblQQ==", "dev": true }, - "js-base64": { - "version": "2.6.4", - "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz", - "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==", - "dev": true - }, "js-sdsl": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.4.0.tgz", @@ -8609,12 +8580,6 @@ "boolbase": "^1.0.0" } }, - "object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true - }, "object-inspect": { "version": "1.12.3", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz", @@ -9012,18 +8977,6 @@ "source-map-js": "^1.0.2" } }, - "postcss-custom-properties": { - "version": "13.1.5", - "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.1.5.tgz", - "integrity": "sha512-98DXk81zTGqMVkGANysMHbGIg3voH383DYo3/+c+Abzay3nao+vM/f4Jgzsakk9S7BDsEw5DiW7sFy5G4W2wLA==", - "dev": true, - "requires": { - "@csstools/cascade-layer-name-parser": "^1.0.2", - "@csstools/css-parser-algorithms": "^2.1.1", - "@csstools/css-tokenizer": "^2.1.1", - "postcss-value-parser": "^4.2.0" - } - }, "postcss-discard-comments": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz", @@ -9036,191 +8989,6 @@ "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==", "dev": true }, - "postcss-rem-to-pixel": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/postcss-rem-to-pixel/-/postcss-rem-to-pixel-4.1.2.tgz", - "integrity": "sha512-EaA1Ak5SxmT31KA1clM4jRcEXQQ7oceXM2WF59fJw/mhspn1fhm202ZIfto5qFCX4QVuk/WVvATfkWaIlMomSw==", - "dev": true, - "requires": { - "object-assign": "^4.1.0", - "postcss": "^5.2.10" - }, - "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==", - "dev": true - }, - "ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==", - "dev": true - }, - "chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==", - "dev": true, - "requires": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - }, - "dependencies": { - "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==", - "dev": true - } - } - }, - "escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true - }, - "has-flag": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", - "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==", - "dev": true - }, - "postcss": { - "version": "5.2.18", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz", - "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==", - "dev": true, - "requires": { - "chalk": "^1.1.3", - "js-base64": "^2.1.9", - "source-map": "^0.5.6", - "supports-color": "^3.2.3" - } - }, - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", - "dev": true - }, - "strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==", - "dev": true, - "requires": { - "ansi-regex": "^2.0.0" - } - }, - "supports-color": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", - "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==", - "dev": true, - "requires": { - "has-flag": "^1.0.0" - } - } - } - }, - "postcss-remove-rules": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/postcss-remove-rules/-/postcss-remove-rules-1.0.0.tgz", - "integrity": "sha512-eQHFhEwYjeJAWJgMmoviC9E4HxLYivGEux7GbgU0IdBS7G9zSOjd0RLFIEGa5Lx0wL17pEWWPVlekGuIo4mcfg==", - "dev": true, - "requires": { - "postcss": "^5.0.21" - }, - "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==", - "dev": true - }, - "ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==", - "dev": true - }, - "chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==", - "dev": true, - "requires": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - }, - "dependencies": { - "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==", - "dev": true - } - } - }, - "escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true - }, - "has-flag": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", - "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==", - "dev": true - }, - "postcss": { - "version": "5.2.18", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz", - "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==", - "dev": true, - "requires": { - "chalk": "^1.1.3", - "js-base64": "^2.1.9", - "source-map": "^0.5.6", - "supports-color": "^3.2.3" - } - }, - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", - "dev": true - }, - "strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==", - "dev": true, - "requires": { - "ansi-regex": "^2.0.0" - } - }, - "supports-color": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", - "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==", - "dev": true, - "requires": { - "has-flag": "^1.0.0" - } - } - } - }, "postcss-resolve-nested-selector": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", diff --git a/package.json b/package.json index e0c958a..df6204b 100644 --- a/package.json +++ b/package.json @@ -61,10 +61,7 @@ "nodemon": "^2.0.21", "npm-run-all": "^4.1.5", "postcss": "^8.4.20", - "postcss-custom-properties": "^13.1.4", "postcss-discard-comments": "^5.1.2", - "postcss-rem-to-pixel": "^4.1.2", - "postcss-remove-rules": "^1.0.0", "postcss-selector-replace": "^1.0.2", "prismjs": "^1.29.0", "rollup": "^3.20.0", @@ -77,6 +74,7 @@ "stylelint-config-standard-scss": "^7.0.1", "stylelint-order": "^6.0.3", "stylelint-scss": "^4.5.0", + "typescript": "^5.0.3", "wc-sass-render": "^1.4.0", "web-component-analyzer": "^1.1.6", "whatwg-fetch": "^3.6.2", @@ -135,28 +133,33 @@ "web components" ], "scripts": { - "build": "npm-run-all build:sass sass:render build:api test build:markdownDocs bundler postinstall", - "build:api": "wca analyze 'src/auro-hyperlink.js' --outFiles docs/api.md", + "build": "npm-run-all build:sass sass:render cssLint dist:js bundler postinstall build:api types", + "build:api": "wca analyze 'src/auro-badge.js' --outFiles docs/api.md", "build:demo": "node ./scripts/prepForBuild", - "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render build:markdownDocs", + "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render", "build:markdownDocs": "node scripts/generateDocs.js", "build:sass": "npm-run-all build:sass:component postCss:component sass:render", "build:sass:component": "sass --no-source-map src:src", - "build:watch": "nodemon -e scss,js,html --watch src --watch demo --exec npm run build:dev:assets", + "build:watch": "nodemon -e scss,js --watch src --exec npm run build:dev:assets", "bundler": "rollup -c", "bundler:test": "rollup -c -w", + "ciBuild": "npm-run-all build:sass sass:render cssLint distJS bundler postinstall apiBuild", + "cssLint": "stylelint \"./src/*.css\"", "dev": "concurrently --kill-others 'npm run build:watch' 'npm run serve'", + "demo:build": "npm-run-all ciBuild demo:rmBuild demo:newBuild demo:copyIndex demo:copyDemo demo:updateIndex", + "dist:js": "copyfiles -u 1 -V './src/**/*.js' ./dist", "esLint": "./node_modules/.bin/eslint src/**/*.js", - "linters": "npm-run-all scssLint esLint", + "linters": "npm-run-all cssLint esLint", "preCommit": "node scripts/pre-commit.js", "postCss:component": "node ./scripts/postCss.js", "postinstall": "node packageScripts/postinstall.js", "sass:render": "sass-render src/*.css -t ./scripts/staticStyles-template.js", - "scssLint": "stylelint \"./src/**/*.scss\"", "serve": "web-dev-server --open demo/ --node-resolve --watch", "sweep": "rm -rf ./demo/css ./dist | rm ./src/*.css ./src/*-css.js", "test": "wtr --coverage", + "test:ci": "npm-run-all test lint", "test:watch": "wtr --watch", - "prepare": "husky install" + "prepare": "husky install", + "types": "tsc" } } diff --git a/scripts/postCss.js b/scripts/postCss.js index ea624b9..8de4c7e 100644 --- a/scripts/postCss.js +++ b/scripts/postCss.js @@ -1,123 +1,18 @@ const autoprefixer = require('autoprefixer'); -const chalk = require('chalk'); 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 path = require('path'); const fs = require('fs'); -const directoryPath = path.join(__dirname, '../src'); -let cssFiles = []; -let fixedCssFiles = []; -/** - * Default postCSS run - */ -fs.readdir(directoryPath, function (err, files) { - //handling error - if (err) { - return console.log('Unable to scan directory: ' + err); - } - //listing all files using forEach - files.forEach(function (file) { - if (file.includes(".css") && !file.includes("-fixed.css")) { - cssFiles.push(file.replace(".css", "")); - standardProcessor(file); - } - }); -}); - -/** - * Addresses postCSS run of style-fixed files. - */ - fs.readdir(directoryPath, function (err, files) { - //handling error - if (err) { - return console.log('Unable to scan directory: ' + err); - } - //listing all files using forEach - files.forEach(function (file) { - if (file.includes("-fixed.css")) { - fixedCssFiles.push(file.replace(".css", "").replace("-fixed", "")); - fixedProcessor(file); - } - }); -}); - -/** - * The standardProcessor function applies tokens for fallback selectors - * and completes a post cleanup. - * @param {string} file - */ - function standardProcessor(file) { - fs.readFile(`src/${file}`, (err, css) => { - postcss([autoprefixer, postcssCustomProperties, comments]) +fs.readFile('src/style.css', (err, css) => { + postcss([autoprefixer, comments]) .use(comments({ remove: function(comment) { return comment[0] == "@"; } })) - .use(removeRules({ - rulesToRemove: { - ':root': '*' - } - })) - .process(css, { from: `src/${file}`, to: `src/${file}` }) + .process(css, { from: 'src/style.css', to: 'src/style.css' }) .then(result => { - fs.writeFile(`src/${file}`, result.css, () => true) - }) - }); -} - -/** - * Output a "fixed" stylesheet that only contains - * declarations with rem units converted to their px equivalent. - * @param {string} file - */ - function fixedProcessor(file) { - fs.readFile(`src/${file}`, (err, css) => { - postcss([ - autoprefixer, - postcssCustomProperties({preserve: false}), - comments, - removeNonRem, - remToPx({replace: true, propList: ['*']}) - ]) - .use(comments({ - remove: function(comment) { return comment[0] == "@"; } - })) - .process(css, { from: `src/${file}`, to: `src/${file}` }) - .then(result => { - fs.writeFile(`src/${file}`, result.css, () => true) + fs.writeFile('src/style.css', result.css, () => true) + if ( result.map ) { + fs.writeFile('src/style.map', result.map, () => true) + } }) - }); -} - -/** - * Function to compare generated arrays based on CSS files in ./src dir. - * Purpose to print warning to user if necessary files are not created. - * @param {array} a - * @param {array} b - */ -function compareLists(a, b) { - const result = a.every((val, index) => val === b[index]) - - if (!result) { - console.log(chalk.hex('#f26135')(` -╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ──────────────────────────────╮ - - WARNING!! It's been detected that your list of CSS - files is not equal to the required '-fixed' versions. - -╰─────────────────────────────── ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯ - `)); - } -} - -/** - * Timeout function to allow for generation of arrays - * to be compared in compareLists() function. - */ -setTimeout(function() { - compareLists(cssFiles, fixedCssFiles); -}, 500); +}); diff --git a/scripts/removeNonRemPlugin.js b/scripts/removeNonRemPlugin.js deleted file mode 100644 index c03c5a5..0000000 --- a/scripts/removeNonRemPlugin.js +++ /dev/null @@ -1,27 +0,0 @@ -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(); - } - }); - }; -}); diff --git a/src/auro-hyperlink.js b/src/auro-hyperlink.js index d27c8c0..7c9fdf3 100644 --- a/src/auro-hyperlink.js +++ b/src/auro-hyperlink.js @@ -10,7 +10,6 @@ import ComponentBase from './component-base'; // import the processed CSS file into the scope of the component import styleCss from "./style-css.js"; -import styleCssFixed from './style-fixed-css.js'; // See https://git.io/JJ6SJ for "How to document your components using JSDoc" /** @@ -40,10 +39,7 @@ export class AuroHyperlink extends ComponentBase { } static get styles() { - return [ - styleCss, - styleCssFixed - ]; + return [styleCss]; } /** diff --git a/src/style-fixed.scss b/src/style-fixed.scss deleted file mode 100644 index 402d429..0000000 --- a/src/style-fixed.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties'; - -:host([fixed]) { - @import './style.scss'; -} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..60e508c --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,18 @@ +{ + "include": ["src/**/*.js"], // process the generated JS files from the src js files + "exclude": [], + "compilerOptions": { + // Tells TypeScript to read JS files, as + // normally they are ignored as source files + "allowJs": true, + // Generate d.ts files + "declaration": true, + // This compiler run should + // only output d.ts files + "emitDeclarationOnly": true, + "outDir": "dist", + // go to js file when using IDE functions like + // "Go to Definition" in VSCode + "declarationMap": true + } +}