ember-scoped-css 3.0.0 → 3.1.0

package/README.md

@@ -194,7 +194,25 @@ Requires
 - @glint/template 1.7.0 or higher
 - @glint/tsserver-plugin 2.0.5 or higher
 
-In `types/index.d.ts` (or similar for apps) or `unpublished-development-types/index.d.ts` (for libraries), we'll declaration merge merge the known attributes for the `<style>` tag:
+Add `ember-scoped-css/types` to the [`types`](https://www.typescriptlang.org/tsconfig#types) array in your `tsconfig.json`:
+
+```jsonc
+{
+  "compilerOptions": {
+    "types": ["ember-scoped-css/types"]
+  }
+}
+```
+
+If your project doesn't use `compilerOptions.types` (note that specifying it disables automatic inclusion of `@types/*` packages), you can instead import the declarations from a type-declaration file that is included in your project — `types/index.d.ts` (or similar for apps) or `unpublished-development-types/index.d.ts` (for libraries):
+
+```ts
+import 'ember-scoped-css/types';
+```
+
+<details><summary>What <code>ember-scoped-css/types</code> provides</summary>
+
+It declaration-merges the known attributes for the `<style>` tag:
 
 ```ts
 import '@glint/template';
@@ -207,6 +225,8 @@ declare global {
 }
 ```
 
+</details>
+
 ### template-lint
 
 If you use [ember-template-lint](https://github.com/ember-template-lint/ember-template-lint) for linting the `<template>...</template>` regions of your components, you'll need to allow the `<style>` attribute to be used. The easiest way is to disable the [`no-forbidden-elements`](https://github.com/ember-template-lint/ember-template-lint/blob/main/docs/rule/no-forbidden-elements.md) rule:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-scoped-css",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "",
   "keywords": [
     "ember-addon"
@@ -19,7 +19,8 @@
     "dist",
     "declarations",
     "addon-main.cjs",
-    "template-registry.d.ts"
+    "template-registry.d.ts",
+    "types.d.ts"
   ],
   "exports": {
     ".": {
@@ -42,6 +43,10 @@
       "types": "./template-registry.d.ts",
       "default": "./src/noop.js"
     },
+    "./types": {
+      "types": "./types.d.ts",
+      "default": "./src/noop.js"
+    },
     "./test-support": {
       "types": "./declarations/runtime/test-support.d.ts",
       "default": "./dist/runtime/test-support.js"

package/types.d.ts

@@ -0,0 +1,30 @@
+/**
+ * This declaration file teaches TypeScript (via Glint) about the special
+ * attributes that ember-scoped-css adds to the `<style>` element,
+ * so that `<style scoped>` and `<style inline>` type-check.
+ *
+ * Add it to your tsconfig.json:
+ *
+ * ```jsonc
+ * {
+ *   "compilerOptions": {
+ *     "types": ["ember-scoped-css/types"]
+ *   }
+ * }
+ * ```
+ *
+ * or, if you don't use `compilerOptions.types`, import it from a
+ * type-declaration file that is included in your project:
+ *
+ * ```ts
+ * import 'ember-scoped-css/types';
+ * ```
+ */
+import '@glint/template';
+
+declare global {
+  interface HTMLStyleElementAttributes {
+    scoped: '';
+    inline: '';
+  }
+}