feat: removed auto component namespaceing

packages/colocation/index.js

@@ -7,7 +7,7 @@ module.exports = {
  return {
  baseName: registry.app.name,
  getCssExtentions: registry.extensionsForType.bind(registry, 'css'),
- forceMoveColocatedStyles: this.isAddon() || false,
+ forceMoveColocatedStyles: this.isAddon(),
  };
  },
 

packages/namespace/.prettierrc.js

@@ -2,4 +2,5 @@
 
 module.exports = {
  singleQuote: true,
+
 };

packages/namespace/addon/instance-initializers/add-style-namespaces.js

@@ -1,7 +1,9 @@
 import addRouteStyleNamespace from 'ember-cli-styles-namespace/utils/add-route-style-namespace';
-import addComponentStyleNamespace from 'ember-cli-styles-namespace/utils/add-component-style-namespace';
+import processStyleType from 'ember-cli-styles-namespace/utils/process-style-type';
 
 export function initialize(appInstance) {
+ processStyleType(appInstance);
+
  let router = appInstance.lookup('service:router');
  router.on('routeDidChange', function ({ to }) {
  if (likeRouteInfo(to)) {
@@ -20,8 +22,6 @@ export function initialize(appInstance) {
  }
  }
  });
-
- addComponentStyleNamespace(appInstance);
 }
 
 function nestedRouteNames({ name, parent }, routeNames = []) {

packages/namespace/lib/style-info.js

@@ -11,7 +11,7 @@ module.exports = class StyleInfo extends Walker {
  }
 
  fileContents(styleNamespace) {
- return `export default { styleNamespace: "${styleNamespace}" }`;
+ return `export const styleNamespace = "${styleNamespace}"`;
  }
 
  fullStylePath(stylePath) {

packages/namespace/tests/acceptance/with-component-file-test.js

@@ -0,0 +1,28 @@
+import { visit } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+
+import styleForSetup from 'dummy/tests/setup/style-for';
+
+module('Acceptance | with component file', function (hooks) {
+ setupApplicationTest(hooks);
+ styleForSetup(hooks);
+
+ test('should be able import styleNamespace in a glimmer component', async function (assert) {
+ await visit('/with-component-file');
+
+ assert.strictEqual(
+ this.styleFor(`h3:first-of-type`).color,
+ 'rgb(255, 0, 1)'
+ );
+ });
+
+ test('should be able import styleNamespace in a classic component', async function (assert) {
+ await visit('/with-component-file');
+
+ assert.strictEqual(
+ this.styleFor(`h3:last-of-type`).color,
+ 'rgb(255, 0, 1)'
+ );
+ });
+});

packages/namespace/tests/dummy/app/components/with-component-file/classic.hbs

@@ -0,0 +1 @@
+<h3> Hello There </h3>

packages/namespace/tests/dummy/app/components/with-component-file/classic.js

@@ -0,0 +1,11 @@
+/* eslint-disable ember/require-tagless-components */
+/* eslint-disable ember/no-classic-classes */
+/* eslint-disable ember/no-classic-components */
+
+import Component from '@ember/component';
+import { styleNamespace } from './generic.scss';
+
+export default Component.extend({
+ styleNamespace: styleNamespace,
+ classNameBindings: ['styleNamespace'],
+});

packages/namespace/tests/dummy/app/components/with-component-file/generic.scss

@@ -0,0 +1,3 @@
+h3 {
+ color: red;
+}

packages/namespace/tests/dummy/app/components/with-component-file/glimmer.hbs

@@ -0,0 +1,3 @@
+<div class="{{style-namespace runClass=this.styleNamespace}}">
+ <h3> Hello There </h3>
+</div>

packages/namespace/tests/dummy/app/components/with-component-file/glimmer.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { styleNamespace } from './generic.scss';
+
+export default class WithComponentFileGlimmer extends Component {
+ styleNamespace = styleNamespace;
+}

packages/namespace/tests/dummy/app/router.js

@@ -49,5 +49,7 @@ Router.map(function () {
  this.route('handled');
  });
 
+ this.route('with-component-file');
+
  this.route('aborted-state');
 });

packages/namespace/tests/dummy/app/with-component-file/template.hbs

@@ -0,0 +1,2 @@
+<WithComponentFile::glimmer></WithComponentFile::glimmer>
+<WithComponentFile::classic></WithComponentFile::classic>