Append processed css from .scss file to .liquid file with the same name

scss_css_liquid.sh

# Script for CodeKit hook to append processed css from scss file to liquid file
# (make sure to use 'Compressed' for scss->css output so everything is on one line)
#
# To use: 
# 1. create a `/styles` directory in your Shopify theme for your .scss files
# 2. name the .scss file the same name as the liquid file; e.g. sample.scss/sample.liquid
# 3. IMPORTANT: add empty `<style></style>` tags to first line of liquid file; add empty line below
# 4. add this script to your project in CodeKit in Hooks
# 5. profit

## NOTES:
# $CK_OUTPUT_PATH is the processed css file
# (provided variable from CodeKit)

# $CK_PROJECT_ROOT is the project root folder
# (another provided variable from CodeKit)

# get contents of css file
css=$(<$CK_OUTPUT_PATH)

# get filename without extension; save to FILE variable
s=$CK_OUTPUT_PATH
s=${s##*/}
FILE=${s%.css}

# set up our <style> tags
S1='<style>'
S2='</style>'

# concat css with <style> tags for output
DATA=$S1$css$S2

# search through project to find liquid file with same name as file
STYLEFILE=$(find $CK_PROJECT_ROOT -type f -name "${FILE}.liquid")

# replace first line of .liquid file with processed css in <style> tags.
#w00t.
{ printf '%s\n' "$DATA"; sed '1d' $STYLEFILE; } > tmp.liquid && mv tmp.liquid $STYLEFILE
#
#
#

What is this and what is it for?

In Shopify development, I wanted to encapsulate styles with the liquid file they apply to but still be able to use .scss. This script is for CodeKit's hooks: https://codekitapp.com/help/hooks/

What does 'encapsulate styles' mean?

If you've done any development with a JavaScript framework like React or Vue, it's good to colocate styles with the components that use them. This has two benefits: 1) both the styles and markup are in one place, making it easier to edit; and, 2) only the components that need the styles, load the styles.

Thus, I wanted to implement a similar idea but with Shopify theme development. For my Shopify development workflow, I use Quickshot: https://github.com/internalfx/quickshot

Using

Place .scss files in a /styles directory in your theme which Shopify will ignore. Use CodeKit to process them and output .css.

For this script to work, say you have a Shopify theme file product-template.liquid, you would create a product-template.scss file in the /styles directory in your theme. Make sure to set the css output in CodeKit to 'Compressed' so it is all on one line.

In your .liquid file, to make sure you don't overwrite anything, on the first line add empty <style></style> tags. You could put anything but the <style></style> tags just make sense to remind you that it will be overwritten by the processed css.

Add this script to CodeKit's hooks in your project and you're good to go.