salesforce-ux / gulp-theo Goto Github PK
View Code? Open in Web Editor NEWGulp-theo is a plugin that transforms and formats Design Tokens
Home Page: https://www.npmjs.com/package/gulp-theo
License: BSD 3-Clause "New" or "Revised" License
Gulp-theo is a plugin that transforms and formats Design Tokens
Home Page: https://www.npmjs.com/package/gulp-theo
License: BSD 3-Clause "New" or "Revised" License
After installing the most recent version of gulp-theo
we receive the following error when running the defined task:
(node:57669) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 8): TypeError in plugin 'gulp-theo'
Message:
Immutable.List(...).traverse is not a function
Hey there! We are using Theo + Gulp Theo - and we are looking to upgrade our Node version, looks like the Gulp we use is only supported up to node version 12. Are there any plans to rewrite Gulp theo so it is compatible with the new format?
Hey, gulp noob user here!
In the advanced usage documentation it mentions that the configuration outputs to multiple formats but I don't quite see which part does that.
If I wanted to use the same single yml file to output multiple different formats how would I do that? Ie. tokens.yml -> variables.css & variables.js
At present, npm install --save-dev gulp-theo theo
produces the following warning:
npm WARN [email protected] requires a peer of theo@^7.0.1 but none is installed. You must install peer dependencies yourself.
As per documentation, I should be able to pass additional options to Theo
// When passing "format" options to theo.convert(), this format can be
// passed some additional options
let formatOptions = {
type: 'html',
options: {
transformPropName: name => name.toUpperCase()
}
};
If I try to do that using gulp-plugin it wont work:
gulpTheo.plugin({
transform: { type: 'web' },
format: { type: 'html' },
options: {
transformPropName: name => `<p>${name}</p>`
}
})
also I tried this way:
gulpTheo.plugin({
transform: {
type: 'web',
options: {
transformPropName: name => `<p>${name}</p>`
}
},
format: { type: 'html' },
})
Unless I'm missing something, if I have the following in my aliases.yml
:
---
aliases:
# colors
dark-blue: #003e52
orange: #c18510
The output doesn't read hex values and I get:
$dark-blue: rgb(0, 0, 0);
$orange rgb(0, 0, 0);
...for all colors.
I'm also noticing the ability to just pass through token values that don't necessarily map to one of your existing formats. Might be worth allowing a general type/category
for this.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.