agile-css
TypeScript icon, indicating that this package has built-in type declarations

2.1.12 • Public • Published

Atomic CSS

npm version npm npm All Contributors

Demo

React Atomic CSS

Install

npm i agile-css@latest --save-dev

With yarn

yarn add agile-css@latest -D

Install VScode extensions

Agile Css Autocomplete extentions

Setup

Create file: agilecss.config.ts or agilecss.config.mjs or agilecss.config.js

import { defineConfig, pfs, pixelToRem, rtl, validator } from "agile-css";

export default defineConfig({
  input: ["./src/**/*.jsx", "./src/**/*.js", "./src/**/*.tsx"],
  output: "./src/agile-css.css",
  defaultCss: `
    body {
      font-size: 14px;
    }
  `,
  validator,
  cache: true,
  plugins: [pixelToRem(62.5), rtl(), pfs(), testplugin2()],
  customValue(value) {
    return value;
  },
  breakpoints: {
    sm: "768px",
    md: "992px",
    lg: "1200px",
  },
  custom: {
    "color-primary": "var(--color-primary)",
    "color-secondary": "var(--color-secondary)",
    "color-tertiary": "var(--color-tertiary)",
    "color-quaternary": "var(--color-quaternary)",
  },
});

function testplugin2() {
  return ({ addBase }) => {
    addBase(`.testttttttttt { color: red }`);
  };
}

CLI (file package.json)

-p: Port
-w: Watch
-c: Config
{
  ...
  "scripts": {
    ...
    // production
    "prebuild": "agile-css",

    // development
    "agile-css": "agile-css -w",
    // OR
    "agile-css-port": "agile-css -p 1234 -w",
  },
  ...
}

Custom config file

  • You can also use a custom config file instead of agilecss.config.ts. Just create <FILE_NAME>.config.ts to build command
Exp: awesome.config.ts
{
  ...
  "scripts": {
    ...
    // production
    "prebuild": "agile-css -c awesome",

    // development
    "agile-css": "agile-css -w -c awesome",
    // OR
    "agile-css-port": "agile-css -p 1234 -w -c awesome",
  },
  ...
}

Compile

npm run agile-css

Syntax

<property>:<value>|<pseudo>|<pseudo><important -> "!">...@<media>

Example:

Class Name               CSS
-----------------------------------------------------------------------------------------
c:red                 -> .c\:red { color: red }
bgc:blue!             -> .bgc\:blue\! { background-color: blue !important }
bd:1px_solid_yellow   -> .bd\:1px_solid_yellow { border: 1px solid yellow }
p:30px@md             -> @media (min-width:992px) { .p\:30px\@md { padding: 30px }
m:20px@+300px         -> @media (max-width:300px) { .m\:20px\@\+300px { margin: 20px } }
fz:20px|h             -> .fz\:20px\|h:hover { font-size: 20px }
cnt:(After_cnt)||af   -> .cnt\:\(After_cnt\)\|\|af::after { content: 'After ctn' }
cnt:(Before_cnt)|be   -> .cnt\:\(Before_cnt\)\|be:before { content: 'Before ctn' }
cnt:(Hover)|h||be     -> .cnt\:\(Hover\)\|be:hover:before { content: 'Hover' }
trf:scale(2)          -> .trf/:scale\(2\) { transform: scale(2) }
m:calc(20px_+_10px)   -> .m\:calc\(20px_+_10px\) { margin: calc(20px + 10px) }

Result

HTML

<div class="c:red c:blue|h bgc:color-primary fz:20px ml:10px w:30%@md p:30px@md m:20px@+300px pos:relative!"></div>

Output

.c\:red { color: red }
.c\:blue\|h:hover { color: blue }
.bgc\:color-primary { background-color: var(--color-primary) }
.fz\:20px { font-size: 20px }
.ml\:10px { margin-left: 10px }
[dir="rtl"] .ml\:10px { margin-right: 10px }
.pos\:relative\! { position: relative !important }
@media (max-width:300px) {
.m\:20px\@\+300px { margin: 20px } }
@media (min-width:992px) {
.p\:30px\@md { padding: 30px }
.w\:30\%\@md { width: 30% } }

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
2.1.121latest

Version History

VersionDownloads (Last 7 Days)Published
2.1.121
2.1.111
2.1.90
2.1.80
2.1.70
2.1.60
2.1.50
2.1.40
2.1.30
2.1.20
2.1.10
2.1.00
2.0.70
2.0.60
2.0.50
2.0.40
2.0.30
2.0.20
2.0.00
1.1.70
1.1.60
1.1.50
1.1.40
1.1.30
1.1.20
1.1.10
1.1.00
1.0.90
1.0.80
1.0.70
1.0.60
1.0.50
1.0.40
1.0.30
1.0.20
1.0.10
1.0.00

Package Sidebar

Install

npm i agile-css

Weekly Downloads

2

Version

2.1.12

License

MIT

Unpacked Size

81.7 kB

Total Files

10

Last publish

Collaborators

  • hunghg255