Questions around setting up typescript, purgecss and importing CSS files

[arash-038]

Hi there, I've been using theme-lab for a while now and it's amazing. I just have a couple of issues I hoped someone could help me with.

1. How can I add typescript to my project?
2. Since I tend to use CSS frameworks, is there a way to add purgecss to the project? I tried myself but couldn't get it to work.
3. This one is about importing CSS files from node_modules. e.g. I tried importing bootstrap-icons or semantic-ui CSS but it gave me postcss-import error, so I had to use a CDN to get it working.

[sergejcodes]

Hi 👋,
this should help:

1. Typescript

• Add Typescript dependencies:

$ npm i -D typescript ts-loader

• Create tsconfig.json in the root directory with the following content:

{
  "compilerOptions": {
    "target": "es5",
    "moduleResolution": "node"
  }
}

• Append Typescript extensions to the extensions array in .config/webpack/webpack.common.js:

...
resolve: {
  extensions: [..., '.tsx', '.ts'],
}
...

• Add a new rule-set to .config/webpack/webpack.common.js:

...
rules: [
  {
    test: /\.tsx?$/,
    use: 'ts-loader',
    exclude: /node_modules/,
  }
]
...

2. PurgeCSS

• Install @fullhuman/postcss-purgecss:

$ npm i -D @fullhuman/postcss-purgecss

• add require and config to .config/postcss.config.js

const path = require('path')

...

plugins: [
  ...
    require('@fullhuman/postcss-purgecss')({
      content: [
        path.resolve(__dirname, '../shopify/**/*.liquid'),
        path.resolve(__dirname, '../src/**/*.{js|vue}')
      ]
    }),
  ...
]

3. You should let webpack handle the CSS imports. PostCSS has difficulties resolving imports from node_modules

• inside src/main.js add:

import 'semantic-ui-css/semantic.css'
import 'bootstrap-icons/font/bootstrap-icons.css'

• since these two packages import additional fonts, webpack needs an appropriate loader. Install file-loader:

$ npm i -D file-loder

• Add a new rule-set to .config/webpack/webpack.dev.js:

...
rules: [
  {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: {
      loader: 'url-loader',
      options: {
        limit: 99999999
      }
    }
  }
]
...

• Add a new rule-set to .config/webpack/webpack.prod.js:

...
rules: [
  {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        publicPath: './',
        outputPath: './'
      }
    }
  }
]
...