import { Config } from "@stencil/core";
import { sass } from '@stencil/sass';
import { postcss } from '@stencil/postcss';
import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';
import postcssimport from 'postcss-import';

export const config: Config = {
  namespace: "hy-design-system-demo",
  globalStyle: 'src/global/styles.scss',
  plugins: [
    sass({
      injectGlobalPaths: [
        'src/global/styles.scss',
      ],
    }),
    postcss({
      plugins: [
        postcssimport,
        autoprefixer({
          browsers: ['last 2 versions'],
          cascade: false
        }),
        tailwindcss('./tailwind.config.js')
      ]
    })
  ],
  outputTargets: [
    {
      type: "dist"
      
    },
    {
      type: "docs-readme",
      footer: "HY component demo"
    },
    {
      type: "www",
      serviceWorker: null, // disable service workers
      copy: [
        { src: 'fonts' }
      ]
    }
  ],
};