js-to-css-generator

Generate CSS style sheets from your css-in-js JSON objects

import { getFile, File, GetFileSettings, Tag } from 'js-to-css-generator';

import { jsToCss, CSSFile, File } from 'js-to-css-generator';

// styles.js

export const something = {
  backgroundColor: '#fff',
  fontSize: 12,
  padding: 16,
};

export const somethingElse = {
  backgroundColor: '#ccc',
  fontSize: 10,
  padding: 8,
};

// Get the style objects as a module via require:
const styles = require('./styles.js');

// ...or assemble all style objects into a single object:
const styles = {
  something: {
    backgroundColor: '#fff',
    fontSize: 12,
    padding: 16,
  },
  somethingElse: {
    backgroundColor: '#ccc',
    fontSize: 10,
    padding: 8,
  },
};

// Generate CSS file
const { writeFileSync } = require('fs');
const { join } = require('path');
const { jsToCss } = require('js-to-css-generator');

const file = {
  name: 'styles.css',
  module: styles,
};

const cssFile = jsToCss(file);

writeFileSync(join(__dirname, cssFile.name), cssFile.css, 'utf8');

.something {
  background-color: #fff;
  font-size: 12px;
  padding: 16px;
}

.something-else {
  background-color: #ccc;
  font-size: 10px;
  padding: 8px;
}

// styles.js

export const something = {
  backgroundColor: '#fff',
  fontSize: 12,
  padding: 16,
  ':hover': {
    backgroundColor: '#ccc',
  },
  '& + &': {
    marginLeft: 8,
  },
};

// Bring in the style objects
const styles = require('./styles.js');

// Generate CSS file
const { writeFileSync } = require('fs');
const { join } = require('path');
const { jsToCss } = require('js-to-css-generator');

const file = {
  name: 'styles.css',
  module: styles,
};

const cssFile = jsToCss(file);

writeFileSync(join(__dirname, cssFile.name), cssFile.css, 'utf8');

.something {
  background-color: #fff;
  font-size: 12px;
  padding: 16px;
}

.something:hover {
  background-color: #ccc;
}

.something + .something {
  margin-left: 8px;
}

// styles.js

export const something = {
  backgroundColor: '#fff',
  fontSize: 12,
  padding: 16,
  ':hover': {
    backgroundColor: '#ccc',
  }
};

export const spacing = {
  '& + &': {
    marginLeft: 8,
  },
};

// Bring in the style objects
const styles = require('./styles.js');

// Generate CSS file
const { writeFileSync } = require('fs');
const { join } = require('path');
const { jsToCss } = require('js-to-css-generator');

const file = {
  name: 'styles.css',
  combinators: {
    spacing: '.something',
  },
  module: styles,
};

const cssFile = jsToCss(file);

writeFileSync(join(__dirname, cssFile.name), cssFile.css, 'utf8');

.something {
  background-color: #fff;
  font-size: 12px;
  padding: 16px;
}

.something:hover {
  background-color: #ccc;
}

.something + .something {
  margin-left: 8px;
}

// styles.js

export const something = {
  backgroundColor: '#fff',
  fontSize: 12,
  padding: 16,
};

export const somethingElse = {
  backgroundColor: '#ccc',
  fontSize: 10,
  padding: 8,
};

export const anotherSomething = {
  backgroundColor: 'green',
  display: 'flex',
  margin: 8,
};

export const oneMore = {
  border: '1px solid #ccc',
  padding: 16,
};

// Bring in the style objects
const styles = require('./styles.js');

// Generate CSS file
const { writeFileSync } = require('fs');
const { join } = require('path');
const { jsToCss } = require('js-to-css-generator');

const file = {
  name: 'styles.css',
  prepend: '.test',
  version: '1',
  overrides: {
    somethingElse: '.my-override',
  },
  ignore: ['anotherSomething'],
  map: true,
  module: styles,
};

const cssFile = jsToCss(file);

writeFileSync(join(__dirname, cssFile.name), cssFile.css, 'utf8');

/* something */
.test-v1-something {
  background-color: #fff;
  font-size: 12px;
  padding: 16px;
}

/* somethingElse */
.my-override {
  background-color: #ccc;
  font-size: 10px;
  padding: 8px;
}

/* oneMore */
.test-v1-one-more {
  border: 1px solid #ccc;
  padding: 16px;
}

const files = [file1, file2, file3];
const cssFiles = jsToCss(files);

/** 
 * @config
 * @prepend .test
 * @map
 */


export const something = {
  backgroundColor: '#fff',
  fontSize: 12,
  padding: 16,
};

/** @class .my-override */
export const somethingElse = {
  backgroundColor: '#ccc',
  fontSize: 10,
  padding: 8,
};

/** @ignore */
export const anotherSomething = {
  backgroundColor: 'green',
  display: 'flex',
  margin: 8,
};

export const oneMore = {
  border: '1px solid #ccc',
  padding: 16,
};

/** 
 * @config
 * @prepend .test
 * @map
 */

const { readFileSync } = require('fs');

// Bring in the style objects
const styles = require('./styles.js');

const srcFile = readFileSync('./styles.js', 'utf8');
const file = getFile(srcFile, styles, { name: 'styles.css', version: '1' });

const cssFile = jsToCss(file);

writeFileSync(join(__dirname, cssFile.name), cssFile.css, 'utf8');

/* something */
.test-v1-something {
  background-color: #fff;
  font-size: 12px;
  padding: 16px;
}

/* somethingElse */
.my-override {
  background-color: #ccc;
  font-size: 10px;
  padding: 8px;
}

/* oneMore */
.test-v1-one-more {
  border: 1px solid #ccc;
  padding: 16px;
}

// Get the style objects as a module via require:
const styles = require('./styles.js');

// Generate CSS file
const { writeFileSync } = require('fs');
const { join } = require('path');
const { jsToCss } = require('js-to-css-generator');

const file = {
  name: 'styles.css',
  prepend: '.💩',
  module: styles,
};

const cssFile = jsToCss(file);

writeFileSync(join(__dirname, cssFile.name), cssFile.css, 'utf8');

.💩-something {
  background-color: #fff;
  font-size: 12px;
  padding: 16px;
}

.💩-something-else {
  background-color: #ccc;
  font-size: 10px;
  padding: 8px;
}

export type File = {
  // any name that you would like to use as an identifier for the File
  name?: string,

  // optional string to use to prepend all of your classes for scope
  prepend?: string, 

  // optional object with key/value pairs where the keys match the
  // style object names you want to override and values that are the
  // class names to use as the overrides
  overrides?: Record<string, string>, 

  // optional object with key/value pairs where the keys match the
  // style object names you want to affect and values that are the
  // class names to use for the combinators. The value will replace
  // any '&' in your style names.
  combinators?: Record<string, string>,

  // optional array of names of style objects you don't want to
  // include as part of the output CSS file
  ignore?: string[],

  // optional string representation of the file version to add as
  // part of the class name
  version?: string,
  
  // optionally map the original object name to the outputted class
  // name via including a code comment above the class name with the
  // original object name
  map?: boolean,

  // object that contains all of your styled objects
  module: Record<string, Record<string, string | number>>,
};

export type CSSFile = {
  // any name that you gave your {File}
  name?: string,
  
  // The CSS file string content
  css: string,
  
  // JavaScript Map object of key/value pairs that maps the JS object name to a class name.
  objectToStyleMap: Map<string, string>,

  // JavaScript Map object of key/value pairs that maps the class name name to a JS object.
  styleToObjectMap: Map<string, string>,
};

export type Tags = {
  class?: string,
  combinator?: string,
  config?: string,
  ignore?: string,
  map?: string,
  prepend?: string,
};

{
  class: '@class',
  combinator: '@combinator',
  config: '@config',
  ignore: '@ignore',
  map: '@map',
  prepend: '@prepend',
};

export type GetFileSettings = {
  // any name that you gave your {File}
  name?: string, 

  // optional string to use to prepend all of your classes for scope
  prepend?: string, 

  // optional string representation of the file version to add as
  // part of the class name
  version?: string, 

  // RegEx string used to find specific objects and jsdoc inside the
  // source file. This string should include 'XXXXXX' in it which
  // will be a placeholder for the object name to search for.
  styleRegEx?: string, 

  // Object used to define what the jsdoc tags are for parsing
  tags?: Tags, 
};

Within the module you'll find the following directories and files:

package.json
CHANGELOG.md -- history of changes to the module
LICENSE
README.md -- this file
/lib
  └───/es5
    └───/getFile
      └───index.d.ts - 872 Bytes
      └───index.js - 4.1 KB
      └───index.d.ts - 141 Bytes
      └───index.js - 430 Bytes
    └───/jsToCss
      └───index.d.ts - 519 Bytes
      └───index.js - 11.25 KB
      └───types.d.ts - 795 Bytes
      └───types.js - 79 Bytes
  └───/es6
    └───/getFile
      └───index.d.ts - 872 Bytes
      └───index.js - 3.81 KB
      └───index.d.ts - 141 Bytes
      └───index.js - 76 Bytes
    └───/jsToCss
      └───index.d.ts - 519 Bytes
      └───index.js - 11.05 KB
      └───types.d.ts - 795 Bytes
      └───types.js - 12 Bytes

MIT