#ember-scoped-css and fresh Ember v6.8 app

1 messages · Page 1 of 1 (latest)

covert brook
#

Hi all - have a completely new v6.8 app with typescript and trying to add ember-scoped-css. Followed the instructions in the readme, made the config changes to vite.config.mjs and babel.config.cjs but the app gives this error when trying to load a page:

[vite] Internal server error: Cannot use import statement outside a module
  Plugin: babel
  File: /Users/home/dev/my-app/app/config/environment.ts

Any ideas?

kindred gazelle
#

Can you share your babel config?

covert brook
#

babel.config.cjs

import { scopedCSS } from 'ember-scoped-css/babel';

const {
  babelCompatSupport,
  templateCompatSupport,
} = require('@embroider/compat/babel');

module.exports = {
  plugins: [
    [
      '@babel/plugin-transform-typescript',
      {
        allExtensions: true,
        onlyRemoveTypeImports: true,
        allowDeclareFields: true,
      },
    ],
    scopedCSS(),
    [
      'babel-plugin-ember-template-compilation',
      {
        compilerPath: 'ember-source/dist/ember-template-compiler.js',
        enableLegacyModules: [
          'ember-cli-htmlbars',
          'ember-cli-htmlbars-inline-precompile',
          'htmlbars-inline-precompile',
        ],
        transforms: [...templateCompatSupport(), scopedCSS()],
      },
    ],
    [
      'module:decorator-transforms',
      {
        runtime: {
          import: require.resolve('decorator-transforms/runtime-esm'),
        },
      },
    ],
    [
      '@babel/plugin-transform-runtime',
      {
        absoluteRuntime: __dirname,
        useESModules: true,
        regenerator: false,
      },
    ],
    ...babelCompatSupport(),
  ],

  generatorOpts: {
    compact: false,
  },
};

vite.config.mjs

import { defineConfig } from 'vite';
import { extensions, classicEmberSupport, ember } from '@embroider/vite';
import { babel } from '@rollup/plugin-babel';
import { scopedCSS } from 'ember-scoped-css/vite';

export default defineConfig({
  plugins: [
    classicEmberSupport(),
    ember(),
    // extra plugins here
    scopedCSS(),
    babel({
      babelHelpers: 'runtime',
      extensions,
    }),
  ],
});
#

Otherwise, a completely new app with just ember-scoped-css installed and the changes made to these files

ripe barn
#

this is wrong

transforms: [...templateCompatSupport(), scopedCSS()],

it should be

transforms: [...templateCompatSupport(), scopedCSS.template({)],
covert brook
#

🤦 I swear I had that, thanks @ripe barn

kindred gazelle
#

also! you have an import in a cjs file

covert brook
#

ah! thats the issue

Changed to

const { scopedCSS } = require('ember-scoped-css/babel');

But now get

[vite] (client) Pre-transform error: /Users/kyle/scopedcss/app/templates/application.gts: RegExp.escape is not a function
  Plugin: babel
  File: /Users/kyle/scopedcss/app/templates/application.gts
6:14:49 PM [vite] Internal server error: /Users/kyle/scopedcss/app/templates/application.gts: RegExp.escape is not a function
ripe barn
#

need to update your node version to support RegExp.escape

covert brook
#

Hmm no luck, ensured Im on node v22, removed node_modules and reinstalled, same error

#

Need to do something else?

ripe barn
#

you'll have to be newer than that

#

i don't know exactly what version RegExp.escape landed in but it's a pretty new feature

#

part of v8 and only landed in chrome last april

kindred gazelle
lusty panther
#

I vote for a polyfill here. When your policy is to support the latest lts node, then you can't use e-scoped-css.

Also it falls more in line with toolchain installers (eg proto) that are connected to the values in your package.json

Not so easy for folks to upgrade

kindred gazelle
#

I would love for someone to PR this ❤️

covert brook
#

Thanks both

covert brook
#

Have it working in the app now, but any docs on how to make scoped-css work in a fresh v2 addon?

Followed the same instructions, but its outputting the raw unprocessed style block in the component.

#

Looks like I need to add the config to babel.publish.config.js too

kindred gazelle
#

Did you get it workin?

covert brook
#

Yeah I did, thanks! Just needed the above config

#

But another issue - the scopedClass helper is failing the build:

[!] (plugin babel) TypeError: /Users/kylenathan/dev/zsea/ember-zsea/src/components/form/checkbox-field.gts: Cannot read properties of undefined (reading 'builders')
src/components/form/checkbox-field.gts

import { scopedClass } from 'ember-scoped-css';
...
<template>
  <div class={{scopedClass "textfield"}}>
    ...
  </div>
</template>

Something to do with recast in ember-scoped-css/src/lib/rewriteHbs.js being undefined - wrong import?

kindred gazelle
covert brook
# 
import Component from '@glimmer/component';
import { scopedClass } from 'ember-scoped-css';

export interface FieldSignature<T> {
  Element: HTMLInputElement;
  Args: {
    error: boolean;
  };
  Blocks: {
    default: [];
  };
}

export default class Field<T> extends Component<FieldSignature<T>> {
  <template>
    <style scoped>
      .field {
        background: blue;
      }

      .error {
        background: red;
      }
    </style>
    <h1 class={{if @error (scopedClass "error") (scopedClass "field")}}>
      Hello world
    </h1>
  </template>
}
kindred gazelle
#

Hm, seems not bad. Can you open an issue? I'll debug during work

covert brook