css-to-js.js

/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable global-require */
/* eslint-disable no-console */
const yargs = require('yargs');
const gaze = require('gaze');
const postcss = require('postcss');
const fs = require('fs');
const glob = require('glob');

const o = yargs
  .option('watch', {
    alias: 'w',
    type: 'boolean',
    describe: 'Watch the file system for changes and render automatically'
  })
  .argv;

const devPlugins = [
  require('tailwindcss'),
  require('autoprefixer'),
];

const render = (filepath) => {
  console.log(`${filepath} was changed`);
  fs.readFile(filepath, (err, css) => {
    const plugins = process.env.NODE_ENV !== 'production'
      ? devPlugins
      : [...devPlugins,
        require('@fullhuman/postcss-purgecss')({
          // Specify the paths to all of the template files in your project
          content: [
            './index.html',
            filepath.replace(/\.css/, '.ts'),
          ],

          // Include any special characters you're using in this regular expression
          defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
        })
      ]
    const nFilePath = `${filepath}.ts`;
    postcss([...plugins])
    .process(css, { from: filepath, to: nFilePath })
    .then(result => {
      fs.writeFile(nFilePath, `
import { css } from 'lit-element';
export default css\`${result.css.replace(/\\/g, '\\\\').replace(/`/g, '\\`')}\`;
`, () => true)
      if ( result.map ) {
        fs.writeFile('dest/app.css.map', result.map, () => true)
      }
    });
  });
}

glob('components/**/*.css', (err, files) => {
  files.forEach(render);
});

if (o.watch) {
  console.log('watching ...')
  gaze('components/**/*.css', (err, watcher) => {
    watcher.on('added', render);

    watcher.on('changed', render);
  });
}