Bug with PostCSS

[objectivehtml]

I made a long post yesterday here. It was partially correct. I did find one issue on my end, I was compiling with global Rollup which was a different version in my package. So some of what I posted changed once I updated, however the core issue was the same. Making a specific issue there, and will make a pull request later.

I'm still not 100% sure I am not doing something wrong. But it looks like this is a bug if I was using an old version of Rollup and it didn't fixed it, and same issue on the latest version. I was thinking this would be moot after I updated to 0.66.6, but this is still an issue. Anyone else get this?

Expanding on my comment here:
#207 (comment)

Original code from index.ts

resolveId(id, importer) {
  if (!isVuePartRequest(id)) return
  id = path.resolve(path.dirname(importer), id)
  const ref = parseVuePartRequest(id)
  if (ref) {
    const element = resolveVuePart(descriptors, ref)
    const src = (element as SFCBlock).src
    if (ref.meta.type !== 'styles' && typeof src === 'string') {
      if (src.startsWith('.')) {
        return path.resolve(path.dirname(ref.filename), src as string)
      } else {
        return require.resolve(src, { paths: [path.dirname(ref.filename)] })
      }
    }

    return id
  }
}

My changed code, notice the else if.

resolveId(id, importer) {
  if (!isVuePartRequest(id)) return
  id = path.resolve(path.dirname(importer), id)
  const ref = parseVuePartRequest(id)
  if (ref) {
    const element = resolveVuePart(descriptors, ref)
    const src = (element as SFCBlock).src
    if (ref.meta.type !== 'styles' && typeof src === 'string') {
      if (src.startsWith('.')) {
        return path.resolve(path.dirname(ref.filename), src as string)
      } else {
        return require.resolve(src, { paths: [path.dirname(ref.filename)] })
      }
    }
    else if(ref.meta.type === 'styles') {
        // Replace the .vue extension with a .vue.css so it can pass through
        // PostCSS.
        return id.replace('.vue', '.vue.css');
    }

    return id
  }
}

SampleComponent.vue

<template>
    <div>
        <span class="message" v-html="message"/>
    </div>
</template>

<script>
export default {

    name: 'sample-component',

    props: {
        message: {
            type: String,
            required: true
        }
    }

};
</script>

<style lang="scss">
.sample-component {
    background: rgb(200, 200, 200);

    .message {
        font-size: 1rem;
    }

    .test {
        background: yellow;
    }

    .a {
        background: red;
    }

    .b {
        background: blue;
    }

    .c {
        background: white;
    }
}
</style>

rollup.config.js

const plugins = [
    vue({
        css: false
    }),
    postcss({
        extract: true,
        plugins: [
            cssnano()
        ]
    }),
    eslint({
        exclude: '**/*.css'
    }),
    babel({
        exclude: NODE_MODULES
    })
]

// 1. If I use css() (css-only) then, I get no output. It only works if I remove it and just use PostCSS. Not sure if this expected behavior, but if so, docs could be more explicit.
// 2. Without "exclude: '**/*.css'" eslint tries to lint the CSS. Not sure if this is expected behavior or can be avoided in rollup-plugin-vue. Without vue, postcss doesn't pick up the files so it seems related.
// 3. Worth noting, without "extract: true", or a string for a filename, there is no file output at all.

plugins used in rollup.config.js

Expected behavior

My sample-component.css should be

.sample-component{background:#c8c8c8}.sample-component .message{font-size:1rem}.sample-component .test{background:#ff0}.sample-component .a{background:red}.sample-component .b{background:#00f}.sample-component .c{background:#fff}

Actual behavior

Without the line of code changed above, I get the following error:

src/SampleComponent.vue?rollup-plugin-vue=styles.0.css[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/SampleComponent.vue?rollup-plugin-vue=styles.0.css (2:0)
1: 
2: .sample-component {
   ^
3:   background: #c8c8c8;
4: }

[objectivehtml]

Having a heck of time getting these builds to work. I feel like should work work much easier than this, lol. I mentioned this in the commit comment for my patch-1 branch. But if I use rollup-plugin-vue to create two output bundle files, like one for iife and one for es6, then the second pass fails.

References
objectivehtml@4edc241

Github/vue-giveworks-form/src/main.js → dist/vue-giveworks-form.es.js...
51% (199): src/Plugins/GiveworksForm.js[!] (VuePlugin plugin) Error: TypeError: aStr.charAt is not a function
src/Components/GiveworksForm.vue
Error: TypeError: aStr.charAt is not a function
    at Object.<anonymous> (/Users/justinkimbrell/Github/vue-giveworks-form/node_modules/rollup-plugin-vue/dist/index.js:117:35)
    at Generator.next (<anonymous>)
    at fulfilled (/Users/justinkimbrell/Github/vue-giveworks-form/node_modules/rollup-plugin-vue/dist/index.js:4:58)

This happened after this commit, which throws an error if the compilation fails.
6c5f920

There is probably a better way to fix this. I'm just not sure what the expected data type and/or value should be, or how to check to see if something should be omitted on the second pass.

There is also issues when installing the plugin with NPM vs. Yarn. Yarn works, NPM doesn't until yarn installs. First time I've never had to use yarn to get something to work in npm. The reason for this is in the recent commit, vue-runtime-helpers is required. For some reason it doesn't get included. I updated node and npm to latest, so i think its a bug on their end because this errors goes when if I install my dev package with yarn.

(!) Unresolved dependencies
https://rollupjs.org/guide/en#warning-treating-module-as-external-dependency
vue-runtime-helpers/normalize-component.js (imported by src/SampleComponent.vue)

[nandin-borjigin]

I commited 6c5f920 but I think it's not the source of the error. I'm getting same error and it's originated from 'source-map' package.

[nandin-borjigin]

After some digging, I found that the problem is caused by a caching policy.

parse function from component-compiler-utils caches parsing result with the file name as key and the cache is not cleared inbetween two rollup process.

parse function returns a data structure SFCDescriptor and it has a styles[x].map.mappings in it. styles[x] is then passed to preprocessors as it is (i.e. a reference, not a copy) and preprocessors seem to have altered its content (styles[x].map.mappings is a string before processing and is an array after processing).

when it comes to second turn, parse function founds that it has already parsed a certain file by hitting the cache and directly outputs the cache, but the data inside it is altered and passing it to a preprocessor again triggeres this error.

I'm still reading the source codes and trying to figure out a solution.

[nandin-borjigin]

same problem here #239

[objectivehtml]

Just checking back on this. This solved one of my issues, the source map. Thank you for that fix. I am going to update my branch with this fix because I still get one issue that is unrelated. I need to build my package with PostCSS, and without this code change, I can't get it to work.

In my commit I added the following lines:

else if (ref.meta.type === 'styles') {
    return id.replace('.vue', '.vue.css');
}

Without these lines of code, PostCSS doesn't handle the CSS from the vue component files and get the following error in a Bootstrap wrapping component. My rollup plugin config is above.

/Card/CardBtnGroup.vue?rollup-plugin-vue=styles.0.css[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/Components/Card/CardBtnGroup.vue?rollup-plugin-vue=styles.0.css (2:0)
1: 
2: .card .card-btn-group,
   ^
3: .card .btn-group.card-btn-group {
4:   flex: 1;
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (./node_modules/rollup/dist/rollup.js:3460:30)
    at Module.error (./node_modules/rollup/dist/rollup.js:13349:9)
    at tryParse (./node_modules/rollup/dist/rollup.js:13032:16)
    at Module.setSource (./node_modules/rollup/dist/rollup.js:13083:33)
    at ./node_modules/rollup/dist/rollup.js:21761:20`