Extract CSS type definitions

compile-css.ts

import * as postcss from 'postcss'
import { basename, resolve, join } from 'path'
import { outputFileSync } from 'fs-extra'
import { sync as globSync } from 'glob'
import { readFileSync } from 'fs'
import { watch as chokidarWatch } from 'chokidar'

const { NODE_ENV } = process.env

// Change CSS glob pattern
const DEFAULT_GLOB_PATTERN = 'src/styles/**/*.css'

const plugins = [
    require('postcss-import')({
        sync: true,
        resolve(id, baseDir, opts) {
            if (id[0] !== '.') {
                return resolve(opts.root, 'node_modules', id)
            }
            // Fix PostCSS path resolution if necessary
            return id
        },
    }),
    require('postcss-cssnext')({
        browsers: ['iOS >= 9.3'],
    }),
    require('postcss-inline-svg')({
        path: resolve(__dirname, 'node_modules/svg-icons/svg/'),
        removeFill: true,
    }),
    require('postcss-modules')({
        getJSON(cssFileName, json) {
            debug('Extracting CSS Modules for', cssFileName)
            const cls = Object.keys(json)
            if (!cls.length) {
                return debug(`${cssFileName} has no exported class`)
            }
            debug('Writing CSS Modules to', cssFileName.replace('.css', '.css.d.ts'))
            outputFileSync(
                cssFileName.replace('.css', '.css.d.ts'),
                cls.map(k => `export const ${k}: string`).join('\n')
            )
        },
        generateScopedName: NODE_ENV === 'production' ? '[sha512:hash:base64:5]' : '[name]__[local]___[hash:base64:5]',
    }),
]

const processor = postcss(plugins)

/**
 * Extract CSS and write it to relative `dist/styles` to project folder
 *
 * @param {string} file
 * @returns {Promise<void>}
 */
export function extract(file: string, projectFolder?: string): Promise<void> {
    const cssName = basename(file, '.css')
    const destFile = resolve(projectFolder, `dist/styles/${cssName}.css`)
    debug(`Processing ${file}`)
    return processor.process(readFileSync(file), { from: file })
        .then(({ css }) => {
            debug('Writing CSS output to', destFile)
            outputFileSync(destFile, css)
        })
}

/**
 * Extract all CSS based on a glob pattern
 *
 * @param {string} [globPattern=DEFAULT_GLOB_PATTERN]
 * @returns {Promise<void>}
 */
export function extractAll(globPattern: string = DEFAULT_GLOB_PATTERN, projectFolder?: string): Promise<void> {
    const files = globSync(globPattern)
    debug(`Processing ${files.length} CSS files`)
    return files.reduce((all, file) => all.then(_ => extract(file, projectFolder)), Promise.resolve())
}

extractAll()