UPDATE: Update test files and import statements

.gitignore

@@ -20,7 +20,10 @@ tests/**/*.test.js
 
 # Package build files
 packages/**/*.css
+packages/**/*.css.map
 packages/**/*.js
+packages/**/*.d.ts.map
+packages/**/*.d.ts
 packages/**/*.style.ts
 packages/**/*.styles.ts
 

README.md

@@ -15,8 +15,8 @@ $ yarn add @matteusan/himig
 ```scss
 // main.scss
 
-@use 'node_modules/@matteusan/himig';
-@use 'node_modules/@matteusan/himig/ms-button';
+@use 'pkg:@matteusan/sentro';
+@use 'pkg:@matteusan/himig/ms-button';
 
 @include himig.init {
   @include ms-button.render();

config/tsconfig.lit.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "../packages/himig-components",
+    "outDir": "../packages/himig-components",
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "strict": true
+      }
+    ]
+  },
+  "include": ["../packages/himig-components/**/*.ts"],
+  "exclude": []
+}

config/tsconfig.sass.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "packages/himig/**/*.ts",
+    "tests/**/*.ts",
+    "scripts/**/*.ts"
+  ],
+  "exclude": [
+    "./**/*.d.ts"
+  ]
+}

jest.config.ts

@@ -0,0 +1,18 @@
+/*
+ * @license
+ * Copyright (c) 2024 MatteuSan
+ * SPDX-License-Identifier: MIT
+ */
+
+/** @type {import('jest').Config} */
+module.exports = {
+  clearMocks: true,
+  rootDir: "./",
+  modulePaths: ["<rootDir>/node_modules"],
+  globals: {
+    "ts-jest": {
+      tsconfig: "./config/tsconfig.sass.json"
+    }
+  },
+  verbose: true,
+};

package.json

@@ -6,14 +6,17 @@
   "files": [
     "packages/**/*"
   ],
-  "type": "module",
+  "workspaces": [
+    "tests/sass"
+  ],
   "repository": "https://github.com/MatteuSan/himig",
   "author": "Matteu <matteugt@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "build:sass": "gulp --gulpfile=\"gulpfile-build.cjs\"",
-    "lint:sass": "npx stylelint \"**/*.scss\"",
-    "lit:css": "yarn build:sass && ts-node-esm scripts/scss-to-lit.mjs",
+    "lit:css": "yarn lit:scss && tsx scripts/scss-to-lit.ts",
+    "lit:scss": "yarn && sass packages/himig-components:packages/himig-components --style=compressed --load-path=node_modules --no-source-map",
+    "lit:ts": "tsc --pretty --project \"./config/tsconfig.lit.json\"",
+    "lit:build": "yarn lit:scss && yarn lit:css && yarn lit:ts",
     "pack:dist": "npm pack --pack-destination=\"./dist\"",
     "pack:root": "npm pack --pack-destination=\"./\"",
     "pub:core:patch": "cd packages/himig/pintig && npm version patch --force && npm publish",
@@ -26,16 +29,22 @@
     "pub:minor": "npm version minor --force && yarn pub:core:minor && yarn pub:main:minor",
     "pub:major": "npm version major --force && yarn pub:core:major && yarn pub:main:major",
     "run:docs": "cd documentation && yarn dev",
-    "test:html": "yarn && gulp --gulpfile=\"gulpfile-test.cjs\"",
-    "test:sass": "yarn && jest --config=\"jest-sass.config.ts\"",
-    "test:ts": "jest --config=\"jest-ts.config.ts\""
+    "test:html": "yarn && sass tests/sass/with-html.test.scss:tests/sass/with-html.test.css --load-path=node_modules --no-source-map",
+    "test:sass": "yarn && jest --config=\"jest.config.ts\""
   },
   "devDependencies": {
     "@matteusan/himig": "file:./packages/himig",
+    "@matteusan/himig-components": "file:./packages/himig-components",
     "@matteusan/pintig": "file:./packages/himig/pintig",
     "@matteusan/sentro": "^1.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-terser": "^0.4.4",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.7",
+    "@web/rollup-plugin-copy": "^0.5.1",
+    "@web/rollup-plugin-html": "^2.3.0",
+    "@webcomponents/webcomponentsjs": "^2.8.0",
     "glob": "^10.3.12",
     "gulp": "^4.0.2",
     "gulp-cli": "^3.0.0",
@@ -44,10 +53,15 @@
     "jest-environment-jsdom": "^29.7.0",
     "lit": "^3.1.3",
     "postcss-scss": "^4.0.9",
+    "rollup": "^4.17.2",
+    "rollup-plugin-minify-html-literals": "^1.2.6",
+    "rollup-plugin-summary": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.72.0",
-    "sass-true": "^6.1.0",
+    "sass-true": "^8.0.0",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
+    "tsx": "^4.8.1",
     "typescript": "^5.4.5"
   }
 }

packages/himig-web/ms-button/ms-button.ts → packages/himig-components/ms-button/index.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { html, LitElement, TemplateResult } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { styles } from './styles/ms-button.styles';
 
@@ -32,23 +32,25 @@ export default class MSButton extends LitElement {
     return '_self';
   }
 
-  protected override render() {
-    const BaseButton: TemplateResult = html`
-      <i class="ms-button__icon">
+  private renderBase() {
+    return html`
+      <i class="icon">
         <slot name="icon"></slot>
       </i>
-      <span class="ms-button__label">
+      <span class="label">
         <slot></slot>
       </span>
     `;
+  }
 
+  protected override render() {
     if (!this.link) {
       return html`
         <button 
           class="${this.type ? this.handleTypes(this.type) : ''}"
           @click="${this.onClick}"
         >
-          ${BaseButton}
+          ${this.renderBase()}
         </button>
       `;
     }
@@ -59,8 +61,10 @@ export default class MSButton extends LitElement {
         target="${this.handleLinkTarget(this.link)}" 
         class="${this.type ? this.handleTypes(this.type) : ''}"
       >
-        ${BaseButton}
+        ${this.renderBase()}
       </a>
     `;
   }
-}
+}
+
+// customElements.define('ms-button', MSButton);

packages/himig-web/ms-button/styles/_button-base.scss → packages/himig-components/ms-button/styles/_button-base.scss

@@ -1,24 +1,6 @@
-//---------------------------------------------------
-//  Copyright (c) 2024 MatteuSan
-//
-//  Permission is hereby granted, free of charge, to any person obtaining a copy
-//  of this software and associated documentation files (the "Software"), to deal
-//  in the Software without restriction, including without limitation the rights
-//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-//  copies of the Software, and to permit persons to whom the Software is
-//  furnished to do so, subject to the following conditions:
-//
-//  The above copyright notice and this permission notice shall be included in all
-//  copies or substantial portions of the Software.
-//
-//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-//  SOFTWARE.
-//---------------------------------------------------
+// @license
+// Copyright (c) 2024 MatteuSan
+// SPDX-License-Identifier: MIT
 
 @use '@matteusan/pintig' with ($module-mode: true);
 
@@ -42,7 +24,7 @@
 
     @content;
 
-    .ms-button__icon {
+    .icon {
       position: relative;
       @include pintig.color-ink('button-icon', inherit);
       @include pintig.typography-size('button-icon', 'size.md');
@@ -62,7 +44,7 @@
       }
     }
 
-    .ms-button__label {
+    .label {
       @include pintig.color-ink('button-label', inherit);
       @include pintig.typography-apply('button-label', (
         family: inherit,

packages/himig-web/ms-button/styles/ms-button.styles.scss → packages/himig-components/ms-button/styles/ms-button.styles.scss

@@ -5,5 +5,7 @@
 @use 'button-base';
 
 @include button-base.init() {
-  //
+  &:not([disabled]) {
+    background-color: black;
+  }
 }

packages/himig-web/package.json → packages/himig-components/package.json

@@ -1,8 +1,9 @@
 {
-  "name": "@matteusan/himig-web",
-  "version": "1.0.0",
+  "name": "@matteusan/himig-components",
+  "version": "0.0.1",
   "description": "A web-components implementation of MatteuSan's design system, Himig.",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

packages/himig/README.md

@@ -15,8 +15,8 @@ $ yarn add @matteusan/himig
 ```scss
 // main.scss
 
-@use 'node_modules/@matteusan/himig';
-@use 'node_modules/@matteusan/himig/ms-button';
+@use 'pkg:@matteusan/sentro';
+@use 'pkg:@matteusan/himig/ms-button';
 
 @include himig.init {
   @include ms-button.render();

packages/himig/package.json

@@ -11,5 +11,8 @@
   "dependencies": {
     "@matteusan/pintig": "^1.5.1",
     "@matteusan/sentro": "^1.1.0"
+  },
+  "peerDependencies": {
+    "sass": "^1.71.0"
   }
 }