title: Trying to build vue component library using rollup and vueJs 3
body: <p>I am trying to create a vue component library using rollup and vuejs. It worked with vue2 but was unable to parse css with vue3. I have upgraded the dependency in package.json</p>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;vue2tslibrary&quot;,
    &quot;version&quot;: &quot;0.1.59&quot;,
    &quot;scripts&quot;: {
      &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
      &quot;build&quot;: &quot;vue-cli-service build&quot;,
      &quot;lint&quot;: &quot;vue-cli-service lint&quot;,
      &quot;build:js&quot;: &quot;rimraf dist &amp;&amp; rollup -c &amp;&amp; rollup -c --environment MINIFY&quot;
    },
    &quot;sideEffects&quot;: [
      &quot;*.css&quot;,
      &quot;*.scss&quot;
    ],
    &quot;files&quot;: [
      &quot;dist&quot;,
      &quot;src&quot;
    ],
    &quot;main&quot;: &quot;dist/cjs/index.js&quot;,
    &quot;module&quot;: &quot;dist/esm/index.js&quot;,
    &quot;unpkg&quot;: &quot;dist/vueslib.min.js&quot;,
    &quot;dependencies&quot;: {
      &quot;@mathieustan/vue-datepicker&quot;: &quot;^0.2.8&quot;,
      &quot;core-js&quot;: &quot;^3.6.5&quot;,
      &quot;date-fns&quot;: &quot;^2.16.1&quot;,
      &quot;vue&quot;: &quot;^3.0.1&quot;,
      &quot;vue-router&quot;: &quot;^4.0.0-beta.13&quot;,
      &quot;vue-slider-component&quot;: &quot;^4.0.0-beta.2&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.12&quot;,
      &quot;vuex&quot;: &quot;^4.0.0-beta.4&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/plugin-proposal-optional-chaining&quot;: &quot;^7.12.1&quot;,
      &quot;@rollup/plugin-alias&quot;: &quot;2.2.0&quot;,
      &quot;@rollup/plugin-babel&quot;: &quot;^5.2.1&quot;,
      &quot;@rollup/plugin-commonjs&quot;: &quot;^15.1.0&quot;,
      &quot;@rollup/plugin-image&quot;: &quot;^2.0.5&quot;,
      &quot;@rollup/plugin-node-resolve&quot;: &quot;^9.0.0&quot;,
      &quot;@rollup/plugin-url&quot;: &quot;^5.0.1&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^2.33.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^2.33.0&quot;,
      &quot;@vue/cli-plugin-babel&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-eslint&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-router&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-typescript&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-vuex&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-service&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/compiler-sfc&quot;: &quot;^3.0.1&quot;,
      &quot;@vue/eslint-config-standard&quot;: &quot;^5.1.2&quot;,
      &quot;@vue/eslint-config-typescript&quot;: &quot;^5.0.2&quot;,
      &quot;autoprefixer&quot;: &quot;^9.8.6&quot;,
      &quot;cssnano&quot;: &quot;^4.1.10&quot;,
      &quot;eslint&quot;: &quot;^6.7.2&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.20.2&quot;,
      &quot;eslint-plugin-node&quot;: &quot;^11.1.0&quot;,
      &quot;eslint-plugin-promise&quot;: &quot;^4.2.1&quot;,
      &quot;eslint-plugin-standard&quot;: &quot;^4.0.0&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^6.2.2&quot;,
      &quot;node-sass&quot;: &quot;^4.14.1&quot;,
      &quot;postcss&quot;: &quot;^8.1.1&quot;,
      &quot;postcss-calc&quot;: &quot;^7.0.3&quot;,
      &quot;postcss-color-function&quot;: &quot;^4.1.0&quot;,
      &quot;postcss-cssnext&quot;: &quot;^3.1.0&quot;,
      &quot;postcss-discard-comments&quot;: &quot;^4.0.2&quot;,
      &quot;postcss-discard-empty&quot;: &quot;^4.0.1&quot;,
      &quot;postcss-discard-unused&quot;: &quot;^4.0.1&quot;,
      &quot;postcss-each&quot;: &quot;^0.10.0&quot;,
      &quot;postcss-extend-rule&quot;: &quot;^3.0.0&quot;,
      &quot;postcss-import&quot;: &quot;^12.0.1&quot;,
      &quot;postcss-mixins&quot;: &quot;^6.2.3&quot;,
      &quot;postcss-nested&quot;: &quot;^4.2.1&quot;,
      &quot;postcss-rem&quot;: &quot;^1.1.5&quot;,
      &quot;postcss-simple-vars&quot;: &quot;^5.0.2&quot;,
      &quot;postcss-sort-media-queries&quot;: &quot;^1.7.26&quot;,
      &quot;postcss-url&quot;: &quot;^8.0.0&quot;,
      &quot;rollup&quot;: &quot;1.17.0&quot;,
      &quot;rollup-plugin-analyzer&quot;: &quot;^3.3.0&quot;,
      &quot;rollup-plugin-babel&quot;: &quot;^4.4.0&quot;,
      &quot;rollup-plugin-commonjs&quot;: &quot;^10.1.0&quot;,
      &quot;rollup-plugin-css-only&quot;: &quot;^2.1.0&quot;,
      &quot;rollup-plugin-node-resolve&quot;: &quot;^5.2.0&quot;,
      &quot;rollup-plugin-postcss&quot;: &quot;^3.1.8&quot;,
      &quot;rollup-plugin-terser&quot;: &quot;^7.0.2&quot;,
      &quot;rollup-plugin-typescript&quot;: &quot;^1.0.1&quot;,
      &quot;rollup-plugin-typescript2&quot;: &quot;^0.28.0&quot;,
      &quot;rollup-plugin-uglify&quot;: &quot;^6.0.4&quot;,
      &quot;rollup-plugin-vue&quot;: &quot;^6.0.0-beta.8&quot;,
      &quot;sass-loader&quot;: &quot;^10.0.3&quot;,
      &quot;style-resources-loader&quot;: &quot;1.3.3&quot;,
      &quot;typescript&quot;: &quot;~3.9.3&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;root&quot;: true,
      &quot;env&quot;: {
        &quot;node&quot;: true
      },
      &quot;extends&quot;: [
        &quot;plugin:vue/essential&quot;,
        &quot;@vue/standard&quot;,
        &quot;@vue/typescript/recommended&quot;
      ],
      &quot;parserOptions&quot;: {
        &quot;ecmaVersion&quot;: 2020
      },
      &quot;rules&quot;: {}
    },
    &quot;browserslist&quot;: [
      &quot;&gt; 1%&quot;,
      &quot;last 2 versions&quot;,
      &quot;not dead&quot;
    ]
  }
  </code></pre>
  <p><strong>rollup.config.js</strong></p>
  <pre><code>import vue from 'rollup-plugin-vue'
  import node from '@rollup/plugin-node-resolve'
  import cjs from '@rollup/plugin-commonjs'
  import babel from '@rollup/plugin-babel'
  import postcss from 'rollup-plugin-postcss'
  import { terser } from 'rollup-plugin-terser'
  import css from 'rollup-plugin-css-only'
  import postcssImport from 'postcss-import'
  import autoprefixer from 'autoprefixer'
  import simplevars from 'postcss-simple-vars'
  import nested from 'postcss-nested'
  import postcssEach from 'postcss-each'
  import postcssMixin from 'postcss-mixins'
  import postcssColor from 'postcss-color-function'
  import postcssCalc from 'postcss-calc'
  import postcssextend from 'postcss-extend-rule'
  import postcssDiscardComment from 'postcss-discard-comments'
  import postcssDiscardEmpty from 'postcss-discard-empty'
  import postcssUrl from 'postcss-url'
  import postcssRem from 'postcss-rem'
  import sortMedia from 'postcss-sort-media-queries'
  import cssnano from 'cssnano'
  import url from '@rollup/plugin-url'
  import typescript from 'rollup-plugin-typescript2'
  import analyze from 'rollup-plugin-analyzer'
  
  import fs from 'fs'
  import path from 'path'
  
  const babelConfig = {
    exclude: 'node_modules/**',
    babelHelpers: true,
    babelrc: false,
    presets: [['@babel/preset-env', { modules: false }]]
  }
  
  const baseFolder = './src/'
  const componentsFolder = 'components/'
  
  const components = fs
    .readdirSync(baseFolder + componentsFolder)
    .filter((f) =&gt;
      fs.statSync(path.join(baseFolder + componentsFolder, f)).isDirectory()
    )
  
  const entries = {
    index: './src/index.ts',
    ...components.reduce((obj, name) =&gt; {
      obj[name] = (baseFolder + componentsFolder + name)
      return obj
    }, {})
  }
  
  const capitalize = (s) =&gt; {
    if (typeof s !== 'string') return ''
    return s.charAt(0).toUpperCase() + s.slice(1)
  }
  
  const vuePluginConfig = {
    defaultLang: {
      style: 'postcss',
      script: 'ts'
    },
    transformAssetUrls: {
      includeAbsolute: true
    },
    preProcessStyles: true,
    compileTemplate: false,
    template: {
      isProduction: true,
      compilerOptions: {
        whitespace: 'condense'
      }
    },
    style: {
      postcssPlugins: [
        autoprefixer,
        postcssImport({
          resolve (id, basedir) {
            // resolve alias @css, @import '@css/style.css'
            // because @css/ has 5 chars
            if (id.startsWith('@css')) {
              // basedir will resolve to /src/components
              return path.resolve('src/assets/styles/css', id.slice(5))
            }
  
            // resolve node_modules, @import '~normalize.css/normalize.css'
            // similar to how css-loader's handling of node_modules
            // if (id.startsWith('~')) {
            //   return path.resolve(basedir, '../node_modules', id);
            // }
  
            // resolve relative path, @import './components/style.css'
            return path.resolve(basedir, id)
          }
        }),
        postcssEach,
        postcssMixin,
        simplevars,
        postcssColor,
        postcssCalc,
        nested,
        postcssextend,
        postcssDiscardComment,
        postcssDiscardEmpty,
        postcssUrl({ url: 'inline' }),
        postcssRem({
          baseline: 16, // Default to 16
          // convert: 'px', // Default to rem
          fallback: true, // Default to false
          precision: 6 // Default to 5
        }),
        sortMedia({
          sort: 'mobile-first'
        }),
        autoprefixer({
          overrideBrowserslist: '&gt; 1%, IE 6, Explorer &gt;= 10, Safari &gt;= 7'
        }),
        cssnano({
          zindex: false
        })
  
      ]
    }
  }
  
  export default () =&gt; {
    const mapComponent = (name) =&gt; {
      return [
        {
          input: baseFolder + componentsFolder + `${name}/index.ts`,
          external: ['vue'],
          output: {
            format: 'umd',
            name: capitalize(name),
            file: `dist/components/${name}/index.js`,
            exports: 'named',
            globals: {
              vue: 'Vue'
            }
          },
          plugins: [
            typescript(),
            url({
              include: [
                '**/*.svg',
                '**/*.png',
                '**/*.gif',
                '**/*.jpg',
                '**/*.jpeg'
              ]
            }),
            node({
              extensions: ['.vue', '.js', '.ts']
            }),
            cjs(),
            vue(vuePluginConfig),
            css(),
            babel(babelConfig)
          ]
        }
      ]
    }
  
    let config = [
      {
        input: entries,
        external: ['vue'],
        output: {
          format: 'esm',
          dir: 'dist/esm'
        },
        plugins: [
          typescript(),
          cjs(),
          url({
            include: [
              '**/*.svg',
              '**/*.png',
              '**/*.gif',
              '**/*.jpg',
              '**/*.jpeg'
            ]
          }),
          node({
            extensions: ['.vue', '.js', '.ts']
          }),
          vue(vuePluginConfig),
          css(),
          babel(babelConfig),
          analyze(),
          terser({
            output: {
              comments: '/^!/'
            },
            compress: {
              defaults: true
            }
          })
        ]
      },
      {
        input: entries,
        external: ['vue'],
        output: {
          format: 'cjs',
          dir: 'dist/cjs',
          exports: 'named'
        },
        plugins: [
          typescript(),
          url({
            include: [
              '**/*.svg',
              '**/*.png',
              '**/*.gif',
              '**/*.jpg',
              '**/*.jpeg'
            ]
          }),
          node({
            extensions: ['.vue', '.js', '.ts']
          }),
          vue(vuePluginConfig),
          css(),
          babel(babelConfig),
          cjs()
        ]
      },
      // {
      //   input: 'src/index.ts',
      //   external: ['vue'],
      //   output: {
      //     format: 'umd',
      //     name: capitalize('vu'),
      //     file: 'dist/vueslib.js',
      //     exports: 'named',
      //     globals: {
      //       vue: 'Vue'
      //     }
      //   },
      //   plugins: [
      //     typescript(),
      //     url({
      //       include: [
      //         '**/*.svg',
      //         '**/*.png',
      //         '**/*.gif',
      //         '**/*.jpg',
      //         '**/*.jpeg'
      //       ]
      //     }),
      //     node({
      //       extensions: ['.vue', '.js', '.ts']
      //     }),
      //     vue(vuePluginConfig),
      //     babel(babelConfig),
      //     cjs()
      //   ]
      // },
      {
        input: 'src/index.ts',
        external: ['vue'],
        output: {
          format: 'esm',
          file: 'dist/vueslib.esm.js'
        },
        plugins: [
          typescript(),
          url({
            include: [
              '**/*.svg',
              '**/*.png',
              '**/*.gif',
              '**/*.jpg',
              '**/*.jpeg'
            ]
          }),
          node({
            extensions: ['.vue', '.js', '.ts', '.css']
          }),
          vue(vuePluginConfig),
          css(),
          babel(babelConfig),
          cjs()
        ]
      },
      // individual components
      ...components.map((f) =&gt; mapComponent(f)).reduce((r, a) =&gt; r.concat(a), [])
  
    ]
  
    if (process.env.MINIFY === 'true') {
      config = config.filter((c) =&gt; !!c.output.file)
      config.forEach((c) =&gt; {
        c.output.file = c.output.file.replace(/\.js/g, '.min.js')
        c.plugins.push(terser({
          output: {
            comments: '/^!/'
          },
          compress: {
            defaults: true
          }
        }))
      })
    }
    return config
  }
  </code></pre>
  <p><strong>ERROR SCREENSHOT</strong>
  <a href="https://i.stack.imgur.com/gQ0lL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gQ0lL.png" alt="Error while building library using rollup config" /></a></p>
  <p><strong>Component</strong></p>
  <pre><code>&lt;template&gt;
  &lt;!-- @css/_app-partials.css--&gt;
  &lt;div&gt;
      &lt;p class=&quot;yellow&quot; @click=&quot;test()&quot;&gt; I am Dummy Component
        &lt;span class=&quot;reda&quot;&gt;asdasdas&lt;/span&gt;
      &lt;/p&gt;
      &lt;span class=&quot;red&quot;&gt;asdasdas&lt;/span&gt;
      &lt;img :src=&quot;require('../../assets/img/icons/download.jpeg')&quot; /&gt;
      &lt;div class=&quot;imgtest&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent, PropType } from 'vue'
  
  export default defineComponent({
    name: 'DummyComponent',
    data () {
      return {
        text1: 'I am Text Component'
      }
    },
    props: {
      isValid: {
        type: Boolean,
        default: false
      },
      msg: {
        type: Object as PropType&lt;{foo: string; bar: string}&gt;
      }
    },
    methods: {
      test (): void {
        console.log('test1', this.$props.msg)
      }
    }
  })
  
  &lt;/script&gt;
  
  &lt;style lang=&quot;postcss&quot; scoped&gt;
  @import '../../assets/styles/css/_app-partials.css';
  
  .yellow {
      color: red;
  
      .reda {
          color: $black;
      }
  }
  
  .red {
      color: green;
  }
  
  .imgtest {
      background-image: url('../../assets/img/icons/star-half.svg');
      background-size: 100%;
      width: 100px;
      height: 100px;
  }
  &lt;/style&gt;
  
  </code></pre>
  <p><a href="https://github.com/shubhadip/vue-typescript-component-library" rel="nofollow noreferrer">github repository link</a>
  <a href="https://github.com/shubhadip/vue-typescript-component-library" rel="nofollow noreferrer">https://github.com/shubhadip/vue-typescript-component-library</a></p>