SwordCSS

A powerful CSS compiler

What Does This Add?

• An easier systems for combining the styles of classes, ids, and other queries
• The equivalent of SCSS variables, constants that can be used throughout your CSS
• An easier way to write CSS variables

And all of that is added through valid CSS syntax!

Installation

$ npm install swordcss
# Or use Yarn
$ yarn add swordcss

Usage

const SwordCSS = require("swordcss");

const sword = SwordCSS();

sword.compile(
  ".allElem {width: 100%; height: 100%;} #elem {sw-class: allElem;}"
); // .allElem {width: 100%; height: 100%;} #elem {width: 100%; height: 100%;}

Options

{
  "useClass": true,
  "useConstant": true,
  "useId": true,
  "useQuery": true,
  "useVariable": true,
  "minify": false
}

These options are used when you initialize the SwordCSS instance.

Documentation

You can check out the documentation for this project here.

Contributing

Code Style

The code style is enforced through ESLint with the SwordCSS ESLint Config and prettier with no config.

Validate code with ESLint

$ npm run lint

Format code with prettier

$ npm run prettier
# or you can use format
$ npm run format

Tests

Tests use mocha for test running and chai for assertions. We also use nyc with Instanbul to calculate code coverage.

Run tests with mocha

$ npm test

Typescript

We use Typescript and JSDoc for static typing of our project without build tooling.

Check types

$ npm run types

Rollup Bundling

We use Rollup to bundle our code into ESM and CJS before being uploaded to NPM.

Bundle code

$ npm run build

Supporters