Skip to content

Commit

Permalink
support linaria
Browse files Browse the repository at this point in the history
  • Loading branch information
@malash
malash committed Nov 24, 2020
1 parent 1f0f510 commit f0e78fc
Show file tree
Hide file tree
Showing 7 changed files with 153 additions and 11 deletions.
1 change: 1 addition & 0 deletions packages/cli/package.json
View file
Expand Up @@ -47,6 +47,7 @@
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"file-loader": "^6.0.0",
"linaria": "^2.0.2",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "^1.3.0",
"postcss-calc": "^7.0.2",
Expand Down
1 change: 1 addition & 0 deletions packages/cli/src/config/babel.config.ts
View file
Expand Up @@ -30,6 +30,7 @@ module.exports = {
],
require.resolve('@babel/preset-typescript'),
require.resolve('@babel/preset-react'),
require.resolve('linaria/babel'),
],
plugins: [
[require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
Expand Down
47 changes: 47 additions & 0 deletions packages/cli/src/config/webpack.config.ts
View file
Expand Up @@ -115,11 +115,22 @@ export const getWebpackConfig = ({
loader: require.resolve('babel-loader'),
options: babelConfig,
},
{
loader: require.resolve('linaria/loader'),
options: {
sourceMap: false,
babelOptions: {
// always use internal babel.config.js file
configFile: require.resolve('./babel.config'),
},
},
},
preprocessLoader('js', nodeEnv, target),
],
},
{
test: /\.css$/,
exclude: /\.linaria\.css$/,
use: [
MiniCssExtractPlugin.loader,
...cacheLoaders,
Expand Down Expand Up @@ -164,6 +175,42 @@ export const getWebpackConfig = ({
},
],
},
{
test: /\.linaria\.css$/,
use: [
MiniCssExtractPlugin.loader,
...cacheLoaders,
{
loader: require.resolve('css-loader'),
},
{
loader: require.resolve('@goji/webpack-plugin/dist/cjs/loaders/transform'),
options: {
target,
type: 'wxss',
},
},
{
loader: require.resolve('postcss-loader'),
options: {
config: {
path: __dirname,
ctx: {
integrationMode,
},
},
},
},
preprocessLoader('js', nodeEnv, target),
{
loader: require.resolve('postcss-loader'),
options: {
// eslint-disable-next-line global-require
plugins: [require('postcss-import')({})],
},
},
],
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
Expand Down
1 change: 1 addition & 0 deletions packages/demo-todomvc/.linaria-cache/packages/demo-todomvc/src/pages/index/index.linaria.css
View file
@@ -0,0 +1 @@
.h1xpvx4y{color:red;}
1 change: 1 addition & 0 deletions packages/demo-todomvc/package.json
View file
Expand Up @@ -18,6 +18,7 @@
"@goji/core": "^0.8.6",
"classnames": "^2.2.6",
"core-js": "^3.6.5",
"linaria": "^2.0.2",
"react": "^16.13.1",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
Expand Down
12 changes: 11 additions & 1 deletion packages/demo-todomvc/src/pages/index/index.tsx
View file
@@ -1,14 +1,24 @@
import React from 'react';
import { render } from '@goji/core';
import { render, View } from '@goji/core';
import { css } from 'linaria';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { MainSection } from '../../components/MainSection';
import { todoReducer } from '../../duck/todo';

const store = createStore(todoReducer);

const header = css`
color: red;
`;

const Comp = () => {
return <View className={header}>xx</View>;
};

const TodoList = () => (
<Provider store={store}>
<Comp />
<MainSection />
</Provider>
);
Expand Down
101 changes: 91 additions & 10 deletions yarn.lock
View file
Expand Up @@ -43,7 +43,7 @@
semver "^5.4.1"
source-map "^0.5.0"

"@babel/generator@^7.12.1", "@babel/generator@^7.12.5":
"@babel/generator@>=7", "@babel/generator@^7.12.1", "@babel/generator@^7.12.5":
version "7.12.5"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.5.tgz#a2c50de5c8b6d708ab95be5e6053936c1884a4de"
integrity sha512-m16TQQJ8hPt7E+OS/XVQg/7U184MLXtvuGbCdA7na61vha+ImkyyNM/9DDA0unYCVZn3ZOhng+qz48/KBOT96A==
Expand Down Expand Up @@ -309,7 +309,7 @@
"@babel/helper-plugin-utils" "^7.10.4"
"@babel/plugin-syntax-dynamic-import" "^7.8.0"

"@babel/plugin-proposal-export-namespace-from@^7.12.1":
"@babel/plugin-proposal-export-namespace-from@>=7", "@babel/plugin-proposal-export-namespace-from@^7.12.1":
version "7.12.1"
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.12.1.tgz#8b9b8f376b2d88f5dd774e4d24a5cc2e3679b6d4"
integrity sha512-6CThGf0irEkzujYS5LQcjBx8j/4aQGiVv7J9+2f7pGfxqyKh3WnmVJYW3hdrQjyksErMGBPQrCnHfOtna+WLbw==
Expand Down Expand Up @@ -412,7 +412,7 @@
dependencies:
"@babel/helper-plugin-utils" "^7.10.4"

"@babel/plugin-syntax-dynamic-import@^7.8.0":
"@babel/plugin-syntax-dynamic-import@>=7", "@babel/plugin-syntax-dynamic-import@^7.8.0":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
Expand Down Expand Up @@ -622,7 +622,7 @@
"@babel/helper-plugin-utils" "^7.10.4"
babel-plugin-dynamic-import-node "^2.3.3"

"@babel/plugin-transform-modules-commonjs@^7.12.1":
"@babel/plugin-transform-modules-commonjs@>=7", "@babel/plugin-transform-modules-commonjs@^7.12.1":
version "7.12.1"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.12.1.tgz#fa403124542636c786cf9b460a0ffbb48a86e648"
integrity sha512-dY789wq6l0uLY8py9c1B48V8mVL5gZh/+PQ5ZPrylPYsnAvnEMjqsUXkuoDVPeVK+0VyGar+D08107LzDQ6pag==
Expand Down Expand Up @@ -749,7 +749,7 @@
dependencies:
"@babel/helper-plugin-utils" "^7.10.4"

"@babel/plugin-transform-runtime@^7.10.1", "@babel/plugin-transform-runtime@^7.9.6":
"@babel/plugin-transform-runtime@>=7", "@babel/plugin-transform-runtime@^7.10.1", "@babel/plugin-transform-runtime@^7.9.6":
version "7.12.1"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz#04b792057eb460389ff6a4198e377614ea1e7ba5"
integrity sha512-Ac/H6G9FEIkS2tXsZjL4RAdS3L3WHxci0usAnz7laPWUmFiGtj7tIASChqKZMHTSQTQY6xDbOq+V1/vIq3QrWg==
Expand Down Expand Up @@ -782,7 +782,7 @@
"@babel/helper-plugin-utils" "^7.10.4"
"@babel/helper-regex" "^7.10.4"

"@babel/plugin-transform-template-literals@^7.12.1":
"@babel/plugin-transform-template-literals@>=7", "@babel/plugin-transform-template-literals@^7.12.1":
version "7.12.1"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.12.1.tgz#b43ece6ed9a79c0c71119f576d299ef09d942843"
integrity sha512-b4Zx3KHi+taXB1dVRBhVJtEPi9h1THCeKmae2qP0YdUHIFhVjtpqqNfxeVAa1xeHVhAy4SbHxEwx5cltAu5apw==
Expand Down Expand Up @@ -958,7 +958,7 @@
dependencies:
regenerator-runtime "^0.13.4"

"@babel/template@^7.10.4", "@babel/template@^7.3.3":
"@babel/template@>=7", "@babel/template@^7.10.4", "@babel/template@^7.3.3":
version "7.10.4"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
Expand Down Expand Up @@ -1009,6 +1009,18 @@
resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==

"@emotion/is-prop-valid@^0.8.8":
version "0.8.8"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
dependencies:
"@emotion/memoize" "0.7.4"

"@emotion/memoize@0.7.4":
version "0.7.4"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==

"@eslint/eslintrc@^0.2.1":
version "0.2.1"
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.2.1.tgz#f72069c330461a06684d119384435e12a5d76e3c"
Expand Down Expand Up @@ -3398,6 +3410,11 @@ babel-plugin-jest-hoist@^26.6.2:
"@types/babel__core" "^7.0.0"
"@types/babel__traverse" "^7.0.6"

babel-plugin-transform-react-remove-prop-types@^0.4.24:
version "0.4.24"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==

babel-preset-current-node-syntax@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.0.tgz#cf5feef29551253471cfa82fc8e0f5063df07a77"
Expand Down Expand Up @@ -5695,7 +5712,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
dependencies:
once "^1.4.0"

enhanced-resolve@^4.1.1, enhanced-resolve@^4.3.0:
enhanced-resolve@^4.1.0, enhanced-resolve@^4.1.1, enhanced-resolve@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz#3b806f3bfafc1ec7de69551ef93cca46c1704126"
integrity sha512-3e87LvavsdxyoCfGusJnrZ5G8SLPOFeHSNpZI/ATL9a5leXo2k0w6MKnbqhdBad9qTobSfB20Ld7UmgoNbAZkQ==
Expand Down Expand Up @@ -6136,6 +6153,11 @@ estraverse@^5.1.0, estraverse@^5.2.0:
resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==

estree-walker@^0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==

esutils@^2.0.2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
Expand Down Expand Up @@ -6656,6 +6678,14 @@ find-versions@^3.0.0:
dependencies:
semver-regex "^2.0.0"

find-yarn-workspace-root@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-1.2.1.tgz#40eb8e6e7c2502ddfaa2577c176f221422f860db"
integrity sha512-dVtfb0WuQG+8Ag2uWkbG79hOUzEsRrhBzgfn86g2sJPkzmcpGdghbNTfUKGTxymFrY/tLIodDzLoW9nOJ4FY8Q==
dependencies:
fs-extra "^4.0.3"
micromatch "^3.1.4"

findup-sync@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-3.0.0.tgz#17b108f9ee512dfb7a5c7f3c8b27ea9e1a9c08d1"
Expand Down Expand Up @@ -6756,6 +6786,15 @@ fs-constants@^1.0.0:
resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==

fs-extra@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
dependencies:
graceful-fs "^4.1.2"
jsonfile "^4.0.0"
universalify "^0.1.0"

fs-extra@^7.0.0:
version "7.0.1"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
Expand Down Expand Up @@ -9074,6 +9113,36 @@ levn@~0.3.0:
prelude-ls "~1.1.2"
type-check "~0.3.2"

linaria@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/linaria/-/linaria-2.0.2.tgz#b8ebc73b699440d225d9397f14fcb526547d1053"
integrity sha512-5c+JXuLu45/IOCWrwxKShje5ld8Cj0I3CM2w4mkOutWhBUf6UYhFeaUiGqNwwdP0nA5/9pqmIacWSsPCM0kinw==
dependencies:
"@babel/generator" ">=7"
"@babel/plugin-proposal-export-namespace-from" ">=7"
"@babel/plugin-syntax-dynamic-import" ">=7"
"@babel/plugin-transform-modules-commonjs" ">=7"
"@babel/plugin-transform-runtime" ">=7"
"@babel/plugin-transform-template-literals" ">=7"
"@babel/template" ">=7"
"@emotion/is-prop-valid" "^0.8.8"
babel-plugin-transform-react-remove-prop-types "^0.4.24"
cosmiconfig "^5.1.0"
debug "^4.1.1"
enhanced-resolve "^4.1.0"
find-yarn-workspace-root "^1.2.1"
glob "^7.1.3"
loader-utils "^1.2.3"
mkdirp "^0.5.1"
normalize-path "^3.0.0"
postcss "^7.0.14"
react-is "^16.8.3"
rollup-pluginutils "^2.4.1"
source-map "^0.6.1"
strip-ansi "^5.2.0"
stylis "^3.5.4"
yargs "^13.2.1"

line-column@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
Expand Down Expand Up @@ -12037,7 +12106,7 @@ react-error-overlay@^6.0.3:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==

react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.6:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
Expand Down Expand Up @@ -12650,6 +12719,13 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
hash-base "^3.0.0"
inherits "^2.0.1"

rollup-pluginutils@^2.4.1:
version "2.8.2"
resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
dependencies:
estree-walker "^0.6.1"

rst-selector-parser@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
Expand Down Expand Up @@ -13543,6 +13619,11 @@ stylehacks@^4.0.0:
postcss "^7.0.0"
postcss-selector-parser "^3.0.0"

stylis@^3.5.4:
version "3.5.4"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==

supports-color@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
Expand Down Expand Up @@ -14925,7 +15006,7 @@ yargs-parser@^20.2.2:
resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==

yargs@^13.3.2:
yargs@^13.2.1, yargs@^13.3.2:
version "13.3.2"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
Expand Down

2 comments on commit f0e78fc

@hyf0
Copy link

@hyf0 hyf0 commented on f0e78fc Nov 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

linaria rely on webpack@4. It takes a long time to support webpack@5 callstack/linaria#681

@malash
Copy link
Collaborator Author

@malash malash commented on f0e78fc Nov 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iheyunfei Thanks, WebPack 5 support is WIP. I add a note to remind checking Linaria support. #22

Please sign in to comment.