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