CSS Processing Flow

Zesty.io runs CSS pre-processers on save and publish of SASS, SC SS, LESS, and CSS files.

Zesty.io’s Code Editor supports CSS, LESS, and SCSS/SASS. Every save of a stylesheet will combine, compile, and minify all stylesheet files into a single CSS file. If more than one style of stylesheet is used, they will compile and concat into a single file. The order of concatenation:

  1. CSS

  2. LESS

  3. SCSS/SASS

Compilers and Minifiers

All files are concatenated based on their type then by their order set in the editor interface of the Zesty.io manager. Each stylesheet type has its own compiler or minifier explained below.

CSS

All CSS with the exception of any file named ‘ie8.css’ is concatenated and run through a minification process. The repository used for CSS minification: https://github.com/fmarcia/uglifycss

LESS

All LESS files are concatenated based on their order in the editor interface and then run through the LESSC compiler with the compressed flag. The repository we use to compile: https://github.com/less/less.js

Errors are returned for broken LESS at compile time.

SCSS/SASS

All SCSS files are concatenated based on their order in the editor and run through the SASSC compiler with the flags ‘ --style compressed --stdin’, that behavior is hard coded and cannot be changed. The repository used for compiling SASS: https://github.com/sass/sassc

The command to compile SCSS to CSS is `sassc --stdin --style compressed`

The command to compile SASS to CSS is `sassc --stdin --sass --style compressed`

Errors are returned for broken SASS at compile time.

Special Files

ie8.css

If a file is given the name ie8.css, it will be ignored by the minification process and be included in its own href link in the header after the main minified CSS file is added.

Auto Added Stylesheet Files

Zesty.io auto appends stylesheets to specific templates (mostly legacy). If you experience added CSS and it is a problem please reach out to support on the Zesty.io developer slack channel. Support engineers can remove the base CSS files.

Managing Stylesheets Using the API

post
Create Stylesheet

https://8-xyz-xyzxyz.api.zesty.io/v1/web/stylesheets/
Creates a single stylesheet with two versions: dev and live
Request
Response
Body Parameters
type
required
string
type must be one of the following options: - text/less - text/sass - text/scss - text/css
filename
required
string
filename must include a file extension. Valid file extensions are: - .less - .sass - .scss - .css
code
required
string
200: OK
{
"_meta": {
"timestamp": "2019-09-04T20:43:09.6201781Z",
"totalResults": 1,
"start": 0,
"offset": 0,
"limit": 1
},
"data": {
"ZUID": "10-a08bb28483-clr72r",
"status": "live",
"type": "text/less",
"fileName": "styles.less",
"code": "@pale-green-color: #4D926F;#header {color: @pale-green-color;}h2{color: @pale-green-color;}",
"lastEditedID": 21474570,
"template": 1,
"module": 0,
"plugin": 0,
"version": 1,
"createdAt": "2019-09-04T20:43:08.6159035Z",
"updatedAt": "2019-09-04T20:43:08.6159349Z"
}
}

get
Get Single Stylesheet

https://8-xyz-xyzxyz.api.zesty.io/v1/web/stylesheets/:stylesheet_zuid
Retrieve a single stylesheet using its ZUID
Request
Response
Path Parameters
stylesheet_zuid
required
string
unique id assigned to a given stylesheet
200: OK
{
"_meta": {
"timestamp": "2019-09-05T18:39:54.3312411Z",
"totalResults": 1,
"start": 0,
"offset": 0,
"limit": 1
},
"data": {
"ZUID": "10-d2a3bed586-xtgzj9",
"status": "dev",
"type": "text/less",
"fileName": "derp.less",
"code": "@pale-green-color: #4D926A;#header {color: @pale-green-color;}h2{color: @pale-green-color;}",
"lastEditedID": 21474570,
"template": 1,
"module": 0,
"plugin": 0,
"version": 2,
"createdAt": "2019-09-04T11:16:31Z",
"updatedAt": "2019-09-04T18:17:40Z"
}
}

get
Get Multiple Stylesheets

https://8-xyz-xyzxyz.api.zesty.io/v1/web/stylesheets
Retrieves multiple stylesheets
Request
Response
Query Parameters
status
optional
string
A stylesheet's status. Valid options are: - dev - live
200: OK
{
"_meta": {
"timestamp": "2019-09-05T18:31:23.9959161Z",
"totalResults": 2,
"start": 0,
"offset": 0,
"limit": 2
},
"data": [
{
"ZUID": "10-2c4b18-84jpqk",
"status": "dev",
"type": "text/css",
"fileName": "main.css",
"code": "/*\nYou can write more css here\nor add additional files.\n\nLearn more here: https://developer.zesty.io/docs/code-editor/css-and-less/\n*/\n",
"lastEditedID": null,
"template": 1,
"module": 0,
"plugin": 0,
"version": null,
"createdAt": "2019-08-20T22:22:21Z",
"updatedAt": "2019-08-20T22:22:21Z"
},
{
"ZUID": "10-d2a3bed586-xtgzj9",
"status": "dev",
"type": "text/less",
"fileName": "derp.less",
"code": "@pale-green-color: #4D926A;#header {color: @pale-green-color;}h2{color: @pale-green-color;}",
"lastEditedID": 21474570,
"template": 1,
"module": 0,
"plugin": 0,
"version": 2,
"createdAt": "2019-09-04T11:16:31Z",
"updatedAt": "2019-09-04T18:17:40Z"
}
]
}

put
Update Stylesheet

https://8-xyz-xyzxyz.api.zesty.io/v1/web/stylesheets/:stylesheet_zuid
Request
Response
Path Parameters
stylesheet_zuid
required
string
Body Parameters
code
required
string
200: OK

put
Update Stylesheet and Publish

https://8-xyz-xyzxyz.api.zesty.io/v1/web/stylesheets/:stylesheet_zuid
Request
Response
Path Parameters
stylesheet_zuid
required
string
Query Parameters
purge_cache
optional
boolean
200: OK

delete
Delete Stylesheet

https://8-xyz-xyzxyz.api.zesty.io/v1/web/stylesheets/:stylesheet_zuid
Request
Response
Path Parameters
stylesheet_zuid
required
string
Query Parameters
purge_cache
optional
boolean
Default value is true. This value is only checked when you wish to publish
action
optional
string
Set action=publish if you wish to publish
200: OK

post
Publish Stylesheet

https://8-xyz-xyzxyz.api.zesty.io/v1/web/stylesheets/:stylesheet_zuid/versions/:version
Request
Response
Path Parameters
version
required
number
Specify the version of the resource you wish to publish
Query Parameters
purge_cache
optional
boolean
Default value is true
200: OK