Mocks a directory of css files with a css-modules like object

mock-css-modules-for-jest.js

const { parse } = require('css')
const { readdirSync, readFileSync } = require('fs')
const { basename, extname, resolve } = require('path')
const camel = require('lodash.camelcase')

const baseNameForCSSFile = filename => basename(filename, '.css')

const isAClassSelector = selector => /^\./.test(selector)

const removeLeadingDotAndTrailingSelectors = selector =>
  /* assumes dash-separated classNames */
  selector.replace(/^\.((\w|-)+)(\b.*$)/, '$1')

const getClassNamesForRule = rule => {
  let selectors = []
  switch (rule.type) {
    case 'rule':
      selectors = rule.selectors
      break
    case 'media':
      selectors = rule.rules
        ? rule.rules.reduce((out, subRule) => out.concat(subRule.selectors), [])
        : []
      break
  }

  return selectors
    .filter(isAClassSelector)
    .map(removeLeadingDotAndTrailingSelectors)
}

const getClassNamesFromStylesheet = stylesheetAsString =>
  parse(stylesheetAsString).stylesheet.rules.reduce(
    (classNames, rule) => classNames.concat(getClassNamesForRule(rule)),
    [],
  )

const mapClassNamesToFilenameBasedSelector = (classNames, filename) =>
  classNames.reduce((map, className) => {
    map[camel(className)] = `${filename}__${className}`
    return map
  }, {})

const getMapOfStylesForFile = (stylesheet, filename) =>
  mapClassNamesToFilenameBasedSelector(
    getClassNamesFromStylesheet(stylesheet),
    filename,
  )

const parseStylesheetInFiles = filenames =>
  filenames.reduce((map, filename) => {
    const stylesheetAsString = readFileSync(filename, 'utf8')
    const baseFilename = baseNameForCSSFile(filename)
    map[camel(baseFilename)] = getMapOfStylesForFile(
      stylesheetAsString,
      baseFilename,
    )
    return map
  }, {})

const getCSSFilesInPath = inPath =>
  readdirSync(resolve(inPath))
    .filter(f => extname(f) === '.css')
    .map(f => resolve(inPath, f))

const mockStylesheetsInPath = inPath => {
  const cssFilenames = getCSSFilesInPath(inPath)
  return parseStylesheetInFiles(cssFilenames)
}

module.exports = mockStylesheetsInPath(
  './path/to/css',
)

example

given a directory of:

src/
  - font-size.css

and the css:

/* src/font-size.css */
.hello {
  font-size: 100%;
}

running mockStylesheetsInPath('./src')

would build:

{
  fontSize: { 
    hello: 'font-size__hello'
  }
}

Supports media queries with nested rules, pseudo selectors, dash-separated class names