[bug] @import '~box-sizing-border-box'; not found, while @import '../../node_modules/box-sizing-border-box'; is

[strarsis]

Agreement

• This is not a duplicate of an existing issue
• I have read the guidelines for Contributing to Roots Projects
• This is not a personal support request that should be posted on the Roots Discourse community

Describe the issue

When trying to @import the box-sizing-border-box npm package in SCSS, it isn't found and the build fails.

@import '~box-sizing-border-box';

Only explicitly specifying the path makes the import work correctly:

@import '../../node_modules/box-sizing-border-box/index';

Expected Behavior

No import issues, entrypoint file of module is found and imported when just using the usual short module import:
@import '~box-sizing-border-box';.

Actual Behavior

Build error as the module cannot be imported.

Steps To Reproduce

1. Create new Sage 10 theme.
2. Add box-sizing-border-box as dependency: yarn add box-sizing-border-box.
3. Install @roots/bud-sass for enabling SCSS support: yarn add @roots/bud-sass --dev.
4. (Rename the app.css to app.scss and editor.css to editor.scss.
5. Add @import '~box-sizing-border-box'; to the app.scss.
6. Run the theme build: yarn build.
   Note that the build fails as ~box-sizing-border-box cannot be found.
7. Now change the @import so a full path is used instead:

@import '../../node_modules/box-sizing-border-box';

8. Re-run the theme build: yarn build.
   Note that the build now succeeds as ``

version

6.3.5

What package manager are you using?

yarn classic

version

1.22.19

Related/context

#1014, but the box-sizing-border-box package should have an export now.

[kellymears]

I think this is a problem with box-sizing-border-box.

In package.json, the main export is _index.scss, but that file doesn't exist:

https://github.com/strarsis/box-sizing-border-box/blob/a5ded7ed48984f0c1c719e910fba47090e2b0ffe/package.json#L5

Feel free to ignore suggestion but an export mapping would be nice:

{
  "main": "./index.css",
  "exports": {
    ".": "./index.css",
    "css": "./index.css",
    "scss": "./index.scss"
  }
}

usage:

@import 'box-sizing-border-box';
@import 'box-sizing-border-box/css'; // same as default
@import 'box-sizing-border-box/scss';

[strarsis]

@kellymears: Thanks! What about exports/import and exports/require, are those actually needed when exports/.; exports/css and exports/scss are already used?

Edit: (exports documentation)

Using the "import" and "require" conditions can lead to some hazards, which are further explained in the dual CommonJS/ES module packages section.

So I don't think there are advantages when using these two extra fields.

[strarsis]

@kellymears: I updated that package to use the exports field as described.

When I use

@import 'box-sizing-border-box';

in the app.scss, the build fails:

SassError: Can't find stylesheet to import.
  ╷
6 │ @import 'box-sizing-border-box';
  │         ^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  resources/styles/app.scss 6:9  root stylesheet

Have I missed something?

[kellymears]

not 100% sure. i can take a look at it later.

but i would think @import 'box-sizing-border-box/scss' works now?

[strarsis]

@import 'box-sizing-border-box/scss'

Sadly no, the import doesn't work either. Is still something wrong with the package?

[kellymears]

got the same behavior. looked up how bulma does it. this seems to work well (pretty much directly lifted):

{
  "name": "box-sizing-border-box",
  "version": "1.3.0",
  "description": "Best practice for setting box-sizing: border-box, taken from css-tricks",
  "main": "index.scss",
  "unpkg": "index.css",
  "style": "index.css"
}

you can just edit node_modules directly to test.

obviously different build systems will handle this differently, but in the case of bud the json above is resolvable with or without the sass extension.

[Phalconline]

@strarsis Could you please provide your package.json or just a list of installed bud extensions?
Maybe I'll help you with that. I just have solved the same issue for my projects.

Or try this:

1. Add "@roots/bud-preset-recommend": "6.3.5"
2. Use @import 'box-sizing-border-box';

My project:

"devDependencies": {
    "@roots/bud": "6.3.5",
    "@roots/bud-entrypoints": "6.3.5",
    "@roots/bud-preset-recommend": "6.3.5",
    "@roots/bud-purgecss": "6.3.5",
    "@roots/bud-sass": "6.3.5",
    "@roots/sage": "6.3.5",
    "purgecss-with-wordpress": "^4.1.0"
  },
  "dependencies": {
    "@barba/core": "^2.9.7",
    "@barba/prefetch": "^2.1.10",
    "normalize.css": "^8.0.1"
  }

Then just @import "normalize.css";

[kellymears]

@Phalconline in this case it is actually the package that is the problem (@strasis is the author of the package). I've verified this in 6.3.5.

I also think I have solved it in #1622 (comment) so I'm going to go ahead and close this issue. It wasn't really a bud problem, anyway.

[strarsis]

@kellymears, @Phalconline: Thanks for your help!

[strarsis]

Addendum / side notes: The newly added main; unpkg; style fields make the import work
Interestingly, only when the exports field is removed, with an additional exports field in place, the import will not work.
(Compare v1.4.0 (with additional exports field) with v1.5.0 (without the exports field)).
The exports field confuses the importer.