Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matthewbub/css4life
Convert Postcss to CSS via CLI
https://github.com/matthewbub/css4life
cli css postcss
Last synced: 3 months ago
JSON representation
Convert Postcss to CSS via CLI
- Host: GitHub
- URL: https://github.com/matthewbub/css4life
- Owner: matthewbub
- Archived: true
- Created: 2024-04-01T12:59:55.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-07-15T15:27:05.000Z (6 months ago)
- Last Synced: 2024-09-23T01:30:59.691Z (3 months ago)
- Topics: cli, css, postcss
- Language: JavaScript
- Homepage:
- Size: 122 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Css 4 Life
**Deprecated: This repository moved to https://github.com/chroniconl/stylist**
An approachable build abstraction for creating distributable themes using postcss as a css processor. Just pass your postcss files, and it spits out vanilla CSS.
**Benefits over CSS**
- Future CSS syntax support
- Custom media queries enabled by `postcss-custom-media`
- Cross-browser compatibility thanks to `autoprefixer`
- `@mixin` syntax support thanks to `postcss-mixins`
- CSS minification thanks to `cssnano`
- Math support thanks to `postcss-calc`
- Style linting thanks to `style-lint`
- Source map support thanks to `gulp-sourcemaps`
## Table of contents
- [Setup](#setup)
- [Commands](#commands)
- [Build](#build)
- [Build / Flags](#build--flags)
- [Minify](#minify)
- [Minify / Flags](#minify--flags)
- [Lint](#lint)
- [Lint / Flags](#watch--flags)
- [Watch](#watch)
- [Watch / Flags](#watch--flags)
## Setup
Just clone this repo into your build tools or desired location, and then hit the `./gulpfile.js` in the root directory
```sh
# example build command
node ./build-tools/css4life/gulpfile.js build --src='public/example/*.css' --build='dist'
```
## Commands
### Build
To build your CSS files, invoke the CLI tool by targeting the root `gulpfile.js` with Node.js, followed by the `build` command, then your additional arguments.
At a minimum, you should pass the `--src` and `--build` flags. For further extendability you could also pass a JSON string of CSS variables to be used in the build process.
```shell
node ./path/to/this/gulpfile.js build --src= --build= --variables=
```
#### Build / Flags
- `--src`: Specifies the source directory containing your CSS files.
- `--build`: Specifies the output directory for the built CSS files.
- `--variables`: (Optional) Provides a JSON string of CSS variables to be used in the build process.
- `--concat`: (Optional) Concatenates all CSS files within the `--src` directory. Defaults to `false`
### Minify
To minify your CSS files, invoke the CLI tool by targeting the root `gulpfile.js` with Node.js, followed by the `minify` command, then your additional arguments.
At a minimum, you should pass the `--src` and `--build` flags.
```shell
node ./path/to/this/gulpfile.js minify --src= --build=
```
#### Minify / Flags
- `--src`: Specifies the source directory containing your CSS files.
- `--build`: Specifies the output directory for the minified CSS files.
### Lint
To lint your compiled CSS files, invoke the CLI tool by targeting the root `gulpfile.js` with Node.js, followed by the `lint` command, then your additional arguments.
At a minimum, you should pass the `--src` and `--build` flags.
```shell
node ./path/to/this/gulpfile.js lint --src=
```
#### Lint / Flags
- `--src`: Specifies the source directory containing your CSS files.
### Watch
To watch your PostCSS files, invoke the CLI tool by targeting the root `gulpfile.js` with Node.js, followed by the `watch` command, then your additional arguments.
At a minimum, you should pass the `--src` and `--build` flags. For further extendability you could also pass a JSON string of CSS variables to be used in the build process.
```shell
node ./path/to/this/gulpfile.js build --src= --build= --variables=
```
#### Watch / Flags
- `--src`: Specifies the source directory containing your CSS files.
- `--build`: Specifies the output directory for the built CSS files.
- `--variables`: (Optional) Provides a JSON string of CSS variables to be used in the build process.