Add test for import attributes for babel parser and ESM only

index.js

@@ -24,13 +24,21 @@
  */
 
 /**
- * 1. Ensure all helpers are imported instead of inlined.
+ * 1. https://babeljs.io/docs/babel-generator#:~:text=importAttributesKeyword
+ *
+ * 2. Ensure all helpers are imported instead of inlined.
  *    See https://github.com/babel/babel/issues/9297#issuecomment-453750049
  */
 
 module.exports = (context, options = {}) => {
   let { parser = 'babel', ...envOptions } = options;
 
+  let configOpts = {
+    generatorOpts: {
+      importAttributesKeyword: 'with', // 1
+    },
+  };
+
   let envOpts = {
     bugfixes: true,
     ...envOptions,
@@ -45,7 +53,7 @@ module.exports = (context, options = {}) => {
     corejs: 3,
     helpers: true,
     regenerator: true,
-    version: '7.26.0', // 1
+    version: '7.26.0', // 2
   };
 
   let presets = [
@@ -60,6 +68,7 @@ module.exports = (context, options = {}) => {
   ];
 
   return {
+    ...configOpts,
     presets,
     plugins,
   };

test/__file_snapshots__/babel-esm---Stafe-4--import-attributes-0

@@ -0,0 +1 @@
+import styles from 'styles.css' with { type: 'css' };

test/babel.spec.js

@@ -4,6 +4,7 @@ const { toMatchFile } = require('jest-file-snapshot');
 const preset = require('../');
 
 const es = require('./fixtures/es');
+const stage4 = require('./fixtures/stage4');
 const flow = require('./fixtures/flow');
 const react = require('./fixtures/react');
 const regressions = require('./fixtures/regressions');
@@ -21,7 +22,7 @@ describe('babel', () => {
     expect(code).toMatchFile();
   });
 
-  test.each(cases)('esm > %s', (name, input) => {
+  test.each([...stage4, ...cases])('esm > %s', (name, input) => {
     let { code } = transform(input, {
       presets: [[preset, { modules: false }]],
     });

test/fixtures/stage4.js

@@ -0,0 +1,8 @@
+module.exports = [
+  [
+    'Stafe 4: import attributes',
+    `
+    import styles from 'styles.css' with { type: 'css' };
+    `,
+  ],
+];