I have been attempting to package a functional web component that was developed using the lit-element/lit-html with the tailwind framework utilizing the postcss plugin from the rollup packager.
Upon conducting a rollup, I discovered the compiled js and html files in the dist/ target folder, but unfortunately, the css file generated by postcss was missing. I have tried numerous approaches without achieving success...
dist/index.js
dist/index.html
dit/webcomponents-loader.js
The code is accessible for testing purposes:
https://gitlab.univ-rouen.fr/sreycoyrehourcq/web-components.gitHere is my postcss.config.js:
module.exports = {
plugins: [
require("tailwindcss"),
require("postcss-import"),
]
}
I also attempted running without loading the postcss configuration file.
My rollup.config.js:
import postcss from 'rollup-plugin-postcss'
import postcssImport from 'postcss-import';
import copy from 'rollup-plugin-copy';
import typescript from '@rollup/plugin-typescript';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import path from 'path'
const extensions = ['.js', '.jsx', '.ts', '.tsx', '.mjs'];
const outputDir = './dist/';
export default {
input: './src/index.ts',
output: {
dir: outputDir,
sourcemap: true,
format: 'esm',
},
plugins: [
resolve({ extensions }),
commonjs(),
typescript(),
copy({
targets: [
{ src: './src/index.html', dest: outputDir },
{ src: './node_modules/@webcomponents/webcomponentsjs/bundles/', dest: outputDir },
{
src: './node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js',
dest: outputDir
}
]
}),
postcss({
plugins: [
postcssImport()
],
config: {
path: "./postcss.config.js",
},
extract: path.resolve('dist/main.css'),
module: false
})
]
}
I experimented with including this block as well:
postcss({
config: false,
plugins: [
tailwind(),
postcssImport()
],
extract: true,
module: false
}),
My main.css:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Here is my package.json:
{
"scripts": {
"build": "rollup -c rollup.config.js",
"start:build": "yarn run build && es-dev-server --root-dir dist --app-index index.html --compatibility none --open"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^8.4.0",
"@webcomponents/webcomponentsjs": "^2.4.4",
"rollup-plugin-html": "^0.2.1",
"rollup-plugin-postcss": "^3.1.3"
},
"dependencies": {
"@rollup/plugin-typescript": "^5.0.2",
"es-dev-server": "^1.57.1",
"lit-element": "^2.3.1",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.2.3",
"postcss-preset-env": "^6.7.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-copy": "^3.3.0",
"rollup-plugin-node-resolve": "^5.2.0",
"tailwindcss": "^1.6.0",
"typescript": "^3.9.7"
}
}