How does duo use CSS @import?

jasonkuhrt commented 10 years ago

Hi, this may just be an issue due to lacking documentation.

We have a project with a component.json including this:

{
  "name": "lui",
  "version": "0.5.5",
  "repository": "littlebitselectronics/ui",
  "scripts": [
    "lib/**/*.js"
  ],
  "main": "lib/index.js",
  "styles": [
    "lib/**/*.css"
  ],

When we try to require it now using duo, like so:

@import 'littlebitselectronics/ui';

or:

@import 'littlebitselectronics/ui:lib/base-vars.css';
@import 'littlebitselectronics/ui:lib/base.css';
...

duo build does not have the css from littlebitselectronics/ui. What are we doing wrong?

jasonkuhrt commented 10 years ago

According to DEBUG=duo the css files are being parsed...?

  duo parsing: lib/parts/dashboard-tour/index.js +1ms
  duo components/littlebitselectronics-ui@0.5.5/lib/box/index.css deps: [] +1ms
  duo components/littlebitselectronics-ui@0.5.5/lib/base.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/button/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/checklist/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/content/content.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/dial/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/dimmer/index.css deps: [] +1ms
  duo components/littlebitselectronics-ui@0.5.5/lib/dotnav/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/flex/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/h-nav/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/loading/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/mobi-input/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/notification/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/number-readout/index.css deps: ["assets/digital-7_mono_italic-webfont.eot","assets/digital-7_mono_italic-webfont.eot?#iefix","assets/digital-7_mono_italic-webfont.woff","assets/digital-7_mono_italic-webfont.ttf","assets/digital-7_mono_italic-webfont.svg#digital-7_monomono"] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/scale/index.css deps: [] +2ms
  duo components/littlebitselectronics-ui@0.5.5/lib/pushbutton/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/select-wifi/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/sheet/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/sheet-head/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/slidenav/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/slideset/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/tabs/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/text-menu/index.css deps: [] +1ms
  duo components/littlebitselectronics-ui@0.5.5/lib/tip/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/u-scroll/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/u-theme/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/u-typ/index.css deps: [] +0ms
  duo components/littlebitselectronics-ui@0.5.5/lib/windex/windex.css deps: [] +0ms
  duo lib/parts/boolean-status/index.css deps: [] +0ms
  duo lib/parts/slideshow/index.css deps: [] +0ms

matthewmueller commented 10 years ago

It's strange that the 2nd option isn't working. But as for the first, right now duo only supports component < 1 style syntax (explicit dependencies) for scripts and styles. It should trigger compatibility mode and use: https://github.com/duojs/css-compat

Might not make sense with your setup at this time, but the "duo way" would be to have an index.css file in littlebitselectronics/ui that does the following:

index.css

@import './lib/base-vars.css';
@import './lib/base.css';
...

jasonkuhrt commented 10 years ago

@MatthewMueller Ok, thanks for clarifying. Keeping open until we resolve:

It's strange that the 2nd option isn't working.

jasonkuhrt commented 10 years ago

@MatthewMueller Hmmm I think the issue was that I was using myth 1.0.4...

duojs / duo

How does duo use CSS @import? #370