Closed sdykae closed 3 years ago
Hey @sdyalor, could you share you Rollup config (at least the plugins part)?
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
}
};
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
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 🙂
@sdyalor I'll leave you to close this if it worked
@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.
Plugin does not work with es5 transpiration from babel :( After babel transpilation![image](https://user-images.githubusercontent.com/50224521/97794734-9d854500-1bcb-11eb-9db7-9f2ef2c3b330.png)