Merge a3f1c3e into 3731521

marcomontalbano · Sep 3, 2020 · d2cc8da · d2cc8da
2 parents 3731521 + a3f1c3e
commit d2cc8da
Show file tree

Hide file tree

Showing 23 changed files with 3,835 additions and 752 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -25,7 +25,7 @@ module.exports = {
         indent: ['error', 4, {
             SwitchCase: 1,
         }],
-        'max-len': ['error', 160],
+        'max-len': ['error', 140],
         'no-unused-expressions': 'off',
         'chai-friendly/no-unused-expressions': 'error',
         'arrow-body-style': 'off',

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,4 +3,5 @@
     "eslint.lintTask.enable": true,
     "eslint.validate": ["typescript", "typescriptreact"],
     "eslint.lintTask.options": ". --ignore-pattern=node_modules --ignore-pattern=/output --ignore-pattern=dist --ext .js,.ts",
+    "editor.rulers": [140],
 }
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-    '!(*.d).{js,ts}': () => ['yarn lint --fix', 'yarn coverage', 'git add .'],
+    '!(*.d).{js,ts}': () => ['yarn lint --fix', 'yarn coverage'],
 };
diff --git a/packages/core/src/lib/_mocks_/README.md b/packages/core/src/lib/_mocks_/README.md
@@ -13,5 +13,5 @@ curl -H "X-FIGMA-TOKEN: $FIGMA_TOKEN" "https://api.figma.com/v1/files/RSzpKJcnb6
 https://www.figma.com/developers/api#get-file-nodes-endpoint
 
 ```sh
-curl -H "X-FIGMA-TOKEN: $FIGMA_TOKEN" "https://api.figma.com/v1/files/RSzpKJcnb6uBRQ3rOfLIyUs5/nodes?ids=121:10,121:12,121:16,121:17,121:18,122:14,122:16,122:18,124:8,124:18,296:7,330:1,336:5,339:0,339:1,339:2,339:3,339:5,339:7,341:2,376:2,376:9,376:13,376:15,400:33,254:1,254:2,254:3" > ./packages/core/src/lib/_mocks_/figma.fileNodes.json
+curl -H "X-FIGMA-TOKEN: $FIGMA_TOKEN" "https://api.figma.com/v1/files/RSzpKJcnb6uBRQ3rOfLIyUs5/nodes?ids=121:10,121:12,121:16,121:17,121:18,122:14,122:16,122:18,124:8,124:18,296:7,330:1,336:5,339:0,339:1,339:2,339:3,339:5,339:7,341:2,376:2,376:9,376:13,376:15,400:33,408:8,433:8,254:1,254:2,254:3" > ./packages/core/src/lib/_mocks_/figma.fileNodes.json
 ```
diff --git a/packages/core/src/lib/_mocks_/figma.fileNodes.json b/packages/core/src/lib/_mocks_/figma.fileNodes.json
diff --git a/packages/core/src/lib/_mocks_/figma.files.json b/packages/core/src/lib/_mocks_/figma.files.json
diff --git a/packages/core/src/lib/figmaStyles/effectStyle.ts b/packages/core/src/lib/figmaStyles/effectStyle.ts
@@ -22,6 +22,8 @@ const createEffectStyle = (effect: Figma.Effect): FigmaExport.EffectStyle | unde
                     offset: effect.offset,
                     blurRadius: effect.radius,
                     spreadRadius,
+
+                    // eslint-disable-next-line max-len
                     value: `${inset ? 'inset ' : ''}${effect.offset.x}px ${effect.offset.y}px ${effect.radius}px ${spreadRadius}px ${color.rgba}`,
                 };
             }
@@ -46,7 +48,10 @@ const parse = (node: FigmaExport.StyleNode): FigmaExport.StyleTypeEffect | undef
     if (node.styleType === 'EFFECT' && node.type === 'RECTANGLE') {
         return {
             styleType: 'EFFECT',
-            effects: node.effects.map(createEffectStyle).filter(notEmpty),
+            effects: Array.from(node.effects)
+                .reverse()
+                .map(createEffectStyle)
+                .filter(notEmpty),
         };
     }
 

diff --git a/packages/core/src/lib/figmaStyles/index.test.ts b/packages/core/src/lib/figmaStyles/index.test.ts
@@ -84,8 +84,8 @@ describe('figmaStyles.', () => {
             expect(client.file).to.have.been.calledOnceWith('ABC123');
             expect(client.fileNodes).to.have.been.calledWith('ABC123', { ids: nodeIds });
 
-            expect(styleNodes.length).to.equal(28);
-            expect(styleNodes.filter((node) => node.visible !== false).length).to.equal(28 - 3);
+            expect(styleNodes.length).to.equal(30);
+            expect(styleNodes.filter((node) => node.visible !== false).length).to.equal(30 - 3);
             expect(styleNodes.filter((node) => node?.id === '121:10')[0]?.name).to.equal('color-1');
             expect(styleNodes.filter((node) => node?.id === '121:10')[0]?.styleType).to.equal('FILL');
             expect(styleNodes.filter((node) => node?.id === '121:10')[0]?.type).to.equal('RECTANGLE');
@@ -189,6 +189,56 @@ describe('figmaStyles.', () => {
                     },
                 ]);
             });
+
+            it('should parse a combination of colors and keep the right order', () => {
+                const node = getNode(styleNodes, 'color-multi-gradient');
+
+                const parsed = figmaStyles.parseStyles([node]);
+
+                expect(parsed).to.deep.equal([
+                    {
+                        styleType: 'FILL',
+                        visible: true,
+                        name: 'color-multi-gradient',
+                        comment: 'This color is composed by two linear gradient and one solid color',
+                        originalNode: node,
+                        fills: [
+                            {
+                                type: 'GRADIENT_LINEAR',
+                                visible: true,
+                                angle: '180deg',
+                                gradientStops: [
+                                    { color: { r: 255, g: 255, b: 255, a: 1, rgba: 'rgba(255, 255, 255, 1)' }, position: 0 },
+                                    { color: { r: 255, g: 255, b: 255, a: 0, rgba: 'rgba(255, 255, 255, 0)' }, position: 100 },
+                                ],
+                                value: 'linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)',
+                            },
+                            {
+                                type: 'GRADIENT_LINEAR',
+                                visible: true,
+                                angle: '90deg',
+                                gradientStops: [
+                                    { color: { r: 184, g: 89, b: 255, a: 1, rgba: 'rgba(184, 89, 255, 1)' }, position: 0 },
+                                    { color: { r: 255, g: 255, b: 255, a: 0, rgba: 'rgba(255, 255, 255, 0)' }, position: 100 },
+                                ],
+                                value: 'linear-gradient(90deg, rgba(184, 89, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)',
+                            },
+                            {
+                                type: 'SOLID',
+                                visible: true,
+                                color: {
+                                    a: 1,
+                                    b: 131,
+                                    g: 207,
+                                    r: 10,
+                                    rgba: 'rgba(10, 207, 131, 1)',
+                                },
+                                value: 'rgba(10, 207, 131, 1)',
+                            },
+                        ],
+                    },
+                ]);
+            });
         });
 
         describe('Effect Styles', () => {
@@ -325,6 +375,68 @@ describe('figmaStyles.', () => {
                     },
                 ]);
             });
+
+            it('should parse a combination of effects and keep the right order', () => {
+                const node = getNode(styleNodes, 'mixed-effects');
+
+                const parsed = figmaStyles.parseStyles([node]);
+
+                expect(parsed).to.deep.equal([
+                    {
+                        styleType: 'EFFECT',
+                        visible: true,
+                        name: 'mixed-effects',
+                        comment: 'This mixed effect will not consider the Layer Blur.\nBlur and Shadow are not compatible.',
+                        originalNode: node,
+                        effects: [
+                            {
+                                type: 'INNER_SHADOW',
+                                visible: true,
+                                offset: {
+                                    x: 0,
+                                    y: 4,
+                                },
+                                inset: true,
+                                blurRadius: 4,
+                                spreadRadius: 0,
+                                color: {
+                                    r: 0,
+                                    g: 0,
+                                    b: 0,
+                                    a: 0.25,
+                                    rgba: 'rgba(0, 0, 0, 0.25)',
+                                },
+                                value: 'inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
+                            },
+                            {
+                                type: 'DROP_SHADOW',
+                                visible: true,
+                                offset: {
+                                    x: 0,
+                                    y: 4,
+                                },
+                                inset: false,
+                                blurRadius: 4,
+                                spreadRadius: 0,
+                                color: {
+                                    r: 0,
+                                    g: 0,
+                                    b: 0,
+                                    a: 0.25,
+                                    rgba: 'rgba(0, 0, 0, 0.25)',
+                                },
+                                value: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
+                            },
+                            {
+                                type: 'LAYER_BLUR',
+                                visible: true,
+                                blurRadius: 4,
+                                value: 'blur(4px)',
+                            },
+                        ],
+                    },
+                ]);
+            });
         });
 
         describe('Text Styles', () => {

diff --git a/packages/core/src/lib/figmaStyles/paintStyle.ts b/packages/core/src/lib/figmaStyles/paintStyle.ts
@@ -102,7 +102,10 @@ const parse = (node: FigmaExport.StyleNode): FigmaExport.StyleTypeFill | undefin
     if (node.styleType === 'FILL' && node.type === 'RECTANGLE') {
         return {
             styleType: 'FILL',
-            fills: node.fills.map(createFillStyles).filter(notEmpty),
+            fills: Array.from(node.fills)
+                .reverse()
+                .map(createFillStyles)
+                .filter(notEmpty),
         };
     }
 

diff --git a/packages/core/src/lib/utils.test.ts b/packages/core/src/lib/utils.test.ts
@@ -53,7 +53,9 @@ describe('utils.', () => {
                 .reply(200, '<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>');
 
             const svg = await utils.fetchAsSvgXml('https://example.com/image.svg');
-            expect(svg).to.deep.equal('<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>');
+            expect(svg).to.deep.equal(
+                '<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>',
+            );
         });
     });
 });
diff --git a/packages/output-components-as-es6/src/index.test.ts b/packages/output-components-as-es6/src/index.test.ts
@@ -30,6 +30,8 @@ describe('outputter as es6', () => {
         expect(writeFileSync).to.be.calledOnce;
         expect(writeFileSync).to.be.calledWithMatch(
             'output/page1.js',
+
+            // eslint-disable-next-line max-len
             'export const figmaLogo = `<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>`;',
         );
     });
@@ -47,6 +49,8 @@ describe('outputter as es6', () => {
         expect(writeFileSync).to.be.calledOnce;
         expect(writeFileSync).to.be.calledWithMatch(
             'output/page1.js',
+
+            // eslint-disable-next-line max-len
             'export const iFigmaLogoMyIco = `<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>`;',
         );
     });

diff --git a/packages/output-components-as-svgr/src/index.test.ts b/packages/output-components-as-svgr/src/index.test.ts
@@ -32,7 +32,10 @@ describe('outputter as svgr', () => {
         expect(writeFileSync).to.be.calledThrice;
         expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/FigmaLogo.jsx');
         expect(writeFileSync.secondCall).to.be.calledWithMatch('output/fakePage/Search.jsx');
-        expect(writeFileSync.thirdCall).to.be.calledWithMatch('output/fakePage/index.js', "export { default as FigmaLogo } from './FigmaLogo.jsx';");
+        expect(writeFileSync.thirdCall).to.be.calledWithMatch(
+            'output/fakePage/index.js',
+            'export { default as FigmaLogo } from \'./FigmaLogo.jsx\';',
+        );
     });
 
     it('should create folder if component names contain slashes', async () => {

diff --git a/packages/output-components-as-svgr/src/svgr.ts b/packages/output-components-as-svgr/src/svgr.ts
@@ -26,7 +26,8 @@ export type State = {
 //     icon?: boolean
 
 //     /**
-//      * Modify all SVG nodes with uppercase and use a specific template with react-native-svg imports. All unsupported nodes will be removed.
+//      * Modify all SVG nodes with uppercase and use a specific template with react-native-svg imports.
+//      * All unsupported nodes will be removed.
 //      * Override using the API with native: { expo: true } to template SVG nodes with the ExpoKit SVG package.
 //      * This is only necessary for 'ejected' ExpoKit projects where import 'react-native-svg' results in an error.
 //      */

diff --git a/packages/output-styles-as-sass/.npmignore b/packages/output-styles-as-sass/.npmignore
@@ -0,0 +1,3 @@
+src
+tsconfig.json
+tsconfig.tsbuildinfo
diff --git a/packages/output-styles-as-sass/README.md b/packages/output-styles-as-sass/README.md
@@ -0,0 +1,62 @@
+# @figma-export/output-styles-as-sass
+
+> Styles Outputter for [@figma-export](https://github.com/marcomontalbano/figma-export) that exports styles to SASS and SCSS.
+
+With this outputter you can export all the styles as variables inside a `.sass` or `.scss` file.
+
+This is a sample of the output:
+
+```sh
+$ tree output/
+# output/
+# └── _variables.scss
+```
+
+
+## .figmaexportrc.js
+
+You can easily add this outputter to your `.figmaexportrc.js`:
+
+```js
+module.exports = {
+    commands: [
+        ['styles', {
+            fileId: 'RSzpKJcnb6uBRQ3rOfLIyUs5',
+            onlyFromPages: ['figma-styles'],
+            outputters: [
+                require('@figma-export/output-styles-as-sass')({
+                    output: './output'
+                })
+            ]
+        }],
+    ]
+}
+```
+
+`output` is **mandatory**.
+
+`getExtension` and `getFilename` are **optional**.
+
+```js
+require('@figma-export/output-styles-as-sass')({
+    output: './output',
+    getExtension: () => 'SCSS',
+    getFilename: () => '_variables',
+})
+```
+
+> *defaults may change, please refer to `./src/index.ts`*
+
+## Install
+
+Using npm:
+
+```sh
+npm install --save-dev @figma-export/output-styles-as-sass
+```
+
+or using yarn:
+
+```sh
+yarn add @figma-export/output-styles-as-sass --dev
+```
diff --git a/packages/output-styles-as-sass/package.json b/packages/output-styles-as-sass/package.json
@@ -0,0 +1,24 @@
+{
+    "name": "@figma-export/output-styles-as-sass",
+    "version": "3.0.0-alpha.1",
+    "description": "Outputter for @figma-export that exports styles to SASS and SCSS",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/marcomontalbano/figma-exporter.git",
+        "directory": "packages/output-styles-as-sass"
+    },
+    "author": "Marco Montalbano <me@marcomontalbano.com>",
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@figma-export/types": "^3.0.0-alpha.1",
+        "make-dir": "~3.1.0"
+    },
+    "engines": {
+        "node": ">= 10.13 <= 14.x"
+    }
+}