Dump update

.gitignore

@@ -5,3 +5,4 @@ theme.js
 theme.min.js
 config.json
 assets/css/pre-build
+assets/js/libs

.prettierignore

@@ -0,0 +1,3 @@
+app.js
+theme.min.css
+theme.min.js

.prettierrc

@@ -0,0 +1,10 @@
+{
+	"useTabs": true,
+	"tabWidth": 4,
+	"trailingComma": "all",
+	"singleQuote": true,
+	"printWidth": 100,
+	"semi": true,
+	"arrowParens": "always",
+	"endOfLine": "lf"
+}

Gruntfile.js

@@ -1,5 +1,5 @@
 const findUsedJsFiles = (grunt) => {
-	const file = grunt.file.read('snippets/js.liquid', 'utf8');
+	const file = grunt.file.read('snippets/js-modules.liquid', 'utf8');
 	const regex = /'([0-9a-zA-Z\-_\.]*.js)' \| asset_url/gm;
 
 	let jsFiles = [];
@@ -31,7 +31,6 @@ const findUsedJsLibs = (grunt) => {
 };
 
 module.exports = function (grunt) {
-
 	let shopifyConfig = grunt.file.readJSON('config.json', 'utf8');
 
 	grunt.initConfig({
@@ -41,8 +40,8 @@ module.exports = function (grunt) {
 		pkg: grunt.file.readJSON('package.json'),
 		install: {
 			options: {
-				env: ['default', 'staging', 'production']
-			}
+				env: ['default', 'staging', 'production'],
+			},
 		},
 		shopify: {
 			options: {
@@ -58,15 +57,15 @@ module.exports = function (grunt) {
 					'locales/*',
 					'sections/*',
 					'snippets/*',
-					'templates/*'
-				]
-			}
-		}
+					'templates/*',
+				],
+			},
+		},
 	});
 
 	const tasks = grunt.file.expand({ filter: 'isFile', cwd: 'tasks' }, ['*']);
 
-	tasks.forEach(task => {
+	tasks.forEach((task) => {
 		require(`./tasks/${task}`)(grunt);
 	});
 
@@ -79,22 +78,22 @@ module.exports = function (grunt) {
 	grunt.loadNpmTasks('grunt-contrib-jshint');
 	grunt.loadNpmTasks('grunt-contrib-watch');
 	grunt.loadNpmTasks('grunt-contrib-clean');
+	grunt.loadNpmTasks('grunt-csso');
 	grunt.loadNpmTasks('grunt-babel');
-	grunt.loadNpmTasks('grunt-purgecss');
 	grunt.loadNpmTasks('grunt-csso');
-	grunt.loadNpmTasks('grunt-complexity');
+	grunt.loadNpmTasks('grunt-env');
 
-	grunt.registerTask('dev-js', ['complexity', 'jshint']);
+	grunt.registerTask('dev-js', ['jshint']);
 	grunt.registerTask('dev', ['dev-js']);
 
 	grunt.registerTask('js', ['dev-js', 'clean:js', 'libs', 'concat:js', 'babel', 'headers:js']);
-	grunt.registerTask('css', ['clean:css','postcss', 'concat:css', 'purgecss', 'csso', 'headers:css']);
-	grunt.registerTask('build', ['css', 'js']);
+	grunt.registerTask('css', ['clean:css', 'postcss', 'csso', 'headers:css']);
+	grunt.registerTask('build', ['env:build', 'css', 'js']);
 
 	grunt.registerTask('deploy', ['build', 'shopify:deploy']);
 	grunt.registerTask('deploy:staging', ['build', 'shopify:deploy:staging']);
 	grunt.registerTask('deploy:prod', ['build', 'shopify:deploy:production']);
 	grunt.registerTask('init', ['install', 'deploy']);
 
-	grunt.registerTask('default', ['watch']);
+	grunt.registerTask('default', ['env:dev', 'watch']);
 };

assets/css/base/fonts.css

@@ -1,9 +1,7 @@
-
 @font-face {
 	font-family: 'Font Name';
-	src: local('?'),
-		url("/assets/fonts/file-name.woff2") format('woff2'),
-		url("/assets/fonts/file-name.woff") format('woff');
+	src: local('?'), url('/assets/fonts/file-name.woff2') format('woff2'),
+		url('/assets/fonts/file-name.woff') format('woff');
 	font-weight: 400;
 	font-style: normal;
 	font-display: fallback;

assets/css/base/site.css

@@ -1,33 +1,43 @@
 ::selection {
-	@apply bg-main-reverse;
-	@apply text-main-reverse;
+	@apply bg-black;
+	@apply text-white;
 }
 ::-moz-selection {
-	@apply bg-main-reverse;
-	@apply text-main-reverse;
+	@apply bg-black;
+	@apply text-white;
+}
+
+@media screen and (prefers-reduced-motion: reduce), (update: slow) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.001ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.001ms !important;
+		scroll-behavior: auto !important;
+	}
 }
 
 html {
 	--unit-root: 1;
 	--security-root: 60;
 	--fluid-breakpoint-root: 1560;
-	--perimeter-root: calc(
-		var(--fluid-breakpoint-root) - var(--security-root) * 2
-	);
-	--unit-in-vw: calc(
-		var(--unit-root) * 100 / var(--fluid-breakpoint-root) * 1vw
-	);
+	--perimeter-root: calc(var(--fluid-breakpoint-root) - var(--security-root) * 2);
+	--unit-in-vw: calc(var(--unit-root) * 100 / var(--fluid-breakpoint-root) * 1vw);
 	--unit-in-px: calc(var(--unit-root) * 1px);
 
 	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+	--ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
 
 	font-size: calc(var(--unit-in-vw) * 3);
-	scroll-behavior: smooth;
+
+	-webkit-font-smoothing: antialiased;
+	-webkit-tap-highlight-color: transparent;
 }
 
 body {
-	@apply text-current;
-	@apply font-sans;
+	@apply text-40;
+	@apply font-base;
 }
 
 /* Tablet */

assets/css/main.css

@@ -8,6 +8,3 @@
 
 /* Utils */
 @import 'tailwind/utilities.css';
-
-/* Admin */
-@import 'lib/admin.css';

layout/theme.liquid

@@ -24,16 +24,23 @@
 		</script>
 	</head>
 	<body class="{{ template.name }} {{ template.suffix }}">
-		{% render 'header' %}
+		<div id="site">
+			{% render 'header' %}
 
-		<main role="main">
-			{{ content_for_layout }}
-		</main>
+			<main>
+				{{ content_for_layout }}
+			</main>
 
-		{% render 'footer' %}
-
-		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+			{% render 'footer' %}
+		</div>
 		{% render 'js' %}
+		<script>
+			(() => {
+				'use strict';
+				App.debug(true);
+				App.run('#site');
+			})();
+		</script>
 		{% render 'store-schemas' %}
 	</body>
 </html>