generated from argyleink/vite-postcss-preset-env
-
Notifications
You must be signed in to change notification settings - Fork 196
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
234 additions
and
188 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import fs from 'fs' | ||
|
|
||
| import Animations from '../src/props.animations.js' | ||
| import Sizes from '../src/props.sizes.js' | ||
| import * as OpenColors from '../src/props.colors.js' | ||
| import Fonts from '../src/props.fonts.js' | ||
| import Borders from '../src/props.borders.js' | ||
| import Aspects from '../src/props.aspects.js' | ||
| import Easings from '../src/props.easing.js' | ||
| import Gradients from '../src/props.gradients.js' | ||
| import Shadows from '../src/props.shadows.js' | ||
| import SVG from '../src/props.svg.js' | ||
| import Zindex from '../src/props.zindex.js' | ||
|
|
||
| import {buildPropsStylesheet} from './to-stylesheet.js' | ||
| import {toJSON} from './to-json.js' | ||
| import {toTokens} from './to-tokens.js' | ||
| import {toFigmaTokens} from './to-figmatokens.js' | ||
|
|
||
| const [,,prefix,useWhere] = process.argv | ||
| const selector = useWhere === 'true' ? ':where(html)' : 'html' | ||
|
|
||
| const mainbundle = { | ||
| 'props.fonts.css': Fonts, | ||
| 'props.sizes.css': Sizes, | ||
| 'props.easing.css': Easings, | ||
| 'props.zindex.css': Zindex, | ||
| 'props.shadows.css': Shadows, | ||
| 'props.aspects.css': Aspects, | ||
| 'props.colors.css': OpenColors.default, | ||
| // 'props.svg.css': SVG, | ||
| 'props.gradients.css': Gradients, | ||
| 'props.animations.css': Animations, | ||
| 'props.borders.css': Borders, | ||
| } | ||
|
|
||
| const individual_colors = { | ||
| 'props.gray.css': OpenColors.Gray, | ||
| 'props.red.css': OpenColors.Red, | ||
| 'props.pink.css': OpenColors.Pink, | ||
| 'props.grape.css': OpenColors.Grape, | ||
| 'props.violet.css': OpenColors.Violet, | ||
| 'props.indigo.css': OpenColors.Indigo, | ||
| 'props.blue.css': OpenColors.Blue, | ||
| 'props.cyan.css': OpenColors.Cyan, | ||
| 'props.teal.css': OpenColors.Teal, | ||
| 'props.green.css': OpenColors.Green, | ||
| 'props.lime.css': OpenColors.Lime, | ||
| 'props.yellow.css': OpenColors.Yellow, | ||
| 'props.orange.css': OpenColors.Orange, | ||
| } | ||
|
|
||
| // gen design tokens | ||
| const jsonbundle = toJSON({ | ||
| ...Object.values(individual_colors) | ||
| .reduce((colors, color) => | ||
| Object.assign(colors, color), {}), | ||
| ...Sizes, | ||
| ...Easings, | ||
| ...Zindex, | ||
| ...Aspects, | ||
| ...Gradients, | ||
| ...Borders, | ||
| }) | ||
|
|
||
| const designtokens = toTokens(jsonbundle) | ||
| const JSONtokens = fs.createWriteStream('../open-props.tokens.json') | ||
| JSONtokens.end(JSON.stringify(Object.fromEntries(designtokens), null, 2)) | ||
|
|
||
| // gen figma tokens | ||
| const figmatokens = toFigmaTokens(jsonbundle) | ||
| const FigmaTokens = fs.createWriteStream('../open-props.figma-tokens.json') | ||
| FigmaTokens.end(JSON.stringify(figmatokens, null, 2)) | ||
|
|
||
| const figmatokensSYNC = { 'open-props': { ...figmatokens } } | ||
| const FigmaTokensSync = fs.createWriteStream('../open-props.figma-tokens.sync.json') | ||
| FigmaTokensSync.end(JSON.stringify(figmatokensSYNC, null, 2)) | ||
|
|
||
| // gen prop variants | ||
| Object.entries({...mainbundle, ...individual_colors}).forEach(([filename, props]) => { | ||
| buildPropsStylesheet({filename, props}, {selector, prefix}) | ||
| }) | ||
|
|
||
| // gen index.css | ||
| const entry = fs.createWriteStream('../src/index.css') | ||
| entry.write(`@import 'props.media.css'; | ||
| `) | ||
| Object.keys(mainbundle).forEach(filename => { | ||
| entry.write(`@import '${filename}';\n`) | ||
| }) | ||
| entry.end() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| export const toFigmaTokens = props => { | ||
| const figmatokens = {} | ||
|
|
||
| props.map(([key, token]) => { | ||
| let meta = {} | ||
|
|
||
| let isLength = key.includes('size') && !key.includes('border-size') | ||
| let isBorder = key.includes('border-size') | ||
| let isRadius = key.includes('radius') | ||
| let isShadow = key.includes('shadow') | ||
| let colors = ['gray','red','pink','grape','violet','indigo','blue','cyan','teal','green','lime','yellow','orange'] | ||
| let isColor = colors.some(color => key.includes(color)) | ||
|
|
||
| if (isLength) meta.type = 'sizing' | ||
| else if (isBorder) meta.type = 'borderWidth' | ||
| else if (isRadius) meta.type = 'borderRadius' | ||
| else if (isShadow) meta.type = 'boxShadow' | ||
| else if (isColor) meta.type = 'color' | ||
| else meta.type = 'other' | ||
|
|
||
| if (!(meta.type in figmatokens)) figmatokens[meta.type] = {} | ||
|
|
||
| if (isColor) { | ||
| let color = /--(.+?)-/.exec(key)[1] | ||
| if (!(color in figmatokens[meta.type])) figmatokens[meta.type][color] = {} | ||
| figmatokens[meta.type][color][key] = { | ||
| value: token, | ||
| ...meta, | ||
| } | ||
| } else { | ||
| figmatokens[meta.type][key] = { | ||
| value: token, | ||
| ...meta, | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| return figmatokens | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export const toJSON = props => | ||
| Object.entries(props) | ||
| .reduce((bundle_entries, [key, val]) => { | ||
| bundle_entries.unshift([key,val]) | ||
| return bundle_entries | ||
| }, []) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import fs from 'fs' | ||
|
|
||
| export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => { | ||
| const file = fs.createWriteStream("../src/" + filename) | ||
|
|
||
| let appendedMeta = '' | ||
|
|
||
| if (filename.includes('shadows')) | ||
| file.write(`@import 'props.media.css';\n\n`) | ||
|
|
||
| file.write(`${selector} {\n`) | ||
|
|
||
| Object.entries(props).forEach(([prop, val]) => { | ||
| if (prop.includes('-@')) | ||
| return | ||
|
|
||
| if (prefix) | ||
| prop = `--${prefix}-` + prop.slice(2) | ||
|
|
||
| if (prop.includes('animation')) { | ||
| let keyframes = props[`${prop}-@`] | ||
| appendedMeta += keyframes | ||
| } | ||
|
|
||
| file.write(` ${prop}: ${val};\n`) | ||
| }) | ||
|
|
||
| if (filename.includes('shadows')) { | ||
| appendedMeta += ` | ||
| @media (--OSdark) { | ||
| :where(html) { | ||
| --shadow-strength: 25%; | ||
| --shadow-color: 220 40% 2%; | ||
| } | ||
| }` | ||
| } | ||
|
|
||
| file.write('}\n') | ||
| file.end(appendedMeta) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| export const toTokens = props => | ||
| props.map(([key, token]) => { | ||
| let meta = {} | ||
|
|
||
| let isLength = key.includes('size') | ||
| let isEasing = key.includes('ease') | ||
| let colors = ['gray','red','pink','grape','violet','indigo','blue','cyan','teal','green','lime','yellow','orange'] | ||
| let isColor = colors.some(color => key.includes(color)) | ||
|
|
||
| if (isLength) meta.type = 'dimension' | ||
| else if (isEasing) meta.type = 'cubic-bezier' | ||
| else if (isColor) meta.type = 'color' | ||
|
|
||
| return [key, { | ||
| value: token, | ||
| ...meta, | ||
| }] | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.