Skip to content

Instantly share code, notes, and snippets.

@Maybach91

Maybach91/shopify-change-rem-values-to-standard.rb

Last active May 17, 2022 13:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Maybach91/e81fb5266304b4bce85a2958e4691bbe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Maybach91/e81fb5266304b4bce85a2958e4691bbe to your computer and use it in GitHub Desktop.
Download ZIP
[Shopify: Change all rem values to default / tailwind one] Dawn Theme is using html { font-size: 62.5% } to make rem working like 1.6rem to achieve 16px. But this is not working with tailwind or the standard way. #shopify #tailwind #rem #values
Raw
shopify-change-rem-values-to-standard.rb
require 'bigdecimal'
def custom_round value
BigDecimal(value * 2, 2).to_f / 2
end
Dir.glob('**/*.{css,liquid}').each do |file|
fixed_file_content = File.read(file).gsub(/(?<!\w)([\d\.]+)rem/) do
value_in_pixels = $1.to_f * 10
value_in_standard_rems = value_in_pixels.to_f / 16
"#{ custom_round(value_in_standard_rems) }rem"
end
File.write file, fixed_file_content
end
Raw
shopify-dawn-theme-change-all-rem-values-to-default.md
  1. Create file named rem.rb within the theme root with the content of shopify-change-rem-values-to-standard.rb
  2. Make the file executable via the Terminal command chmod +x rem.rb
  3. Run ruby rem.rb

Thanks to @eloyesp Shopify/dawn#969 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment