CSS vs LESS / Local vs Remote

[kitajchuk]

This is the place where these 2 related(ish) issues can be formally tracked against a solution. I'm attaching 3 current related issues for reference and closing them.

Related Issues

• https://github.com/NodeSquarespace/node-squarespace-server/issues/157
• https://github.com/NodeSquarespace/node-squarespace-server/issues/160
• https://github.com/NodeSquarespace/node-squarespace-server/issues/123

Local vs Remote - Solution Store Squarespace CSS in a core server file and load THAT with all local styles on top of it rather than allowing the link reference to the remote site.css to be loaded locally.

CSS vs LESS - Solution Store Squarespace automagical LESS in core server files that can be loaded when import references to them are found in local template LESS files.

_Known Issues_

• Grid Breaker relies on variables I can only find in the api/template/GetTemplateTweakSettings API endpoint. This means the middleware theoretically would need to load that API data as well during the initial pre-fetch when the server boots.

Universal LESS Imports

• http://squarespace.com/universal/styles-v6/social-icon-font.less
• http://squarespace.com/universal/styles-v6/sqs-grid-breaker.less
• http://squarespace.com/universal/styles-v6/sqs-ui-font.less

These should _NOT_ be imported in template LESS files, but they exist and seem to be related to core.

• http://squarespace.com/universal/styles-v6/grid.less
• http://squarespace.com/universal/styles-v6/tweak.less
• http://squarespace.com/universal/styles-v6/common.less
• http://squarespace.com/universal/styles-v6/_base.less
• http://squarespace.com/universal/styles-v6/_base-damask.less
• http://squarespace.com/universal/styles-v6/big-spinner.less
• http://squarespace.com/universal/styles-v6/yui/cssgrids.less
• http://squarespace.com/universal/styles-v6/yui/widget-base-core.less
• http://squarespace.com/universal/styles-v6/yui/panel-core.less
• http://squarespace.com/universal/styles-v6/yui/slider-core.less
• http://squarespace.com/universal/styles-v6/yui/autocomplete-list-core.less
• http://squarespace.com/universal/styles-v6/blocks.less

[kitajchuk]

@patbegg @schikulski

Just a heads up on where the thinking is going for these issues :)

[kitajchuk]

I'm revoking this branch for now - there's still a lot up in the air in regards to the LESS issue...

[Aeon]

Looks promising!

[schikulski]

Sounds good!

[patbegg]

I've been playing around and i've had some success with the following method (note that i'm using grunt in my workflow as a build tool but it's not necessary):

• In the SS (Squarespace) '/styles' folder I have base.css that contains ONLY the SS styles
• I have all the css that I have created in the '/assets' folder e.g. main.css
• I load the main.css file AFTER {squarespace-headers}
• I have had to use a cache buster like (and change the 'v=1.1' to 'v=1.x') to get SS to fresh itself in the SS site admin

NOTE: this is being used on a site build from scratch using the SS developer blank template.

[dmitrykiselyov]

@patbegg cool. For a cache buster you can use {squarespace.template-revision} For example <link rel="stylesheet" href="/assets/styles/main.css?v={squarespace.template-revision}"> Thanks to @jasonbarone for this idea.