How to use Vue with TypeScript and other preprocessor?

[pontakornth]

I tried to use Vue with official template. But TypeScript doesn't compile neither the PostCSS. I already open the issue on create-snowpack-app but the repo is archived. I am not sure if I can use other plugin or script to overwrite official template.

For PostCSS
Step to reproduce.

1. Create new project with Vue starter template.
2. Install Postcss, postcss-cli and tailwindcss
3. Use yarn tailwindcss init to create empty configuration file..
4. Create postcss.config.js with following content.

module.exports = {
    plugins: [
         require('tailwindcss')
   ]
}

5. Apply "build:css": "postcss" to the snowpack config scripts.

6.Modify App.js style tag with following content

<style>
@tailwind bases;
@tailwind components;
@tailwind utilities;

.App {
   @apply bg-blue-500 text-blue-100;
}
</style>

7. Start snowpack dev server
8. App component should be unstyled and has uncompiled style with inspect element.

For TypeScript

1. Use vue starter template.
2. Install TypeScript and create tsconfig.json with following content

{
  "compilerOptions": {
    // this aligns with Vue's browser support
    "target": "es5",
    // this enables stricter inference for data properties on `this`
    "strict": true,
    // if using webpack 2+ or rollup, to leverage tree shaking:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

3. Add a dummy method with some type definition and change lang to ts.
4. Start snowpack dev server.
5. When use browser debug console, it should have some syntax error or unexpected token.

Edit 1: Add steps to reproduce as @fcamblor requested and correct some sentences.

[FredKSchott]

Happy to help, can you share an example of steps that I could follow to reproduce? (feel free to copy over from the old repo, if they were already there).

Also, you can try following the postcss guide here: https://www.snowpack.dev/#postcss

[drwpow]

This behavior is a little difficult now, because the way Snowpack works it can be tough to detect CSS in a .vue file. I think the PostCSS guide won’t work for CSS in Vue, BUT this can be fixed with a new Snowpack plugin. I guess the question is simply which is better: to add PostCSS support to our Vue plugin somehow, or create a new Snowpack PostCSS plugin that always runs after Vue.

Say we made a new PostCSS plugin, which would result in the following build order:

1. Vue generates .css files
2. PostCSS runs on those .css files

Does that work with Vue’s scoped styles? Does Vue need to run PostCSS itself, or is PostCSS always run afterward? If the latter, I think we can support that easily. But if the former, we may need to add something special to our Snowpack Vue plugin.

[louh]

I'm interested in this! I would love to be able to use PostCSS in Vue's single-file-components.

As a test, I wrote some nested CSS into a component's <style> block and applied scoped, e.g:

<style scoped>
.parent {
  .child {
    background-color: red;
  }
}
</style>

Vue will output as inline CSS:

.parent[data-v-scopedid] {
  .child {
    background-color: red;
  }
}

In other words, it scopes the parent element (which is fine) and also passes through the nested CSS as-is (no errors, no modifications)

Looking at that I think we can safely run PostCSS on that output.