-
-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: use tailwindcss with sass & styled-components
- Loading branch information
1 parent
30541c5
commit e35a081
Showing
19 changed files
with
753 additions
and
83 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
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 |
---|---|---|
@@ -1,6 +1,6 @@ | ||
MIT License | ||
|
||
Copyright (c) Abhijith Vijayan <[email protected]> (abhijithvijayan.in) | ||
Copyright (c) Abhijith Vijayan <[email protected]> (abhijithvijayan.in) | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
|
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,7 @@ | ||
module.exports = { | ||
twin: { | ||
preset: 'styled-components', | ||
config: './tailwind.config.js', | ||
autoCssProp: true, // This adds the css prop when it's needed | ||
}, | ||
}; |
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 |
---|---|---|
|
@@ -7,7 +7,7 @@ | |
"yarn": ">= 1.0.0" | ||
}, | ||
"repository": "https://github.com/abhijithvijayan/kutt-extension.git", | ||
"author": "abhijithvijayan <[email protected]>", | ||
"author": "abhijithvijayan <[email protected]>", | ||
"scripts": { | ||
"dev:chrome": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome webpack --watch", | ||
"dev:firefox": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=firefox webpack --watch", | ||
|
@@ -20,9 +20,7 @@ | |
"lint:fix": "eslint . --ext .ts,.tsx --fix" | ||
}, | ||
"husky": { | ||
"hooks": { | ||
"pre-commit": "lint-staged" | ||
} | ||
"hooks": {} | ||
}, | ||
"lint-staged": { | ||
"*.{ts,tsx}": [ | ||
|
@@ -46,11 +44,12 @@ | |
"formik": "^2.1.4", | ||
"lodash.isequal": "^4.5.0", | ||
"qrcode.react": "^1.0.0", | ||
"react": "^16.13.0", | ||
"react": "^16.13.1", | ||
"react-copy-to-clipboard": "^5.0.2", | ||
"react-dom": "^16.13.0", | ||
"react-dom": "^16.13.1", | ||
"styled-components": "^5.1.1", | ||
"twin.macro": "^1.4.1", | ||
"unicorn.log": "^1.7.0", | ||
"webext-base-css": "^1.0.0", | ||
"webextension-polyfill-ts": "^0.13.0" | ||
}, | ||
"devDependencies": { | ||
|
@@ -60,6 +59,7 @@ | |
"@babel/plugin-proposal-class-properties": "^7.8.3", | ||
"@babel/plugin-proposal-object-rest-spread": "^7.8.3", | ||
"@babel/plugin-transform-destructuring": "^7.8.8", | ||
"@babel/plugin-transform-react-jsx": "^7.10.4", | ||
"@babel/plugin-transform-runtime": "^7.8.3", | ||
"@babel/preset-env": "^7.8.7", | ||
"@babel/preset-react": "^7.8.3", | ||
|
@@ -69,6 +69,7 @@ | |
"@types/react": "^16.9.23", | ||
"@types/react-copy-to-clipboard": "^4.3.0", | ||
"@types/react-dom": "^16.9.5", | ||
"@types/styled-components": "^5.1.0", | ||
"@types/webpack": "^4.41.7", | ||
"@typescript-eslint/eslint-plugin": "^2.28.0", | ||
"@typescript-eslint/parser": "^2.28.0", | ||
|
@@ -97,6 +98,9 @@ | |
"postcss-loader": "^3.0.0", | ||
"prettier": "^2.0.4", | ||
"resolve-url-loader": "^3.1.1", | ||
"sass-extract": "^2.1.0", | ||
"sass-extract-js": "^0.4.0", | ||
"sass-extract-loader": "^1.1.0", | ||
"sass-loader": "^8.0.2", | ||
"terser-webpack-plugin": "^2.3.5", | ||
"typescript": "^3.8.3", | ||
|
@@ -107,4 +111,4 @@ | |
"wext-manifest-webpack-plugin": "^1.1.1", | ||
"zip-webpack-plugin": "^3.0.0" | ||
} | ||
} | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,19 @@ | ||
import React from 'react'; | ||
import {ThemeProvider} from 'styled-components'; | ||
import ReactDOM from 'react-dom'; | ||
import React from 'react'; | ||
|
||
import './styles.scss'; | ||
// Common styles | ||
import '../styles/main.scss'; | ||
|
||
import Options from './Options'; | ||
|
||
ReactDOM.render(<Options />, document.getElementById('options-root')); | ||
// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved, @typescript-eslint/no-var-requires | ||
const theme = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!../styles/base/_variables.scss'); | ||
// Require sass variables using sass-extract-loader and specify the plugin | ||
|
||
ReactDOM.render( | ||
<ThemeProvider theme={theme}> | ||
<Options /> | ||
</ThemeProvider>, | ||
document.getElementById('options-root') | ||
); |
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
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 |
---|---|---|
@@ -1,6 +1,21 @@ | ||
import {ThemeProvider} from 'styled-components'; | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
|
||
// Common styles | ||
import '../styles/main.scss'; | ||
|
||
import './styles.scss'; | ||
|
||
import Popup from './Popup'; | ||
|
||
ReactDOM.render(<Popup />, document.getElementById('popup-root')); | ||
// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved, @typescript-eslint/no-var-requires | ||
const theme = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!../styles/base/_variables.scss'); | ||
// Require sass variables using sass-extract-loader and specify the plugin | ||
|
||
ReactDOM.render( | ||
<ThemeProvider theme={theme}> | ||
<Popup /> | ||
</ThemeProvider>, | ||
document.getElementById('popup-root') | ||
); |
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 was deleted.
Oops, something went wrong.
File renamed without changes.
File renamed without changes.
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,10 @@ | ||
@import '~advanced-css-reset/dist/reset.css'; | ||
|
||
// Add your custom reset rules here | ||
|
||
* { | ||
margin: 0; | ||
padding: 0; | ||
border: 0; | ||
outline: 0; | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
@import '~tailwindcss/dist/base.min.css'; | ||
|
||
@import "base/fonts"; | ||
@import "base/variables"; | ||
@import "base/components"; | ||
@import "base/reset"; |
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,8 @@ | ||
module.exports = { | ||
purge: [], | ||
theme: { | ||
extend: {}, | ||
}, | ||
variants: {}, | ||
plugins: [], | ||
} |
Oops, something went wrong.