Skip to content
Permalink
Browse files

style: use linaria instead of styled

  • Loading branch information...
iamchanii committed Jun 14, 2019
1 parent 87aaa6d commit 7713eda6fef29e5b79599670a3befc61c333149c
@@ -23,3 +23,4 @@ yarn-debug.log*
yarn-error.log*

/.idea
/src/.linaria_cache
@@ -1,5 +1,15 @@
const { getLoader, loaderByName, } = require('@craco/craco');
const lessPlugin = require('craco-less');
const transformBabelLoader = require('./transformBabelLoader');

module.exports = {
plugins: [{ plugin: lessPlugin }],
webpack: {
configure: (webpackConfig) => {
const lm = getLoader(webpackConfig, loaderByName('babel-loader'));
const loader = lm.match.loader;
webpackConfig.module.rules[2].oneOf[1] = transformBabelLoader(loader);
return webpackConfig;
}
},
};
@@ -10,6 +10,7 @@
"@types/react-dom": "16.8.4",
"@types/styled-components": "^4.1.15",
"craco-less": "^1.9.0",
"linaria": "1.4.0-alpha.1",
"lottie-web": "^5.5.3",
"normalize.css": "^8.0.1",
"react": "^16.8.6",
@@ -1,4 +1,4 @@
import styled from 'styled-components';
import { styled } from 'linaria/lib/react';

export default styled.div`
width: 100%;
@@ -8,4 +8,4 @@ export default styled.div`
.container {
margin: 0 0 64px 0;
}
`;
` as any;
@@ -1,5 +1,5 @@
import { styled } from 'linaria/lib/react';
import React from 'react';
import styled from 'styled-components';
import { TABLET_BREAKPOINT } from '../../constants';

const ExperienceItemContainer = styled.div`
@@ -1,5 +1,5 @@
import { styled } from 'linaria/lib/react';
import React from 'react';
import styled from 'styled-components';
import { MOBILE_BREAKPOINT, TABLET_BREAKPOINT } from '../../constants';

const MOBILE_SKILL_ITEM_SPACE = '12px';
@@ -13,7 +13,7 @@ const SkillItemContainer = styled.div`
}
${TABLET_BREAKPOINT} {
flex: 0 0 calc(50% - (${MOBILE_SKILL_ITEM_SPACE} * 2));
flex: 0 0 calc(50% - 6px * 2);
&:nth-child(odd) {
margin-right: ${MOBILE_SKILL_ITEM_SPACE};
@@ -26,8 +26,11 @@ const SkillItemContainer = styled.div`
}
${MOBILE_BREAKPOINT} {
flex: 0 0 100%;
margin-right: 0 !important;
&& {
flex: 0 0 100%;
margin-right: 0;
margin-left: 0;
}
}
span {
@@ -1,5 +1,5 @@
import { styled } from 'linaria/lib/react';
import React from 'react';
import styled from 'styled-components';
import SKillItem from './SkillItem';

const SkillListContainer = styled.div`
@@ -1,6 +1,6 @@
import { styled } from 'linaria/lib/react';
import lottie from 'lottie-web';
import React from 'react';
import styled from 'styled-components';
import { TABLET_BREAKPOINT } from '../../constants';

const animationData = require('./data.json');
@@ -1,5 +1,5 @@
import { styled } from 'linaria/lib/react';
import React from 'react';
import styled from 'styled-components';
import InnerContainer from '../components/InnerContainer';
import { TABLET_BREAKPOINT } from '../constants';
import Experiences from './Experiences';
@@ -1,5 +1,5 @@
import { styled } from 'linaria/lib/react';
import React from 'react';
import styled from 'styled-components';
import InnerContainer from '../components/InnerContainer';
import { TABLET_BREAKPOINT } from '../constants';

@@ -1,5 +1,5 @@
import { styled } from 'linaria/lib/react';
import React from 'react';
import styled from 'styled-components';
import Logo from '../components/logo/Logo';

const MainContainer = styled.div`
@@ -1,5 +1,5 @@
import { styled } from 'linaria/lib/react';
import React from 'react';
import styled from 'styled-components';
import { TABLET_BREAKPOINT } from '../constants';

const ProfileContainer = styled.div`
@@ -0,0 +1,22 @@
module.exports = loader => ({
test: loader.test,
include: loader.include,
rules: [
{
loader: loader.loader,
options: {
presets: [loader.options.presets[0], 'linaria/babel']
}
},
{
loader: 'linaria/loader',
options: {
cacheDirectory: 'src/.linaria_cache',
sourceMap: process.env.NODE_ENV !== 'production',
babelOptions: {
presets: loader.options.presets
}
}
}
]
});
@@ -29,7 +29,7 @@
semver "^5.4.1"
source-map "^0.5.0"

"@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.3.3", "@babel/core@^7.4.3":
"@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.4.3":
version "7.4.5"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.4.5.tgz#081f97e8ffca65a9b4b0fdc7e274e703f000c06a"
integrity sha512-OvjIh6aqXtlsA8ujtGKfC7LYWksYSX8yQcM8Ay3LuvVeQ63lcOKgoZWVqcpFwkd29aYU9rVx7jxhfhiEDV9MZA==
@@ -49,7 +49,7 @@
semver "^5.4.1"
source-map "^0.5.0"

"@babel/generator@^7.3.3", "@babel/generator@^7.4.0", "@babel/generator@^7.4.4":
"@babel/generator@^7.4.0", "@babel/generator@^7.4.4":
version "7.4.4"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.4.4.tgz#174a215eb843fc392c7edcaabeaa873de6e8f041"
integrity sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==
@@ -860,7 +860,7 @@
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-transform-typescript" "^7.3.2"

"@babel/register@^7.0.0":
"@babel/register@^7.4.0":
version "7.4.4"
resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.4.4.tgz#370a68ba36f08f015a8b35d4864176c6b65d7a23"
integrity sha512-sn51H88GRa00+ZoMqCVgOphmswG4b7mhf9VOB0LUBAieykq2GnRFerlN+JQkO/ntT7wz4jaHNSRPg9IdMPEUkA==
@@ -2868,6 +2868,11 @@ core-js@3.0.1:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.0.1.tgz#1343182634298f7f38622f95e73f54e48ddf4738"
integrity sha512-sco40rF+2KlE0ROMvydjkrVMMG1vYilP2ALoRXcYR4obqbYIuV3Bg+51GEDW+HF8n7NRA+iaA4qD0nD9lo9mew==

core-js@^2.0.0:
version "2.6.9"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==

core-js@^2.4.0:
version "2.6.8"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.8.tgz#dc3a1e633a04267944e0cb850d3880f340248139"
@@ -6060,18 +6065,20 @@ levn@^0.3.0, levn@~0.3.0:
prelude-ls "~1.1.2"
type-check "~0.3.2"

linaria@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/linaria/-/linaria-1.3.1.tgz#f02f86b55e61865bb53773f0481a1bdfc456a209"
integrity sha512-bqY26gfXDd/OdjH+jNC/UeM6q3whQdW9OaeHaSuZgXKiT4IZ9JYrMs53UnCroxDwnhDZTnMZLapNrdv4PqCnxA==
linaria@1.4.0-alpha.1:
version "1.4.0-alpha.1"
resolved "https://registry.yarnpkg.com/linaria/-/linaria-1.4.0-alpha.1.tgz#0fc7e1b26c4c9ad7be53c2dce426fd695eac2b66"
integrity sha512-oBsyRiojLxTBzQTvl0mMCOBfc/8k01IBWl91tAql0oEgNNjaCj9qXG4cxieud3fc/26PrwqEM6/isY8IWg7iiw==
dependencies:
"@babel/core" "^7.3.3"
"@babel/generator" "^7.3.3"
"@babel/core" "^7.4.3"
"@babel/generator" "^7.4.0"
"@babel/plugin-proposal-export-namespace-from" "^7.2.0"
"@babel/plugin-syntax-dynamic-import" "^7.2.0"
"@babel/plugin-transform-modules-commonjs" "^7.2.0"
"@babel/register" "^7.0.0"
"@babel/register" "^7.4.0"
"@babel/traverse" "^7.4.3"
"@emotion/is-prop-valid" "^0.7.3"
core-js "^2.0.0"
cosmiconfig "^5.1.0"
dedent "^0.7.0"
enhanced-resolve "^4.1.0"
@@ -6083,7 +6090,7 @@ linaria@^1.3.1:
react-is "^16.8.3"
rollup-pluginutils "^2.4.1"
source-map "^0.7.3"
strip-ansi "^5.0.0"
strip-ansi "^5.2.0"
stylis "^3.5.4"
yargs "^13.2.1"

0 comments on commit 7713eda

Please sign in to comment.
You can’t perform that action at this time.