diff --git a/.grit/workflows/extract_colors.ts b/.grit/workflows/extract_colors.ts new file mode 100644 index 00000000..a68601ec --- /dev/null +++ b/.grit/workflows/extract_colors.ts @@ -0,0 +1,39 @@ +import * as grit from '@getgrit/api'; + +export async function execute() { + const tokens = await grit.stdlib.apply( + { + query: `engine marzano(0.1) +language js + +js"colors = { $colors }" where { + $dunk = js"thing", + $colors <: some bubble($alias) js"$name: theme.$label" where { + // Build the next rewrite inline + // $alias += js"\`'$name'\` => \`'$label'\`, " + } +}`, + extract: ['$dunk'], + }, + {}, + ); + if (!tokens.success) return tokens; + console.log('got back', tokens); + // const rewrites = tokens.outputs.find((o) => o.name === '$alias').content; + // const query = `engine marzano + // language js + + // js"color($color)" where { $color <: or { ${rewrites} }`; + // console.log(query); + // const colors = await grit.stdlib.apply( + // { + // query, + // }, + // {}, + // ); + + return { + success: true, + message: `Success.`, + }; +} diff --git a/colors.grit b/colors.grit new file mode 100644 index 00000000..6e650170 --- /dev/null +++ b/colors.grit @@ -0,0 +1,23 @@ +engine marzano(0.1) +language js + +files(files = and { + $alias_list = [], + // First we gather everything up by looking for our colors file + some bubble($alias_list) { file($body) where { + $body <: contains js"colors = { $colors }", + $colors <: some bubble($alias_list) $alias where { $alias_list += $alias } + } }, + // Then we actually use it + some bubble($alias_list) { file($body) where { + $body <: contains js"color($color)" where { + $alias_list <: some bubble($color, $value) js"$name: theme.$label" where { + // Cast it to a string + $literal = js"'$name'", + $color <: $literal, + $value = js"'$label'" + }, + $color => js"$value" + } + }} +}) diff --git a/samples/tokenize-colors/scheme.ts b/samples/tokenize-colors/scheme.ts new file mode 100644 index 00000000..b5ebfdda --- /dev/null +++ b/samples/tokenize-colors/scheme.ts @@ -0,0 +1,9 @@ +const theme = { + blueOne: '#1E88E5', + blueTwo: '#1976D2', +}; + +export const colors = { + bg: theme.blueOne, + fg: theme.blueTwo, +}; diff --git a/samples/tokenize-colors/usage.ts b/samples/tokenize-colors/usage.ts new file mode 100644 index 00000000..acdd57dd --- /dev/null +++ b/samples/tokenize-colors/usage.ts @@ -0,0 +1,3 @@ +const Component = styled.div` + color: ${color('bg')}; +`;