This repository was archived by the owner on Aug 29, 2025. It is now read-only.
Styling props #165
There are no files selected for viewing
This file contains hidden or 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 hidden or 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,359 @@ | ||
| const props = [ | ||
| 'alignContent', | ||
| 'alignItems', | ||
| 'alignmentAdjust', | ||
| 'alignmentBaseline', | ||
| 'alignSelf', | ||
| 'animationDelay', | ||
| 'animationDirection', | ||
| 'animationIterationCount', | ||
| 'animationName', | ||
| 'animationPlayState', | ||
| 'appearance', | ||
| 'backfaceVisibility', | ||
| 'background', | ||
| 'backgroundAttachment', | ||
| 'backgroundBlendMode', | ||
| 'backgroundColor', | ||
| 'backgroundComposite', | ||
| 'backgroundImage', | ||
| 'backgroundOrigin', | ||
| 'backgroundPosition', | ||
| 'backgroundRepeat', | ||
| 'baselineShift', | ||
| 'behavior', | ||
| 'border', | ||
| 'borderBottom', | ||
| 'borderBottomColor', | ||
| 'borderBottomLeftRadius', | ||
| 'borderBottomRightRadius', | ||
| 'borderBottomStyle', | ||
| 'borderBottomWidth', | ||
| 'borderCollapse', | ||
| 'borderColor', | ||
| 'borderCornerShape', | ||
| 'borderImageSource', | ||
| 'borderImageWidth', | ||
| 'borderLeft', | ||
| 'borderLeftColor', | ||
| 'borderLeftStyle', | ||
| 'borderLeftWidth', | ||
| 'borderRight', | ||
| 'borderRightColor', | ||
| 'borderRightStyle', | ||
| 'borderRightWidth', | ||
| 'borderSpacing', | ||
| 'borderStyle', | ||
| 'borderTop', | ||
| 'borderTopColor', | ||
| 'borderTopLeftRadius', | ||
| 'borderTopRightRadius', | ||
| 'borderTopStyle', | ||
| 'borderTopWidth', | ||
| 'borderWidth', | ||
| 'bottom', | ||
| 'boxAlign', | ||
| 'boxDecorationBreak', | ||
| 'boxDirection', | ||
| 'boxFlex', | ||
| 'boxFlexGroup', | ||
| 'boxLineProgression', | ||
| 'boxLines', | ||
| 'boxOrdinalGroup', | ||
| 'boxShadow', | ||
| 'breakAfter', | ||
| 'breakBefore', | ||
| 'breakInside', | ||
| 'clear', | ||
| 'clip', | ||
| 'clipRule', | ||
| 'color', | ||
| 'columnCount', | ||
| 'columnFill', | ||
| 'columnGap', | ||
| 'columnRule', | ||
| 'columnRuleColor', | ||
| 'columnRuleWidth', | ||
| 'columns', | ||
| 'columnSpan', | ||
| 'columnWidth', | ||
| 'counterIncrement', | ||
| 'counterReset', | ||
| 'cue', | ||
| 'cueAfter', | ||
| 'cursor', | ||
| 'direction', | ||
| 'display', | ||
| 'fill', | ||
| 'fillOpacity', | ||
| 'fillRule', | ||
| 'filter', | ||
| 'flex', | ||
| 'flexAlign', | ||
| 'flexBasis', | ||
| 'flexDirection', | ||
| 'flexFlow', | ||
| 'flexGrow', | ||
| 'flexItemAlign', | ||
| 'flexLinePack', | ||
| 'flexOrder', | ||
| 'flexShrink', | ||
| 'flexWrap', | ||
| 'float', | ||
| 'flowFrom', | ||
| 'font', | ||
| 'fontFamily', | ||
| 'fontKerning', | ||
| 'fontSize', | ||
| 'fontSizeAdjust', | ||
| 'fontStretch', | ||
| 'fontStyle', | ||
| 'fontSynthesis', | ||
| 'fontVariant', | ||
| 'fontVariantAlternates', | ||
| 'fontWeight', | ||
| 'gridArea', | ||
| 'gridColumn', | ||
| 'gridColumnEnd', | ||
| 'gridColumnStart', | ||
| 'gridRow', | ||
| 'gridRowEnd', | ||
| 'gridRowPosition', | ||
| 'gridRowSpan', | ||
| 'gridTemplateAreas', | ||
| 'gridTemplateColumns', | ||
| 'gridTemplateRows', | ||
| 'height', | ||
| 'hyphenateLimitChars', | ||
| 'hyphenateLimitLines', | ||
| 'hyphenateLimitZone', | ||
| 'hyphens', | ||
| 'imeMode', | ||
| 'justifyContent', | ||
| 'layoutGrid', | ||
| 'layoutGridChar', | ||
| 'layoutGridLine', | ||
| 'layoutGridMode', | ||
| 'layoutGridType', | ||
| 'left', | ||
| 'letterSpacing', | ||
| 'lineBreak', | ||
| 'lineClamp', | ||
| 'lineHeight', | ||
| 'listStyle', | ||
| 'listStyleImage', | ||
| 'listStylePosition', | ||
| 'listStyleType', | ||
| 'margin', | ||
| 'marginBottom', | ||
| 'marginLeft', | ||
| 'marginRight', | ||
| 'marginTop', | ||
| 'marqueeDirection', | ||
| 'marqueeStyle', | ||
| 'mask', | ||
| 'maskBorder', | ||
| 'maskBorderRepeat', | ||
| 'maskBorderSlice', | ||
| 'maskBorderSource', | ||
| 'maskBorderWidth', | ||
| 'maskClip', | ||
| 'maskOrigin', | ||
| 'maxFontSize', | ||
| 'maxHeight', | ||
| 'maxWidth', | ||
| 'minHeight', | ||
| 'minWidth', | ||
| 'opacity', | ||
| 'order', | ||
| 'orphans', | ||
| 'outline', | ||
| 'outlineColor', | ||
| 'outlineOffset', | ||
| 'overflow', | ||
| 'overflowStyle', | ||
| 'overflowX', | ||
| 'overflowY', | ||
| 'padding', | ||
| 'paddingBottom', | ||
| 'paddingLeft', | ||
| 'paddingRight', | ||
| 'paddingTop', | ||
| 'pageBreakAfter', | ||
| 'pageBreakBefore', | ||
| 'pageBreakInside', | ||
| 'pause', | ||
| 'pauseAfter', | ||
| 'pauseBefore', | ||
| 'perspective', | ||
| 'perspectiveOrigin', | ||
| 'pointerEvents', | ||
| 'position', | ||
| 'punctuationTrim', | ||
| 'quotes', | ||
| 'regionFragment', | ||
| 'restAfter', | ||
| 'restBefore', | ||
| 'right', | ||
| 'rubyAlign', | ||
| 'rubyPosition', | ||
| 'shapeImageThreshold', | ||
| 'shapeInside', | ||
| 'shapeMargin', | ||
| 'shapeOutside', | ||
| 'speak', | ||
| 'speakAs', | ||
| 'strokeOpacity', | ||
| 'strokeWidth', | ||
| 'tableLayout', | ||
| 'tabSize', | ||
| 'textAlign', | ||
| 'textAlignLast', | ||
| 'textDecoration', | ||
| 'textDecorationColor', | ||
| 'textDecorationLine', | ||
| 'textDecorationLineThrough', | ||
| 'textDecorationNone', | ||
| 'textDecorationOverline', | ||
| 'textDecorationSkip', | ||
| 'textDecorationStyle', | ||
| 'textDecorationUnderline', | ||
| 'textEmphasis', | ||
| 'textEmphasisColor', | ||
| 'textEmphasisStyle', | ||
| 'textHeight', | ||
| 'textIndent', | ||
| 'textJustifyTrim', | ||
| 'textKashidaSpace', | ||
| 'textLineThrough', | ||
| 'textLineThroughColor', | ||
| 'textLineThroughMode', | ||
| 'textLineThroughStyle', | ||
| 'textLineThroughWidth', | ||
| 'textOverflow', | ||
| 'textOverline', | ||
| 'textOverlineColor', | ||
| 'textOverlineMode', | ||
| 'textOverlineStyle', | ||
| 'textOverlineWidth', | ||
| 'textRendering', | ||
| 'textScript', | ||
| 'textShadow', | ||
| 'textTransform', | ||
| 'textUnderlinePosition', | ||
| 'textUnderlineStyle', | ||
| 'top', | ||
| 'touchAction', | ||
| 'transform', | ||
| 'transformOrigin', | ||
| 'transformOriginZ', | ||
| 'transformStyle', | ||
| 'transition', | ||
| 'transitionDelay', | ||
| 'transitionDuration', | ||
| 'transitionProperty', | ||
| 'transitionTimingFunction', | ||
| 'unicodeBidi', | ||
| 'unicodeRange', | ||
| 'userFocus', | ||
| 'userInput', | ||
| 'verticalAlign', | ||
| 'visibility', | ||
| 'voiceBalance', | ||
| 'voiceDuration', | ||
| 'voiceFamily', | ||
| 'voicePitch', | ||
| 'voiceRange', | ||
| 'voiceRate', | ||
| 'voiceStress', | ||
| 'voiceVolume', | ||
| 'whiteSpace', | ||
| 'whiteSpaceTreatment', | ||
| 'widows', | ||
| 'width', | ||
| 'wordBreak', | ||
| 'wordSpacing', | ||
| 'wordWrap', | ||
| 'wrapFlow', | ||
| 'wrapMargin', | ||
| 'wrapOption', | ||
| 'writingMode', | ||
| 'zIndex', | ||
| 'zoom' | ||
| ]; | ||
|
Contributor
Author
There was a problem hiding this comment. This list is not quite comprehensive but it's definitely more than the previous one..
Contributor
Author
There was a problem hiding this comment. This file generates the various usages of the props -- just too easy to make a mistake modifying them manually |
||
|
|
||
| function toSnakeCase(name) { | ||
| return name.replace(/[A-Z]/g, v => `_${v.toLowerCase()}`); | ||
| } | ||
|
|
||
| function toKebabCase(name) { | ||
| return name.replace(/[A-Z]/g, v => `-${v.toLowerCase()}`); | ||
| } | ||
|
|
||
| const snakes = props.map(prop => [toSnakeCase(prop), prop]); | ||
| const kebabs = props.map(prop => [toKebabCase(prop), prop]); | ||
| const camels = props.map(prop => [prop, prop]); | ||
|
|
||
| const map = new Map(); | ||
|
|
||
| snakes.forEach(([snake, camel]) => map.set(snake, camel)); | ||
| kebabs.forEach(([kebab, camel]) => map.set(kebab, camel)); | ||
| camels.forEach(([camel]) => map.set(camel, camel)); | ||
|
Contributor
Author
There was a problem hiding this comment. Map the camel cased props above to kebab and snake |
||
|
|
||
| map.forEach((value, key) => console.log(value, key)); | ||
| console.log(map.size); | ||
|
|
||
| const fs = require('fs'); | ||
|
|
||
| var stream1 = fs.createWriteStream("src/dash-table/derived/style/py2jsCssProperties.ts"); | ||
| stream1.once('open', () => { | ||
| stream1.write('export type StyleProperty = string | number;\n'); | ||
| stream1.write('\n'); | ||
| stream1.write('export default new Map<string, string>([\n'); | ||
|
|
||
| let first = true; | ||
| map.forEach((value, key) => { | ||
| if (!first) { | ||
| stream1.write(',\n'); | ||
| } | ||
|
|
||
| first = false; | ||
| stream1.write(` ['${key}', '${value}']`); | ||
| }); | ||
| stream1.write('\n]);') | ||
|
|
||
| stream1.end(); | ||
| }); | ||
|
Contributor
Author
There was a problem hiding this comment. The camel/kebab/snake to camel mapping for react style |
||
|
|
||
| var stream2 = fs.createWriteStream("src/dash-table/derived/style/IStyle.ts"); | ||
| stream2.once('open', () => { | ||
| stream2.write(`import { StyleProperty } from './ py2jsCssProperties';\n`); | ||
| stream2.write('\n'); | ||
| stream2.write('export default interface IStyle {\n'); | ||
| camels.forEach(([key]) => { | ||
| stream2.write(` ${key}: StyleProperty;\n`); | ||
| }); | ||
| stream2.write('}') | ||
|
|
||
| stream2.end(); | ||
| }); | ||
|
Contributor
Author
There was a problem hiding this comment. The style interface for TS |
||
|
|
||
| var stream3 = fs.createWriteStream("proptypes.js"); | ||
| stream3.once('open', () => { | ||
| let first = true; | ||
| map.forEach((value, key) => { | ||
| if (!first) { | ||
| stream3.write(',\n'); | ||
| } | ||
|
|
||
| first = false; | ||
| if (key.indexOf('-') !== -1) { | ||
| stream3.write(` '${key}': PropTypes.oneOfType([PropTypes.string, PropTypes.number])`); | ||
| } else { | ||
| stream3.write(` ${key}: PropTypes.oneOfType([PropTypes.string, PropTypes.number])`); | ||
| } | ||
| }); | ||
| stream3.write('\n') | ||
|
|
||
| stream3.end(); | ||
| }); | ||
|
Contributor
Author
There was a problem hiding this comment. proptypes fragment for table.js / props definition |
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Previous version of the preprocessor was having issues with very large files. This one does not..