Skip to content

Commit bdbc2e0

Browse files
gregbergegregberge
authored
feat: add smooth-plugin-css, support css-loader (#19)
1 parent c115ed2 commit bdbc2e0

File tree

12 files changed

+312
-71
lines changed

12 files changed

+312
-71
lines changed

‎packages/smooth-plugin-css/README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# smooth-plugin-css
2+
3+
A [Smooth](https://github.com/smooth-code/smooth.js) plugin for CSS with
4+
built-in server-side rendering support.
5+
6+
## Install
7+
8+
`npm install smooth-plugin-css`
9+
10+
## Usage
11+
12+
Edit `smooth.config.js`:
13+
14+
```js
15+
// smooth.config.js
16+
module.exports = {
17+
plugins: [
18+
{
19+
resolve: `smooth-plugin-css`,
20+
options: {
21+
// Add any options here
22+
},
23+
},
24+
],
25+
}
26+
```

‎packages/smooth-plugin-css/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// noop

‎packages/smooth-plugin-css/package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "smooth-plugin-css",
3+
"description": "Smooth plugin to add support for css loading",
4+
"version": "0.1.1-alpha.41",
5+
"repository": "https://github.com/smooth-code/smooth.js/tree/master/packages/smooth-plugin-css",
6+
"author": "Greg Bergé <berge.greg@gmail.com>",
7+
"publishConfig": {
8+
"access": "public"
9+
},
10+
"keywords": [
11+
"smooth",
12+
"smooth-plugin"
13+
],
14+
"engines": {
15+
"node": ">=8"
16+
},
17+
"main": "index.js",
18+
"license": "MIT",
19+
"scripts": {
20+
"prebuild": "shx rm -rf lib",
21+
"build": "babel --root-mode upward -d lib --ignore \"**/*.test.js\" --copy-files src",
22+
"prepublishOnly": "yarn run build"
23+
},
24+
"dependencies": {
25+
"css-loader": "^2.1.1",
26+
"mini-css-extract-plugin": "^0.6.0"
27+
},
28+
"peerDependencies": {
29+
"smooth": "^0.1.0"
30+
}
31+
}

‎packages/smooth-plugin-css/smooth-node.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('./lib/smooth-node')

‎packages/smooth-plugin-css/src/smooth-node.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
2+
3+
export function onCreateWebpackConfig({ stage, actions }) {
4+
const dev = stage.startsWith('develop')
5+
actions.setWebpackConfig({
6+
plugins: [
7+
new MiniCssExtractPlugin({
8+
filename: dev ? '[name].css' : '[name]-bundle-[chunkhash:8].css',
9+
chunkFilename: dev ? '[id].css' : '[id]-bundle-[chunkhash:8].css',
10+
}),
11+
],
12+
module: {
13+
rules: [
14+
{
15+
test: /\.css$/,
16+
use: [
17+
{
18+
loader: MiniCssExtractPlugin.loader,
19+
options: {
20+
hmr: dev,
21+
},
22+
},
23+
'css-loader',
24+
],
25+
},
26+
],
27+
},
28+
})
29+
}

‎packages/smooth/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -899,6 +899,7 @@ The `modules` option on `"preset-env"` should be kept to `false` otherwise webpa
899899
- onCreateApolloServerConfig
900900
- onRenderBody
901901
- onCreateBabelConfig
902+
- onCreateWebpackConfig
902903
- getContents
903904
- getContent
904905
- onBuild

‎packages/smooth/src/config/webpack.js

Lines changed: 75 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import fs from 'fs'
33
import webpack from 'webpack'
44
import nodeExternals from 'webpack-node-externals'
55
import LoadablePlugin from '@loadable/webpack-plugin'
6-
import { onCreateBabelConfig } from '../plugin/nodeHooks'
6+
import { onCreateBabelConfig, onCreateWebpackConfig } from '../plugin/nodeHooks'
77
import SmoothCacheHotReloader from '../webpack/plugins/smooth-cache-hot-reloader'
88

99
function fileExistsSync(filepath) {
@@ -46,6 +46,10 @@ function getDirectory(config, dirPath, defaultPath) {
4646
: path.join(config.cachePath, defaultPath)
4747
}
4848

49+
function getStage({ target, dev }) {
50+
return `${dev ? 'develop-' : 'build-'}${target}`
51+
}
52+
4953
function getTargetConfig(target, { config, dev }) {
5054
const mainEntry = path.join(__dirname, '../client', `main-${target}.js`)
5155
const isServer = target === 'node'
@@ -65,75 +69,79 @@ function getTargetConfig(target, { config, dev }) {
6569
const options = { isServer, defaultLoaders, dev }
6670
const blocksPath = getDirectory(config, config.blocksPath, 'default-blocks')
6771

68-
return config.webpack(
69-
{
70-
name: target,
71-
mode: dev ? 'development' : 'production',
72-
target,
73-
entry:
74-
target === 'web' && dev
75-
? ['webpack-hot-middleware/client?name=web&reload=true', mainEntry]
76-
: mainEntry,
77-
resolveLoader: {
78-
modules: [path.join(__dirname, '../webpack/loaders'), 'node_modules'],
79-
},
80-
module: {
81-
rules: [
82-
{
83-
test: /\.js$/,
84-
exclude: /node_modules/,
85-
use: defaultLoaders.babel,
86-
},
87-
],
88-
},
89-
resolve: {
90-
alias: {
91-
smooth: path.join(__dirname, '..'),
92-
__smooth_fragmentTypes: path.join(
93-
config.cachePath,
94-
'fragmentTypes.json',
95-
),
96-
__smooth_plugins: path.join(config.cachePath, 'browser-plugins.js'),
97-
__smooth_app: getScriptPath(config, '_app.js'),
98-
__smooth_html: getScriptPath(config, 'html.js'),
99-
__smooth_error: getScriptPath(config, '_error.js'),
100-
__smooth_content: getScriptPath(config, '_content.js'),
101-
__smooth_blocks: blocksPath,
102-
__smooth_pages: config.pagesPath,
72+
const defaultWebpackConfig = {
73+
name: target,
74+
mode: dev ? 'development' : 'production',
75+
target,
76+
entry:
77+
target === 'web' && dev
78+
? ['webpack-hot-middleware/client?name=web&reload=true', mainEntry]
79+
: mainEntry,
80+
resolveLoader: {
81+
modules: [path.join(__dirname, '../webpack/loaders'), 'node_modules'],
82+
},
83+
module: {
84+
rules: [
85+
{
86+
test: /\.js$/,
87+
exclude: /node_modules/,
88+
use: defaultLoaders.babel,
10389
},
104-
},
105-
externals:
106-
target === 'node'
107-
? [
108-
nodeExternals({
109-
whitelist: [/^smooth[/\\]/],
110-
}),
111-
'graphql/type',
112-
'graphql/language',
113-
'graphql/execution',
114-
'graphql/validation',
115-
]
116-
: undefined,
117-
output: {
118-
path: path.join(config.cachePath, target, 'static'),
119-
filename: dev ? '[name].js' : '[name]-bundle-[chunkhash:8].js',
120-
publicPath: `/web/static/`,
121-
libraryTarget: target === 'node' ? 'commonjs2' : undefined,
122-
},
123-
plugins: [
124-
new webpack.EnvironmentPlugin({
125-
__smooth_blocks: blocksPath,
126-
__smooth_pages: config.pagesPath,
127-
}),
128-
new LoadablePlugin(),
129-
...(target === 'node' && dev ? [new SmoothCacheHotReloader()] : []),
130-
...(target === 'web' && dev
131-
? [new webpack.HotModuleReplacementPlugin()]
132-
: []),
13390
],
13491
},
135-
options,
136-
)
92+
resolve: {
93+
alias: {
94+
smooth: path.join(__dirname, '..'),
95+
__smooth_fragmentTypes: path.join(
96+
config.cachePath,
97+
'fragmentTypes.json',
98+
),
99+
__smooth_plugins: path.join(config.cachePath, 'browser-plugins.js'),
100+
__smooth_app: getScriptPath(config, '_app.js'),
101+
__smooth_html: getScriptPath(config, 'html.js'),
102+
__smooth_error: getScriptPath(config, '_error.js'),
103+
__smooth_content: getScriptPath(config, '_content.js'),
104+
__smooth_blocks: blocksPath,
105+
__smooth_pages: config.pagesPath,
106+
},
107+
},
108+
externals:
109+
target === 'node'
110+
? [
111+
nodeExternals({
112+
whitelist: [/\.(?!(?:jsx?|json)$).{1,5}$/i, /^smooth[/\\]/],
113+
}),
114+
'graphql/type',
115+
'graphql/language',
116+
'graphql/execution',
117+
'graphql/validation',
118+
]
119+
: undefined,
120+
output: {
121+
path: path.join(config.cachePath, target, 'static'),
122+
filename: dev ? '[name].js' : '[name]-bundle-[chunkhash:8].js',
123+
publicPath: `/web/static/`,
124+
libraryTarget: target === 'node' ? 'commonjs2' : undefined,
125+
},
126+
plugins: [
127+
new webpack.EnvironmentPlugin({
128+
__smooth_blocks: blocksPath,
129+
__smooth_pages: config.pagesPath,
130+
}),
131+
new LoadablePlugin(),
132+
...(target === 'node' && dev ? [new SmoothCacheHotReloader()] : []),
133+
...(target === 'web' && dev
134+
? [new webpack.HotModuleReplacementPlugin()]
135+
: []),
136+
],
137+
}
138+
139+
const webpackConfig = onCreateWebpackConfig(config)({
140+
state: getStage({ target, dev }),
141+
webpackConfig: defaultWebpackConfig,
142+
})
143+
144+
return config.webpack(webpackConfig, options)
137145
}
138146

139147
export async function getWebpackConfig({ config, dev }) {

‎packages/smooth/src/plugin/nodeHooks/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ export * from './onBuild'
22
export * from './onCreateApolloServerConfig'
33
export * from './onCreateServer'
44
export * from './onCreateBabelConfig'
5+
export * from './onCreateWebpackConfig'
56
export * from './onRenderBody'
67
export * from './wrapRootElement'

‎packages/smooth/src/plugin/nodeHooks/onCreateApolloServerConfig.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const onCreateApolloServerConfig = config => ({
77

88
applyHook(config, 'onCreateApolloServerConfig', {
99
getConfig() {
10-
return defaultApolloServerConfig
10+
return apolloServerConfig
1111
},
1212
actions: {
1313
setApolloServerConfig(additionalConfig) {

‎packages/smooth/src/plugin/nodeHooks/onCreateWebpackConfig.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { applyHook } from '../node'
2+
3+
export const onCreateWebpackConfig = config => ({
4+
webpackConfig: defaultWebpackConfig,
5+
stage,
6+
}) => {
7+
const webpackConfig = defaultWebpackConfig
8+
9+
const actions = {
10+
setWebpackConfig(config) {
11+
if (config.plugins) {
12+
config.plugins.forEach(plugin => webpackConfig.plugins.push(plugin))
13+
}
14+
if (config.module && config.module.rules) {
15+
config.module.rules.forEach(rule =>
16+
webpackConfig.module.rules.push(rule),
17+
)
18+
}
19+
},
20+
}
21+
22+
applyHook(config, 'onCreateWebpackConfig', {
23+
getConfig() {
24+
return webpackConfig
25+
},
26+
stage,
27+
actions,
28+
})
29+
30+
return webpackConfig
31+
}

0 commit comments

Comments
 (0)