ember-scoped-css 0.10.1 → 0.11.1

package/README.md

@@ -0,0 +1,146 @@
+# ember-scoped-css
+
+`ember-scoped-css` is a modern addon that allows you to isolate your CSS in a modular way with co-located scoped CSS. This is a build-time-only addon and therefore is fully supported if your app is built with Embroider.
+
+With `ember-scoped-css` you can write your component styles in a co-located `.css` file next to your `.hbs` or `.gjs/.gts` files. Every selector you write in your styles is automatically scoped to the component. So you can develop your component with styles isolated from the rest of the application and you don't have to worry about CSS selectors collisions or issues with the CSS cascade.
+
+If you want to read more specifics on how this addon achieves isolation with CSS you can read more in the [detailed CSS isolation documentation](docs/css-isolation.md)
+
+As selectors are scoped/renamed during the build process. So there is no performance hit when running the app.
+
+The philosophy of `ember-scoped-css` is to stick as close to CSS and HTML as possible and not introduce new syntax or concepts unless it is absolutely necessary. 
+
+## Compatibility
+
+- V2 addons
+
+We only support using `ember-scoped-css` as a rollup plugin with a V2 addon right now but we are actively working to support embroider apps and classic ember apps.
+
+## Installation for an ember app
+
+```
+npm install --save-dev ember-scoped-css
+```
+
+## Installation for a V2 Addon
+
+```
+npm install --save-dev ember-scoped-css
+```
+
+1. If you want to use `.gjs/gts` components, then follow the instructions from [rollup-plugin-glimmer-template-tag](https://github.com/NullVoxPopuli/rollup-plugin-glimmer-template-tag) addon.
+
+2. Add the following to your `rollup.config.mjs`:
+
+```diff
++ import { scopedCssUnplugin } from 'ember-scoped-css/build';
+
+// if you want to have some global styles in your addon then
+// put them in the styles folder and change the path to the styles folder
+// if there are no global styles then you can remove addon.keepAssets
+- addon.keepAssets(['**/*.css']),
++ addon.keepAssets(['**/styles/*.css']),
+
+// add the following to the rollup config
++ scopedCssUnplugin.rollup(),
+```
+
+## Usage
+
+With `ember-scoped-css` you define styles in `.css` files that are colocated with your components
+
+```hbs
+{{! src/components/my-component.hbs }}
+<div data-test-my-component class='hello-class header'><b>Hello</b>, world!</div>
+```
+
+```css
+/* src/components/my-component.css */
+.hello-class {
+  color: red;
+}
+
+/* the :global() pseudo-class is used to define a global class. It mean that header class wont be scoped to that component */
+.hello-class:global(.header) {
+  font-size: 20px;
+}
+
+b {
+  color: blue;
+}
+```
+
+### Passing classes as arguments to a component
+
+There is a `scoped-class` helper that you can use to pass a class name as an argument to a component. The helper takes a class name and returns a scoped class name. `scoped-class` helper is replaced at build time so there is no performance hit when running the app.
+
+```hbs
+{{! src/components/my-component.hbs }}
+<OtherComponent @internalClass={{scoped-class 'hello-class'}} />
+<OtherComponent @internalClass={{(scoped-class 'hello-class')}} />
+<OtherComponent
+  @internalClass={{concat (scoped-class 'hello-class') ' other-class'}}
+/>
+```
+
+## Testing
+
+As classes are renamed during the build process you can't directly verify if classes are present in your tests. To solve this problem you can use the `scopedClass` function from the `ember-scoped-css/test-support` module. The function takes the class names and path to the CSS file where are the classes defined and returns the scoped class names.
+
+The path to the CSS file is always relative to the V2 addon root no matter where the test is located.
+
+```js
+import { scopedClass } from 'ember-scoped-css/test-support';
+
+test('MyComponent has hello-class', async function (assert) {
+  assert.expect(1);
+
+  await render(hbs`
+    <MyComponent />
+  `);
+
+  const rewrittenClass = scopedClass(
+    'hello-class',
+    '<module-name>/components/my-component'
+  );
+
+  assert.dom('[data-test-my-component]').hasClass(rewrittenClass);
+});
+```
+
+## Linting
+
+`ember-scoped-css` exports a ember-template-lint plugin with one rule `scoped-class-helper`. This lint rule is intended to help you prevent improper use of the `scoped-class` helper which might not be immediately obvious during regular development. You can read more information in the [lint rules documentation](docs/lint-rules.md)
+
+### Steps for adding the rule to the project
+
+1. Add `ember-scoped-css` plugin to `.template-lintrc.js`
+
+```diff
+'use strict';
+
+module.exports = {
+	plugins: [
++    'ember-scoped-css/src/template-lint/plugin'
+  ],
+
+```
+
+2. Add `scoped-class-helper` rule to `.template-lintrc.js`
+
+```diff
+'use strict';
+
+module.exports = {
+	plugins: [
+    'ember-scoped-css/src/template-lint/plugin'
+  ],
+  rules: {
++    'scoped-class-helper': 'error',
+  }
+
+```
+
+## License
+
+This project is licensed under the [MIT License](LICENSE.md).

package/dist/build/app-css-loader.cjs

@@ -9606,7 +9606,7 @@ __export(app_css_loader_exports, {
   default: () => app_css_loader_default
 });
 module.exports = __toCommonJS(app_css_loader_exports);
-var import_node_path3 = __toESM(require("node:path"), 1);
+var import_node_path4 = __toESM(require("node:path"), 1);
 
 // src/lib/fsExists.js
 var import_promises = require("fs/promises");
@@ -9621,6 +9621,7 @@ async function fsExists_default(path5) {
 
 // src/lib/generateAbsolutePathHash.js
 var import_node_fs2 = __toESM(require("node:fs"), 1);
+var import_node_path3 = __toESM(require("node:path"), 1);
 
 // ../node_modules/.pnpm/find-up@6.3.0/node_modules/find-up/index.js
 var import_node_path2 = __toESM(require("node:path"), 1);
@@ -9761,9 +9762,6 @@ function findUpSync(name, options = {}) {
   return matches[0];
 }
 
-// src/lib/generateAbsolutePathHash.js
-var import_path = __toESM(require("path"), 1);
-
 // src/lib/generateRelativePathHash.js
 var import_blueimp_md5 = __toESM(require_md5(), 1);
 function generateRelativePathHash(relativePath) {
@@ -9773,13 +9771,21 @@ function generateRelativePathHash(relativePath) {
 // src/lib/generateAbsolutePathHash.js
 function generateHashFromAbsolutePath(absolutePath) {
   const modulePath = appPath(absolutePath);
-  return generateRelativePathHash(modulePath);
+  const hash = generateRelativePathHash(modulePath);
+  return hash;
+}
+function packageScopedPathToModulePath(packageScopedPath) {
+  let packageRelative = packageScopedPath.replace(/^\/src\//, "/");
+  let parsed = import_node_path3.default.parse(packageRelative);
+  let localPackagerStylePath = import_node_path3.default.join(parsed.dir, parsed.name);
+  return localPackagerStylePath;
 }
 function appPath(sourcePath) {
   let workspacePath = findWorkspacePath(sourcePath);
   let name = workspacePackageName(sourcePath);
   let packageRelative = sourcePath.replace(workspacePath, "");
-  return `${name}${packageRelative}`;
+  let localPackagerStylePath = packageScopedPathToModulePath(packageRelative);
+  return `${name}${localPackagerStylePath}`;
 }
 var CACHE = /* @__PURE__ */ new Set();
 function hasSeen(sourcePath) {
@@ -9796,9 +9802,9 @@ function findWorkspacePath(sourcePath) {
     return seen;
   }
   const packageJsonPath = findUpSync("package.json", {
-    cwd: import_path.default.dirname(sourcePath)
+    cwd: import_node_path3.default.dirname(sourcePath)
   });
-  const workspacePath = import_path.default.dirname(packageJsonPath);
+  const workspacePath = import_node_path3.default.dirname(packageJsonPath);
   CACHE.add(workspacePath);
   return workspacePath;
 }
@@ -9809,7 +9815,7 @@ function workspacePackageName(sourcePath) {
   if (existing) {
     return existing.name;
   }
-  let buffer = import_node_fs2.default.readFileSync(import_path.default.join(workspace, "package.json"));
+  let buffer = import_node_fs2.default.readFileSync(import_node_path3.default.join(workspace, "package.json"));
   let content = buffer.toString();
   let json = JSON.parse(content);
   MANIFEST_CACHE.set(workspace, json);
@@ -9904,7 +9910,7 @@ function rewriteCss(css, postfix, fileName) {
 // src/build/app-css-loader.js
 async function app_css_loader_default(code) {
   const cssPath = this.resourcePath;
-  const cssFileName = import_node_path3.default.basename(cssPath);
+  const cssFileName = import_node_path4.default.basename(cssPath);
   const postfix = generateHashFromAbsolutePath(cssPath);
   const hbsPath = cssPath.replace(".css", ".hbs");
   const gjsPath = cssPath.replace(".css", ".js");