refactor: styles

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",

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 */
+  },
+});

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',
       {

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')

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: [

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"

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 = {};

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(', ')}},`,

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: [