Importing css without require

JavaScript
1

How would one perform a require of CSS - e.g. Bootstrap - when there is not possible place within the module that could invoke the require function?

I have created a dedicated library module that is essentially a facade of external references for react-bootstrap (using kotlin-react KClass). The module has no main method, no KComponent classes and none of the external references are consumed from within the module.

In essence, this module has no possible location in which I can perform require("bootstrap/dist/css/bootstrap.min.css") to import the pre-compiled Bootstrap CSS and as such, the module cannot satisfy its self-contained credentials.

Given this, how would one ensure that such CSS resources can be made available as if the module had been able to perform a require call?

For full disclosure and additional context to a solution, future goals intend to have the frontend application that consumes the module, use Bootstraps sass, making style definition and importing the frontend application responsibility. But right now, that is not possible and I do not want to have the require in the consuming frontend app.

I could just require the css in the frontend app right now, but I am after a present solution in which the frontend app should need only specify a dependancy on the module, then import only the external facade callables the module provides. i.e. the frontend app should be able to assume that the dependancy & import of these callables provides everything it needs without an additional require.

2

You can try to enable cssSupport in gradle file - documentation.

3

Thanks for the response.

I already have cssSupport enabled. This however simply provides defaults which I can alternately do manually using a js file in the webpack.config.d directory.

This logic thought helps resolve import statement (or require in Kotlin). It does not help me when I have no observable method / location I can place a require statement.

If for example, I import the react-bootstrap NPM dependency in this module, then have a single file as.

@file:JsModule("react-bootstrap")
@file:JsNonModule

package me.local.bootstrap.alerts

import react.*

@JsName("Alert")
external val bootstrapAlert: RClass<AlertProps>

external interface AlertProps: RProps {
    var variant: String
    var dismissible: Boolean
    var show: Boolean
    var onClose: (a: Any, b: Any) -> Unit
    var closeLabel: String
}

I can consume this in another module e.g.

bootstrapAlert {
    variant = "warning"
    +"Sample alert"
}

However, at no point is the precompiled CSS been made available.

As noted, I can require it were I consume bootstrapAlert, but I want to require it within the module providing bootstrapAlert.

Because of the minimal boilerplate provided in the module, require is disallowed as I cannot mix non-external declaration in files marked JsModule. I can’t mark it external because externals cannot have values assigned at the point they are defined.

Overall, because I cannot call require, I cannot trigger an import that will match the cssSupport rules.

4

I’ve taken a really different approach with CSS. That won’t help you if you want to use a pre-defined one like from Bootstrap, but on the long run I think it will be better.

I simply dropped all CSS files and written an - admittedly lacking - implementation of JSS in pure Kotlin.

It lets me use themes easily, have the class names suggested by the editor, no CSS files to carry around in a 5 project deep dependency tree.

Not to mention WebPack dev server actually refreshes when I change something. :slight_smile:

The base class that does the CSS building: https://github.com/spxbhuhb/zakadabar-stack/blob/master/src/jsMain/kotlin/zakadabar/stack/frontend/util/css.kt

An example how I use it: https://github.com/spxbhuhb/zakadabar-samples/tree/master/01-beginner/my-life-my-theme-my-style