From f474f346014075dfed4d2ce7b95b269f7fbd3880 Mon Sep 17 00:00:00 2001 From: cha0s Date: Mon, 29 Mar 2021 19:05:58 -0500 Subject: [PATCH] refactor: styles --- packages/build/package.json | 4 +++ packages/build/src/babel.js | 20 +++++++++++++++ packages/build/src/build/.babelrc.js | 3 +++ packages/build/src/build/neutrino/library.js | 5 ---- packages/build/src/build/neutrino/react.js | 3 +++ packages/build/yarn.lock | 5 ++++ packages/core/src/build.js | 27 ++++++++++++++++++++ packages/http/src/build/neutrino/virtual.js | 5 ---- packages/react/src/build/react.js | 3 +++ 9 files changed, 65 insertions(+), 10 deletions(-) create mode 100644 packages/build/src/babel.js diff --git a/packages/build/package.json b/packages/build/package.json index cce1251..f394335 100644 --- a/packages/build/package.json +++ b/packages/build/package.json @@ -14,6 +14,8 @@ "test": "yarn --silent run build --display none && mocha --colors test.js" }, "files": [ + "babel.js", + "babel.js.map", "build", "build.js", "index.js", @@ -23,11 +25,13 @@ ], "dependencies": { "@babel/eslint-parser": "^7.13.10", + "@babel/parser": "^7.13.12", "@babel/plugin-proposal-class-properties": "^7.12.13", "@babel/plugin-proposal-optional-chaining": "^7.12.16", "@babel/plugin-proposal-private-methods": "^7.12.13", "@babel/plugin-syntax-jsx": "^7.12.13", "@babel/preset-react": "^7.12.13", + "@babel/types": "^7.13.12", "@neutrinojs/airbnb": "^9.4.0", "@neutrinojs/banner": "^9.4.0", "@neutrinojs/copy": "^9.4.0", diff --git a/packages/build/src/babel.js b/packages/build/src/babel.js new file mode 100644 index 0000000..4be53c0 --- /dev/null +++ b/packages/build/src/babel.js @@ -0,0 +1,20 @@ +const parser = require('@babel/parser'); +const types = require('@babel/types'); + +let id = 0; + +module.exports = () => ({ + visitor: { + /* eslint-disable no-param-reassign */ + ImportDeclaration(path) { + if (path.node.source.value.match(/\.scss$/)) { + const symbol = `LATUS_STYLES_${id++}`; + path.node.specifiers = [ + types.importDefaultSpecifier(types.identifier(symbol)), + ]; + path.insertAfter(parser.parse(`if ('client' === process.env.SIDE) ${symbol}.use();`)); + } + }, + /* eslint-enable no-param-reassign */ + }, +}); diff --git a/packages/build/src/build/.babelrc.js b/packages/build/src/build/.babelrc.js index d519a5d..79a4a0b 100644 --- a/packages/build/src/build/.babelrc.js +++ b/packages/build/src/build/.babelrc.js @@ -1,3 +1,5 @@ +const {join} = require('path'); + const { LATUS_WEBPACK_CONFIG = require.resolve('./webpack.config.js'), } = process.env; @@ -5,6 +7,7 @@ const { module.exports = (api) => { api.cache(true); const plugins = [ + require.resolve(join(__dirname, '..', 'babel.js')), [ '@babel/plugin-proposal-class-properties', { diff --git a/packages/build/src/build/neutrino/library.js b/packages/build/src/build/neutrino/library.js index e916cb9..cac153a 100644 --- a/packages/build/src/build/neutrino/library.js +++ b/packages/build/src/build/neutrino/library.js @@ -47,11 +47,6 @@ module.exports = () => (neutrino) => { const testEntry = neutrino.config.entry('test').clear(); testPaths.forEach((path) => testEntry.add(path)); } - const cssPaths = glob.sync('./src/**/*.{css,scss}'); - if (cssPaths.length > 0) { - const cssEntry = neutrino.config.entry('index.css').clear(); - cssPaths.forEach((path) => cssEntry.add(path)); - } const {name} = neutrino.options.packageJson; neutrino.config .devtool('source-map') diff --git a/packages/build/src/build/neutrino/react.js b/packages/build/src/build/neutrino/react.js index dccc664..f44c962 100644 --- a/packages/build/src/build/neutrino/react.js +++ b/packages/build/src/build/neutrino/react.js @@ -21,6 +21,9 @@ module.exports = () => (neutrino) => { extract: { enabled: false, }, + style: { + injectType: 'lazyStyleTag', + }, test: /\.(css|sass|scss)$/, modulesTest: /\.module\.(css|sass|scss)$/, loaders: [ diff --git a/packages/build/yarn.lock b/packages/build/yarn.lock index 4a1f97f..48e9909 100644 --- a/packages/build/yarn.lock +++ b/packages/build/yarn.lock @@ -194,6 +194,11 @@ resolved "http://npm.cha0sdev/@babel%2fparser/-/parser-7.12.16.tgz#cc31257419d2c3189d394081635703f549fc1ed4" integrity sha512-c/+u9cqV6F0+4Hpq01jnJO+GLp2DdT63ppz9Xa+6cHaajM9VFzK/iDXiKK65YtpeVwu+ctfS6iqlMqRgQRzeCw== +"@babel/parser@^7.13.12": + version "7.13.12" + resolved "http://npm.cha0sdev/@babel%2fparser/-/parser-7.13.12.tgz#ba320059420774394d3b0c0233ba40e4250b81d1" + integrity sha512-4T7Pb244rxH24yR116LAuJ+adxXXnHhZaLJjegJVKSdoNCe4x1eDBaud5YIcQFcqzsaD5BHvJw5BQ0AZapdCRw== + "@babel/plugin-proposal-class-properties@^7.12.13": version "7.12.13" resolved "http://npm.cha0sdev/@babel%2fplugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.13.tgz#3d2ce350367058033c93c098e348161d6dc0d8c8" diff --git a/packages/core/src/build.js b/packages/core/src/build.js index 81810d7..a0527f4 100644 --- a/packages/core/src/build.js +++ b/packages/core/src/build.js @@ -12,6 +12,7 @@ import root from './root'; const { LATUS_BABEL_CONFIG = require.resolve('@latus/build/build/.babelrc.js'), + LATUS_POSTCSS_CONFIG = require.resolve('@latus/build/build/postcss.config.js'), LATUS_ESLINT_DEFAULTS = require.resolve('@latus/build/build/.eslint.defaults.js'), } = process.env; @@ -39,6 +40,32 @@ export default (latus) => (neutrino) => { configFile: LATUS_BABEL_CONFIG, }, })(neutrino); + const styleLoader = R('@neutrinojs/style-loader'); + styleLoader({ + extract: { + enabled: false, + }, + style: { + injectType: 'lazyStyleTag', + }, + test: /\.(css|sass|scss)$/, + modulesTest: /\.module\.(css|sass|scss)$/, + loaders: [ + { + loader: 'postcss-loader', + useId: 'postcss', + options: { + config: { + path: dirname(LATUS_POSTCSS_CONFIG), + }, + }, + }, + { + loader: 'sass-loader', + useId: 'sass', + }, + ], + })(neutrino); const defaults = Object.keys(latus.originalConfig) .map((plugin) => { const config = {}; diff --git a/packages/http/src/build/neutrino/virtual.js b/packages/http/src/build/neutrino/virtual.js index 38f8fd9..51a8a81 100644 --- a/packages/http/src/build/neutrino/virtual.js +++ b/packages/http/src/build/neutrino/virtual.js @@ -25,12 +25,7 @@ module.exports = async (latus) => { const paths = Object.keys(config) .map((path) => Latus.runtimePath(path)) .filter((path) => !!path); - const cssPaths = paths - .map((path) => Latus.runtimePath(`${path}/index.css.js`)) - .filter((path) => !!path); - const cssAppliers = cssPaths.map((path) => `require('${path}')`).join(';'); const source = [ - `${cssAppliers}`, 'export default {', ' config: window.$$latusConfig,', ` modules: {${paths.map((path) => `'${path}': require('${path}')`).join(', ')}},`, diff --git a/packages/react/src/build/react.js b/packages/react/src/build/react.js index 52da9a7..5279eac 100644 --- a/packages/react/src/build/react.js +++ b/packages/react/src/build/react.js @@ -21,6 +21,9 @@ module.exports = () => (neutrino) => { template: `${neutrino.options.root}/client/index.ejs`, }, style: { + style: { + injectType: 'lazyStyleTag', + }, test: /\.(css|sass|scss)$/, modulesTest: /\.module\.(css|sass|scss)$/, loaders: [