Skip to content

Instantly share code, notes, and snippets.

View crswll's full-sized avatar
💾

Bill Criswell crswll

💾
  • Philadelphia, PA
  • 22:53 (UTC -04:00)
  • X @crswll
View GitHub Profile
const searchParamsToObject = (params: URLSearchParams) => {
const searchParamsAsObject: Record<string, string | string[]> = {}
Array.from(params.entries()).forEach(([key, value]) => {
const existingValue = searchParamsAsObject[key]
if (existingValue) {
searchParamsAsObject[key] = Array.isArray(existingValue)
? [...existingValue, value]
: [existingValue, value]
@crswll
crswll / next-setup-crswll.sh
Last active August 17, 2022 15:28
Save the file somewhere helpful, `chmod +x ./next-setup.sh`, then run `./next-setup.sh project-name`, then `cd project-name` then `yarn run dev` and you're good to go.
# Set up the next app.
yarn create next-app $1 --typescript
# cd into it.
cd $1
# add tailwind and its deps
yarn add -D tailwindcss postcss autoprefixer postcss-import
# remove the default css file, we're going to replace it later
diff --git a/src/util/parseBoxShadowValue.js b/src/util/parseBoxShadowValue.js
index eb4872c7..5ed74a9e 100644
--- a/src/util/parseBoxShadowValue.js
+++ b/src/util/parseBoxShadowValue.js
@@ -1,58 +1,27 @@
-let KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
+let KEYWORDS = ['inset', 'inherit', 'initial', 'revert', 'unset']
let COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
-let LENGTH = /^-?(\d+)(.*?)$/g
@crswll
crswll / index.html
Last active December 22, 2021 15:00
A quick example of generating `:has()` variants with Tailwind. As of right now Safari Technology Preview is the only browser with support for `:has()` and there's currently a few bugs.
<div class="group flex flex-col">
<label class="text-gray-500 group-has-disabled:text-red-500">Name</label>
<input class="border p-2" disabled />
</div>
@crswll
crswll / input.scss
Created July 14, 2021 15:12
Generated by SassMeister.com.
$foo: theme('colors.red.400');
.foo {
color: $foo;
}
@crswll
crswll / input.scss
Created March 25, 2021 16:24
Generated by SassMeister.com.
:root {
--stroke-base: 255 0 0
}
.foo {
color: rgba(var(--stroke-base)/0.15)
}
@crswll
crswll / input.scss
Created March 21, 2021 18:53
Generated by SassMeister.com.
@mixin button ($a, $b, $c) {
color: $a;
border: $b;
content: $c;
}
.foo {
@include button(#{theme('colors.white')}, 1px solid blue, 'hi')
}
@crswll
crswll / input.scss
Created March 4, 2021 16:39
Generated by SassMeister.com.
.button-primary {
color: theme('colors.error.10');
}
@crswll
crswll / input.scss
Created March 4, 2021 16:39
Generated by SassMeister.com.
.button-primary {
color: theme('primary');
}