Skip to content

Commit

Permalink
feat: add react-emotion css snippet
Browse files Browse the repository at this point in the history
  • Loading branch information
@afiiif
afiiif committed Jul 19, 2022
1 parent ec5cf12 commit 241c80d
Show file tree
Hide file tree
Showing 4 changed files with 194 additions and 0 deletions.
64 changes: 64 additions & 0 deletions snippets/javascript.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -927,6 +927,70 @@
"description": "Zustand useStore with shallow",
"scope": "javascript,javascriptreact"
},
"🟨 reactFnCompEmotion": {
"prefix": "emoRFC.$emoRFC",
"body": [
"import * as styles from './styles'",
"",
"export default function ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}}() {$0",
"\treturn (",
"\t\t<${2:div} css={styles.${3:container}}>${4:$1}</$2>",
"\t)",
"}",
""
],
"description": "React Functional Component with Emotion CSS",
"scope": "javascript,javascriptreact"
},
"🟨 reactFnCompExportEmotion": {
"prefix": "emoRFCe.$emoRFCe",
"body": [
"import * as styles from './styles'",
"",
"function ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}}() {$0",
"\treturn (",
"\t\t<${2:div} css={styles.${3:container}}>${4:$1}</$2>",
"\t)",
"}",
"",
"export default $1",
""
],
"description": "React Functional Component with Emotion CSS",
"scope": "javascript,javascriptreact"
},
"🟨 reactArrowFnCompEmotion": {
"prefix": "emoRAFC.$emoRAFC",
"body": [
"import * as styles from './styles'",
"",
"export const ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}} = () => {$0",
"\treturn (",
"\t\t<${2:div} css={styles.${3:container}}>${4:$1}</$2>",
"\t)",
"}",
""
],
"description": "React Arrow Function Component with Emotion CSS",
"scope": "javascript,javascriptreact"
},
"🟨 reactArrowFnCompExportEmotion": {
"prefix": "emoRAFCe.$emoRAFCe",
"body": [
"import * as styles from './styles'",
"",
"const ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}} = () => {$0",
"\treturn (",
"\t\t<${2:div} css={styles.${3:container}}>${4:$1}</$2>",
"\t)",
"}",
"",
"export default $1",
""
],
"description": "React Arrow Function Component with Emotion CSS",
"scope": "javascript,javascriptreact"
},
"🟨 testDescribe": {
"prefix": "tDescribe.$tDescribe.describe(test)",
"body": [
Expand Down
64 changes: 64 additions & 0 deletions snippets/typescript.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1224,6 +1224,70 @@
"description": "Zustand useStore with shallow",
"scope": "javascript,typescript,javascriptreact,typescriptreact"
},
"🟨 reactFnCompEmotion": {
"prefix": "emoRFC.$emoRFC",
"body": [
"import * as styles from './styles'",
"",
"export default function ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}}() {$0",
"\treturn (",
"\t\t<${2:div} css={styles.${3:container}}>${4:$1}</$2>",
"\t)",
"}",
""
],
"description": "React Functional Component with Emotion CSS",
"scope": "javascript,typescript,javascriptreact,typescriptreact"
},
"🟨 reactFnCompExportEmotion": {
"prefix": "emoRFCe.$emoRFCe",
"body": [
"import * as styles from './styles'",
"",
"function ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}}() {$0",
"\treturn (",
"\t\t<${2:div} css={styles.${3:container}}>${4:$1}</$2>",
"\t)",
"}",
"",
"export default $1",
""
],
"description": "React Functional Component with Emotion CSS",
"scope": "javascript,typescript,javascriptreact,typescriptreact"
},
"🟨 reactArrowFnCompEmotion": {
"prefix": "emoRAFC.$emoRAFC",
"body": [
"import * as styles from './styles'",
"",
"export const ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}} = () => {$0",
"\treturn (",
"\t\t<${2:div} css={styles.${3:container}}>${4:$1}</$2>",
"\t)",
"}",
""
],
"description": "React Arrow Function Component with Emotion CSS",
"scope": "javascript,typescript,javascriptreact,typescriptreact"
},
"🟨 reactArrowFnCompExportEmotion": {
"prefix": "emoRAFCe.$emoRAFCe",
"body": [
"import * as styles from './styles'",
"",
"const ${1:${RELATIVE_FILEPATH/(^.+?(?=[\\/\\\\][^\\/\\\\]+[\\/\\\\][^\\/\\\\]+\\.[jt]sx?))|(\\.[jt]sx?$|[\\/\\\\](?:index|\\[).*|.+[\\/\\\\](?!(?:index|\\[))|[.\\-_\\/\\\\])|(\\w+)/${3:/capitalize}/g}} = () => {$0",
"\treturn (",
"\t\t<${2:div} css={styles.${3:container}}>${4:$1}</$2>",
"\t)",
"}",
"",
"export default $1",
""
],
"description": "React Arrow Function Component with Emotion CSS",
"scope": "javascript,typescript,javascriptreact,typescriptreact"
},
"🟨 testDescribe": {
"prefix": "tDescribe.$tDescribe.describe(test)",
"body": [
Expand Down
4 changes: 4 additions & 0 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const reactQuery = normalizeSnippets(require('./snippets/react-query'));
const swr = normalizeSnippets(require('./snippets/swr'));
const reactHookForm = normalizeSnippets(require('./snippets/react-hook-form'));
const zustand = normalizeSnippets(require('./snippets/zustand'));
const emotion = normalizeSnippets(require('./snippets/emotion'));

const testing = normalizeSnippets(require('./snippets/testing'));
const wrapper = normalizeSnippets(require('./snippets/wrapper'));
Expand All @@ -28,6 +29,7 @@ const miscTS = normalizeSnippets(require('./snippets/misc-ts'), true);
Object.keys(react).forEach((key) => react[key].body.push(''));
Object.keys(reactTS).forEach((key) => reactTS[key].body.push(''));
Object.keys(reactNative).forEach((key) => reactNative[key].body.push(''));
Object.keys(emotion).forEach((key) => emotion[key].body.push(''));

const javascriptSnippets = {
...vanilla,
Expand All @@ -39,6 +41,7 @@ const javascriptSnippets = {
...swr,
...reactHookForm,
...zustand,
...emotion,
...testing,
...wrapper,
...htmlJsx,
Expand All @@ -58,6 +61,7 @@ const typescriptSnippets = {
...swr,
...reactHookForm,
...zustand,
...emotion,
...testing,
...wrapper,
...htmlJsx,
Expand Down
62 changes: 62 additions & 0 deletions src/snippets/emotion.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { FILENAME_PASCALCASE } from '../constants';
import { Snippet } from '../types';

export const reactFnCompEmotion: Snippet = {
prefix: 'emoRFC',
body: [
"import * as styles from './styles'",
'',
`export default function \${1:${FILENAME_PASCALCASE}}() {$0`,
'\treturn (',
'\t\t<${2:div} css={styles.${3:container}}>${4:$1}</$2>',
'\t)',
'}',
],
description: 'React Functional Component with Emotion CSS',
};

export const reactFnCompExportEmotion: Snippet = {
prefix: 'emoRFCe',
body: [
"import * as styles from './styles'",
'',
`function \${1:${FILENAME_PASCALCASE}}() {$0`,
'\treturn (',
'\t\t<${2:div} css={styles.${3:container}}>${4:$1}</$2>',
'\t)',
'}',
'',
'export default $1',
],
description: 'React Functional Component with Emotion CSS',
};

export const reactArrowFnCompEmotion: Snippet = {
prefix: 'emoRAFC',
body: [
"import * as styles from './styles'",
'',
`export const \${1:${FILENAME_PASCALCASE}} = () => {$0`,
'\treturn (',
'\t\t<${2:div} css={styles.${3:container}}>${4:$1}</$2>',
'\t)',
'}',
],
description: 'React Arrow Function Component with Emotion CSS',
};

export const reactArrowFnCompExportEmotion: Snippet = {
prefix: 'emoRAFCe',
body: [
"import * as styles from './styles'",
'',
`const \${1:${FILENAME_PASCALCASE}} = () => {$0`,
'\treturn (',
'\t\t<${2:div} css={styles.${3:container}}>${4:$1}</$2>',
'\t)',
'}',
'',
'export default $1',
],
description: 'React Arrow Function Component with Emotion CSS',
};

0 comments on commit 241c80d

Please sign in to comment.