Feature Request: Support pipe to Babel

[sdykae]

Plugin does not work with es5 transpiration from babel :( After babel transpilation

[umbopepato]

Hey @sdyalor, could you share you Rollup config (at least the plugins part)?

[sdykae]

import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import common from '@rollup/plugin-commonjs';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import postcss from 'rollup-plugin-postcss';
import postcssLit from 'rollup-plugin-postcss-lit';
import path from 'path';
import { terser } from 'rollup-plugin-terser';
import {Plugin} from 'rollup';

// const asdf : Plugin

// import litcss from 'rollup-plugin-lit-css';
const production = !process.env.ROLLUP_WATCH;
const extensions = ['.js', '.jsx', '.ts', '.tsx', '.m.js'];
const babelRc = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false, /**ie support */
        targets: {
          // esmodules: true
          // "chrome": 71
          ie: 11 /**ie support */
        },
        useBuiltIns: 'usage', /**ie support */
        corejs: 3, /**ie support */
        // debug: true
      }
    ],
    // [
    //   '@babel/preset-env',
    //   {
    //     modules: false,
    //     targets: {
    //       "esmodules": true,
    //       // chrome: 73
    //     },
    //     useBuiltIns: 'entry',
    //     corejs: 3
    //   }
    // ],
    '@babel/preset-typescript'
  ],
  plugins: [
    // ["@babel/plugin-transform-template-literals", {
    //   "loose": true
    // }],
    ['@babel/plugin-syntax-dynamic-import'],
    [
      '@babel/plugin-proposal-decorators',
      { decoratorsBeforeExport: true }
    ],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    // ["@babel/plugin-transform-template-literals"],
    // ['@babel/plugin-transform-arrow-functions', { spec: true }]
    [
      "@babel/plugin-transform-runtime",
      {
        regenerator: true
      }
    ]
  ]
};

const babelConf = {
  extensions,
  babelrc: false,
  ...babelRc,
  // exclude: ['node_modules/**']
  exclude: [
    // /@babel(?:\/|\\{1,2})runtime|core-js/,
    // /@webcomponents/,
    /core-js/,
    /regenerator-runtime/,
    // /core-js\/stable/,
    /@webcomponents\/webcomponentsjs/,
    /whatwg-fetch/
    // /(?!(lit-element|lit-html)\/).*/
    // /node_modules\/(?!(lit-element|lit-html)\/).*/
  ],
  // include: [
    // '/src',
    // /(lit-element|lit-html)\/.*/
  // ],
  babelHelpers: "runtime",
};

export default {
  // external:[
    // /core-js\/stable/,
    // /@babel(?:\/|\\{1,2})runtime|core-js/,
    // /@webcomponents\/webcomponentsjs/,
    // /whatwg-fetch/,
    // /@webcomponents/,
    // /node_modules\/(?!(lit-element|lit-html)\/).*/
  // ],
  input: 'src/index.ts',
  output: {
    dir: 'dist',
    // format: 'esm',
    name: 'app',
    format: 'iife',
    sourcemap: false
  },
  plugins: [
    serve({
      host:'0.0.0.0',
      contentBase: '',
      port: 8001
    }),
    livereload({
      watch: 'dist'
    }),
    postcss({
      inject: false, // By default postcss also injects the
      extensions:[".sass",".scss",".css"],
      extract: false,
      minimize: true,
      use: [
        ['sass', {
          includePaths: [
            './theme',
            './node_modules',
            './src/theme',
            // path.resolve(__dirname, "..", "node_modules"),
            // path.resolve(__dirname,"node_modules")
          ],
        }]
      ],
      // exclude: ["./node_modules/bootstrap"]
      // extensions:[],
      // plugins: [],
      // modules: true,
      // extract: true
    }),
    postcssLit(),
    resolve({ extensions, browser: true }),
    common(),
    babel(babelConf),
    babel(babelConf),
    production && terser({output: {comments: false,source_map:false}}),
    // litcss({ uglify: true })
  ],
  watch: {
    clearScreen: false
  }
};

[sdykae]

I was moving the babel somewhere to see if somehow should pipe the right way but nothing happened, then I've seen your code to understand how it works, seems there is a transform that happens but don't know when needs to be to babel to take care of the tagliteral

[umbopepato]

The right position is before babel(). You should add .css, .scss, .sass to babel's extensions though, otherwise it'll ignore those modules. Let me know if it works 🙂

[umbopepato]

@sdyalor I'll leave you to close this if it worked

[sdykae]

@umbopepato didnt work ;'c saddly. I switched to https://github.com/thgh/rollup-plugin-scss , import as string then use unsafecss(string) and worked fine.