Update scss compilation (#46)

* Compile scss down to a css file

* Set compressed

* Uprgade typescript

* Add changeset

.changeset/sour-mugs-joke.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/consul-ui-toolkit': patch
+---
+
+Fix the compilation of scss in the toolkit and upgrade typescript

documentation/app/styles/app.scss

@@ -1,8 +1,9 @@
 /**
  * Copyright (c) HashiCorp, Inc.
  */
-@import "@hashicorp/design-system-components";
-@import "@hashicorp/consul-ui-toolkit";
+@use "consul-ui-toolkit";
+@use "@hashicorp/design-system-components";
+
 @import "./components/list-item";
 @import "./components/component-api";
 @import "./components/page-header";

documentation/ember-cli-build.js

@@ -9,7 +9,6 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 module.exports = function (defaults) {
   let app = new EmberApp(defaults, {
     sassOptions: {
-      extension: 'scss',
       precision: 4,
       includePaths: [
         '../node_modules/@hashicorp/design-system-tokens/dist/products/css',

toolkit/package.json

@@ -53,6 +53,7 @@
     "@embroider/addon-dev": "^3.0.0",
     "@hashicorp/design-system-components": "^2.10.0",
     "@rollup/plugin-babel": "^5.3.0",
+    "@tsconfig/ember": "^3.0.0",
     "@types/ember": "^4.0.3",
     "@types/ungap__structured-clone": "^0.3.0",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
@@ -72,7 +73,7 @@
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-ts": "3.2.0",
     "sass": "^1.60.0",
-    "typescript": "^4.7.4"
+    "typescript": "^5.1.6"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

toolkit/rollup.config.mjs

@@ -20,7 +20,10 @@ export default {
   plugins: [
     // These are the modules that users should be able to import from your
     // addon. Anything not listed here may get optimized away.
-    addon.publicEntrypoints(['**/*.ts']),
+    addon.publicEntrypoints([
+      '**/*.ts',
+      'styles/@hashicorp/consul-ui-toolkit.scss',
+    ]),
 
     // These are the modules that should get reexported into the traditional
     // "app" tree. Things in here should also be in publicEntrypoints above, but
@@ -31,6 +34,15 @@ export default {
     // `dependencies` and `peerDependencies` as well as standard Ember-provided
     // package names.
     addon.dependencies(),
+    scss({
+      fileName: 'styles/consul-ui-toolkit.css',
+      outputStyle: 'compressed',
+      failOnError: true,
+      includePaths: [
+        '../node_modules/@hashicorp/design-system-tokens/dist/products/css',
+        '../node_modules/@hashicorp/design-system-components/app/styles',
+      ],
+    }),
 
     // This babel config should *not* apply presets or compile away ES modules.
     // It exists only to provide development niceties for you, like automatic
@@ -47,14 +59,9 @@ export default {
     // Ensure that standalone .hbs files are properly integrated as Javascript.
     addon.hbs(),
 
-    scss({
-      output: './build/css/style.css',
-      failOnError: true,
-    }),
-
     // addons are allowed to contain imports of .css files, which we want rollup
     // to leave alone and keep in the published output.
-    addon.keepAssets(['**/*.scss']),
+    addon.keepAssets(['**/*.css', '**/*/d.ts']),
 
     // Remove leftover build artifacts when starting a new build.
     addon.clean(),

toolkit/src/index.ts

@@ -1,5 +1,4 @@
 /**
  * Copyright (c) HashiCorp, Inc.
  */
-
 export {};

toolkit/tsconfig.json

@@ -1,18 +1,9 @@
 {
+  "extends": "@tsconfig/ember/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "es2015",
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "inlineSourceMap": true,
-    "inlineSources": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "strict": true,
-    "declaration": true
+    "baseUrl": ".",
+    "allowJs": true,
+    "skipLibCheck": true
   },
-  "include": [
-    "src/**/*",
-    "types/**/*"
-  ]
-}
+  "include": ["src/**/*", "types/**/*"]
+}

yarn.lock

@@ -2345,6 +2345,11 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@tsconfig/ember@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@tsconfig/ember/-/ember-3.0.0.tgz#a9e34e021a6188eeef4347abdc340a30850b656c"
+  integrity sha512-KF9F9f4i+8LE31OKS014n5uEDt1mB/6ZvyQz/Mam28nAKDTSMBlOWHgTOj0TY8l4BfbEE+BgUuWCSoUHhb2BMw==
+
 "@types/acorn@^4.0.3":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"
@@ -12595,6 +12600,11 @@ typescript@^4.7.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
+typescript@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
+  integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
+
 ua-parser-js@^1.0.33:
   version "1.0.35"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.35.tgz#c4ef44343bc3db0a3cbefdf21822f1b1fc1ab011"