A powerful CSS compiler

• 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!

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

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%;}

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

These options are used when you initialize the SwordCSS instance.

You can check out the documentation for this project here.

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 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

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

Check types

$ npm run types

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

Bundle code

$ npm run build