css-modules / css-modules-loader-core Goto Github PK

A loader-agnostic CSS Modules implementation, based on PostCSS

JavaScript 63.60% CSS 36.40%

css-modules-loader-core's Introduction

CSS Module Loader Core

A loader-agnostic CSS Modules implementation, based on PostCSS

API

import Core from 'css-modules-loader-core'
let core = new Core()

core.load( sourceString , sourcePath , pathFetcher ) =>
Promise({ injectableSource, exportTokens })

Processes the input CSS sourceString, looking for dependencies such as @import or :import. Any localisation will happen by prefixing a sanitised version of sourcePath When dependencies are found, it will ask the pathFetcher for each dependency, resolve & inline any imports, and return the following object:

injectableSource: the final, merged CSS file without @import or :import statements
exportTokens: the mapping from local name to scoped name, as described in the file's :export block

These should map nicely to what your build-tool-specific loader needs to do its job.

new Core([plugins])

The default set of plugins is [postcss-modules-local-by-default, postcss-modules-extract-imports, postcss-modules-scope] (i.e. the CSS Modules specification). This can override which PostCSS plugins you wish to execute, e.g.

import Core from 'css-loader-core'
import autoprefixer from 'autoprefixer'
import colorFunctions from 'postcss-color-function'

// Don't run local-by-default, but use colorFunctions 
// beforehand and autoprefixer afterwards:
let core = new Core([
  colorFunctions, 
  core.plugins.extractImports, 
  core.plugins.scope, 
  autoprefixer("Last 2 Versions")
])

css-modules-loader-core's People

Contributors

Stargazers

Watchers

css-modules-loader-core's Issues

Separating fetching ans parsing

Hi there

It surprised me see that the css-modules is fetching the files right inside the parser.
Would it be possible to isolate the parsing process to just return the files to fetch ?
I feel like the goal here is more parsing :import() and :export() than providing a recursive fetching solution, no ?

What do you think about separating the fetching and the parsing process ?

README api out of date

Currently the README specifies that load takes in 3 arguments: sourceCss, sourcePath, and the pathFetcher. It actually takes four arguments though, with the third being trace. I'm not exactly sure what trace does so it might be good to give some insight on that too.

Upgrade PostCSS dependencies

They are outdated https://github.com/css-modules/css-modules-loader-core/blob/master/package.json#L11-L15

This is the first step to upgrade this package in postcss-modules.

I opened this issue to solve #235

Exits silently on background url

Not sure if this is a postcss bug/behaviour or something wrong in here, but apparently having a background url() causes a silent exit, no output or error.

sourcePath prefix '/' no such file or directory

css-modules-loader-core/src/index.js

Line 18 in 3d83770

.process( sourceString, { from: "/" + sourcePath } )

in windows the sourcePath looks like D:/HTML5/..., and will be transform to /D:/HTML5/.... cause

 no such file or directory, open 'D:\D:\HTML5\...\Typography.css'

should it be:

.process( sourceString, { from: sourcePath} )

Can consider this project abandoned?

Hi.

This is a great project - but it is completly abandoned, i understand it is FOSS project. If you do not have time to handle issues and pull requests, just ask people and you will get help for sure.

I would be glad to help, just do not want my work go to empty hole if maintainers not interested at this project.

Thanks.

We should provide existing absolute paths for the source files

Recently, I had few problems with resolving paths in the postcss-url plugin.

I did a small research and found out that we provide non-existing absolute paths to the process() method.

I made two PRs which fix the problem: #25, css-modules/postcss-modules-scope#15
Unfortunately, those are breaking changes and we should publish them with new major version.

Also I haven't checked css-modulesify yet.

Syntax

How would we use syntax plugins, like https://github.com/postcss/postcss-scss?

Doesn't allow composition into single global classname.

For this project I'm using global css instead of local, but composes seems busted:

.Card {
  composes: small from "./shadows.css";
}

yields the following error:

  Error: composition is only allowed when selector is single :local class name not in ".Card", ".Card" is weird

I've done similar with the local-first behaviour and it seemed fine, but that's not the case with global apparently.

Not sure which module actually holds the composition stuff but these are the versions:

└─┬ [email protected]
  ├─┬ [email protected]
  │ ├── [email protected]
  │ ├─┬ [email protected]
  │ │ └── [email protected]
  │ ├── [email protected]
  │ ├─┬ [email protected]
  │ │ └─┬ [email protected]
  │ │   ├── [email protected]
  │ │   ├── [email protected]
  │ │   └─┬ [email protected]
  │ │     ├── [email protected]
  │ │     ├── [email protected]
  │ │     └─┬ [email protected]
  │ │       └── [email protected]
  │ ├── [email protected]
  │ └── [email protected]

Any tips would be great!

update to postcss 8?

While using CustomLoader, stuck in error 'Error: true is not a PostCSS plugin'

Enable sourcemaps

Do it

Using composes with psuedo-selectors

Is there anyway to use composes with a psuedo-selector? For instance, like this:

.item:last-child {
  composes: no-border from 'shared/styles.css';
}

warnings

I found out that it is possible to add warnings with warn() method in the result class. Seems to me, some plugins use it to throw an error.

What you think about adding some functionality to handle those warnings and treat them as simple errors? I think we can simply throw an error somewhere here: https://github.com/css-modules/css-modules-loader-core/blob/master/src/index.js#L19

Currently, you don't see any if they occur.

Dead code elimination

Would it be possible to not output styles that aren't used when composing classes?

For example:

main.css

.foo {
  background: purple;
  composes: abc from "./other.css";
}

other.css

.abc {
  color: blue;
}
.xyz { /* note: unused */
  border: 10px solid red;
}

main.js

var styles = require('./main.css');

output css

.PyjhzcC6jE { /* .foo */
  background: purple;
}
.xGcJd4AVqt { /* .abc */
  color: blue;
}

No license file despite ISC listed in

I see you have ISC listed as a license in

css-modules-loader-core/package.json

Line 45 in 3d83770

"license": "ISC",

but there are not license files or Copyright holder information available in this repo?

Would you mind adding one? Here's a template: https://opensource.org/licenses/ISC

Support "pure" scope in postcss-modules-local-by-default

I'd like to use pure scope in css-modules/postcss-modules-local-by-default

https://github.com/css-modules/postcss-modules-local-by-default/blob/master/index.js#L527-L534

README does not mention Values

The readme seems to have not been updated to mention that postcss-modules-values is now included in the default set of core plugins. This caused me some troubles when I tried to manually run it after the core plugins.

plans of update postcss to v5?

Hi guys!
First, great library and i really like the idea behind of css-module 👍 . This is more like a question or feature...do you have plans of update postcss to v5?

Thanks!

Completely Fails on Windows

I tried using css-modulesify and it kept having issues with loading my files. I traced the issues back to this project. I cloned the repo and ran the tests and every single one failed. It keeps injecting C:\C:\ into the file path where it thinks the "root" is (that's how it appears to me anyway).

Full Test Output:

> [email protected] test C:\Users\u659408\localhost\css-modules-loader-core
> mocha --compilers js:babel/register



  test-cases
    1) should compose node module
    2) should localise export
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\test-cases\C:\C:\multiple-dependencies\b.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\test-cases\\C:\\C:\\multiple-dependencies\\b.css' }
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\test-cases\C:\C:\multiple-dependencies\c.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\test-cases\\C:\\C:\\multiple-dependencies\\c.css' }
    3) should multiple dependencies
    4) should simple export
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\test-cases\C:\C:\single-import-export\colors.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\test-cases\\C:\\C:\\single-import-export\\colors.css' }
    5) should single import export

  cssi
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\cssi\C:\C:\interchange-format\colors.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\cssi\\C:\\C:\\interchange-format\\colors.css' }
    6) should interchange format
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\cssi\C:\C:\pseudo-variables\colors.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\cssi\\C:\\C:\\pseudo-variables\\colors.css' }
    7) should pseudo variables

  multiple sources
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\test-cases\C:\C:\multiple-sources\b.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\test-cases\\C:\\C:\\multiple-sources\\b.css' }
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\test-cases\C:\C:\multiple-sources\c.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\test-cases\\C:\\C:\\multiple-sources\\c.css' }
{ [Error: ENOENT, open 'C:\Users\u659408\localhost\css-modules-loader-core\test\test-cases\C:\C:\multiple-sources\b.css']
  errno: -4058,
  code: 'ENOENT',
  path: 'C:\\Users\\u659408\\localhost\\css-modules-loader-core\\test\\test-cases\\C:\\C:\\multiple-sources\\b.css' }
    8) should multiple sources


  0 passing (251ms)
  8 failing

  1) test-cases should compose node module:

      AssertionError: '._C_C_C_compose_node_module_cool_styles_foo__example {\n  color: #F00;\n}\n._C_C_compose_node_module_source__foo {\n}\n' == '._compose_node_module_cool_styles_foo__example {\n  color: #F00;\n}\n._compose_node_module_source__foo {\n}\n'
      + expected - actual

      -._C_C_C_compose_node_module_cool_styles_foo__example {
      +._compose_node_module_cool_styles_foo__example {
         color: #F00;
       }
      -._C_C_compose_node_module_source__foo {
      +._compose_node_module_source__foo {
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  2) test-cases should localise export:

      AssertionError: '._C_C_localise_export_source__one {\n  color: red;\n}\n._C_C_localise_export_source__two {\n  color: green;\n}\n._C_C_localise_ == '._localise_export_source__one {\n
color: red;\n}\n._localise_export_source__two {\n  color: green;\n}\n._localise_export_sourc
      + expected - actual

      -._C_C_localise_export_source__one {
      +._localise_export_source__one {
         color: red;
       }
      -._C_C_localise_export_source__two {
      +._localise_export_source__two {
         color: green;
       }
      -._C_C_localise_export_source__three {
      +._localise_export_source__three {
         color: blue;
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  3) test-cases should multiple dependencies:

      AssertionError: ':import("./b.css") {\n  i__imported_b1_0: b1;\n  i__imported_b2_1: b2;\n}\n:import("./c.css") {\n  i__imported_c_2: c;\n}\n._C_ == '._multiple_dependencies_d__d1 {\n
color: #d1d1d1;\n}\n._multiple_dependencies_d__d2 {\n  color: #d2d2d2;\n}\n._multiple_depend
      + expected - actual

      -:import("./b.css") {
      -  i__imported_b1_0: b1;
      -  i__imported_b2_1: b2;
      +._multiple_dependencies_d__d1 {
      +  color: #d1d1d1;
       }
      -:import("./c.css") {
      -  i__imported_c_2: c;
      +._multiple_dependencies_d__d2 {
      +  color: #d2d2d2;
       }
      -._C_C_multiple_dependencies_source__a {
      +._multiple_dependencies_b__b1 {
      +  color: #b1b1b1;
      +}
      +
      +._multiple_dependencies_b__b2 {
      +  color: #b2b2b2;
      +}
      +._multiple_dependencies_c__c {
      +  color: #ccc;
      +}
      +._multiple_dependencies_source__a {
         color: #aaa;
       }


      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  4) test-cases should simple export:

      AssertionError: '._C_C_simple_export_source__localName {\n  color: red;\n}\n\n._C_C_simple_export_source__localName:hover {\n  color: blue;\n}\n == '._simple_export_source__localName {\n  color: red;\n}\n\n._simple_export_source__localName:hover {\n  color: blue;\n}\n'
      + expected - actual

      -._C_C_simple_export_source__localName {
      +._simple_export_source__localName {
         color: red;
       }

      -._C_C_simple_export_source__localName:hover {
      +._simple_export_source__localName:hover {
         color: blue;
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  5) test-cases should single import export:

      AssertionError: ':import("./colors.css") {\n  i__imported_blackShadow_0: blackShadow;\n
i__imported_redBorder_1: redBorder;\n}\n._C_C_single_im == '._single_import_export_colors__blackShadow {\n  box-shadow: 0 0 10px -2px black;\n}\n\n._single_import_export_colors__redBorder
      + expected - actual

      -:import("./colors.css") {
      -  i__imported_blackShadow_0: blackShadow;
      -  i__imported_redBorder_1: redBorder;
      +._single_import_export_colors__blackShadow {
      +  box-shadow: 0 0 10px -2px black;
       }
      -._C_C_single_import_export_source__localName {
      +
      +._single_import_export_colors__redBorder {
      +  border: 1px solid red;
      +}
      +._single_import_export_source__localName {
         color: red;
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  6) cssi should interchange format:

      AssertionError: ':import("./colors.css") {\n  i__tmp_import_djhgdsag: blackShadow;\n}\n\n.x__single_import_export_source__localName {\n  color:  == '.x__single_import_export_colors__blackShadow {\n  box-shadow: 0 0 10px -2px black;\n}\n.x__single_import_export_source__localNa
      + expected - actual

      -:import("./colors.css") {
      -  i__tmp_import_djhgdsag: blackShadow;
      +.x__single_import_export_colors__blackShadow {
      +  box-shadow: 0 0 10px -2px black;
       }
      -
       .x__single_import_export_source__localName {
         color: red;
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  7) cssi should pseudo variables:

      AssertionError: ':import("./colors.css") {\n  i__black: black;\n  i__white: white;\n}\n\n.x__lol {\n  color: i__black;\n  background: i__white;\ == '\n.x__lol {\n  color: #222;\n  background: #ddd;\n}\n'
      + expected - actual

      -:import("./colors.css") {
      -  i__black: black;
      -  i__white: white;
      -}

       .x__lol {
      -  color: i__black;
      -  background: i__white;
      +  color: #222;
      +  background: #ddd;
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:27:20

  8) multiple sources should multiple sources:

      AssertionError: ':import("./b.css") {\n  i__imported_b_0: b;\n}\n:import("./c.css") {\n
i__imported_c_1: c;\n}\n._C_C_multiple_sources_source1_ == '._multiple_sources_d__d {\n  color: #ddd;\n}\n._multiple_sources_b__b {\n  color: #bbb;\n}\n._multiple_sources_c__c {\n  color:
      + expected - actual

      -:import("./b.css") {
      -  i__imported_b_0: b;
      +._multiple_sources_d__d {
      +  color: #ddd;
       }
      -:import("./c.css") {
      -  i__imported_c_1: c;
      +._multiple_sources_b__b {
      +  color: #bbb;
       }
      -._C_C_multiple_sources_source1__a {
      +._multiple_sources_c__c {
      +  color: #ccc;
      +}
      +._multiple_sources_source1__a {
         color: #aaa;
       }
      -:import("./b.css") {
      -  i__imported_b_0: b;
      -}
      -._C_C_multiple_sources_source2__foo {
      +._multiple_sources_source2__foo {
         color: #f00;
       }

      at C:/Users/u659408/localhost/css-modules-loader-core/test/test-cases.js:48:18

Relative path in node_modules

If I try to compose from a module that's in node_modules and that happens to compose from a relative path module, it croaks:

{ Error: ENOENT: no such file or directory, open '/Users/longho/Work/css-modules-loader-core/test/test-cases/compose-node-module/cool-styles/bar.css'
at Error (native)
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/Users/longho/Work/css-modules-loader-core/test/test-cases/compose-node-module/cool-styles/bar.css' }

I've put the example in my fork: https://github.com/longlho/css-modules-loader-core/blob/master/node_modules/cool-styles/foo.css#L6

Proposal: Fallback path for theming

Hi there!

We are trying to theme our CSS modules. It would be a huge benefit if we could do something like this:

:import("../fancy-theme/colors.css || ../base-theme/colors.css") { ... }

This would allow us to have a specific and a base theme and fallback to the base theme's file if we don't override it in the other one. The import file path with the || could be generated by our theming plugin (https://github.com/andywer/postcss-theme).

We could implement it ourselves and open a PR.
But do you actually like the concept?

Quick feedback would be highly appreciated :)
Thanks in advance!

@import

From the docs,

Processes the input CSS sourceString, looking for dependencies such as @import

From the tests, @import statements look to be just passed through. Could the intended behaviour be clarified?

Default plugins need update

Hi @geelen .

Could you please publish new version with default plugins of postcss-modules-* updated? As you know, current version of these plugins have a problem in common regarding inter-operation with other postcss plugins.

Thanks.

Related pull requests: #113 #114 #115

Double "C:\\C:\\" in the file paths

{ Error: ENOENT: no such file or directory, open 'C:\C:\project\src\components\style.css'
at Error (antive)
error: -4058,
code: 'ENOENT',
syscall: 'open',
path: 'C:\C:\project\src\components\style.css'
}

I use "[email protected]".
The problem in file "node_modules/css-modules-loader-core/lib/file-system-loader.js" in the row number 64:

fileRelativePath = _path2['default'].resolve(_path2['default'].join(_this.root, relativeDir), newPath);

If "_this.root" equals to "/" and "relativeDir" equals to "C:\project\src\components\MyReactComponent" in function "_path2['default'].join(_this.root, relativeDir)" then result will be:

\C:\project\src\components\MyReactComponent

After that, if "newPath" equals to "../style.css", then in the function "_path2['default'].resolve('\C:\project\src\components\MyReactComponent', './style.css')" result will be:

C:\C:\project\src\components\style.css

And this is the error.

The problem is in the "_this.root", that is equal to "/".

"/" comes from the "root" - the argument of function "FileSystemLoader":

function FileSystemLoader(root, plugins) {
this.root = root;
...
...
var _this = this;
...
...
fileRelativePath = _path2['default'].resolve(_path2['default'].join(_this.root, relativeDir), newPath);

Package "[email protected]" use function "FileSystemLoader" form "[email protected]".
In this package in the file "node_module/postcss-modules/build/index.js" in rows 54-57 exists this code:

function getLoader(opts, plugins) {
const root = typeof opts.root === "undefined" ? "/" : opts.root;
return typeof opts.Loader === "function" ? new opts.Loader(root, plugins) : new _fileSystemLoader2.default(root, plugins);
}

In this code if "typeof opts.root === "undefined"" then "root" equalt to "/".
After that "/" goes to "new _fileSystemLoader2.default(root, plugins);".

_fileSystemLoader2 is imported "FileSystemLoader" form "[email protected]".

I propose to replace in file "node_modules/css-modules-loader-core/lib/file-system-loader.js" this row number 64:

fileRelativePath = _path2['default'].resolve(_path2['default'].join(_this.root, relativeDir), newPath);

to this code:

var fileRelativePath;
if (_this.root === '/') {
fileRelativePath = _path2['default'].resolve(relativeDir, newPath);
} else {
fileRelativePath = _path2['default'].resolve(_path2['default'].join(_this.root, relativeDir), newPath);
}

Perhaps this will fix the bug.

File gets included twice when composes a file directly and indirectly

The scenario is this:

file a composes a selector from file c and b (in that order)
file b composes a selector from file c

the output includes the source from file c twice (and in an order where the second inclusion will override the selector from b).

I have a failing test case here: https://github.com/madpilot/css-modules-loader-core/tree/master/test/test-cases/mixed-dependencies

Update to PostCSS 6

@geelen @markdalgleish Could you do that?

processor options

Recently, I tried to use postcss-url and found out, that it is necessary to set up the to option to the processor. Looks like it is required to copy files. Unfortunately, we don't provide any possibility for that.

Haven't you experienced something familiar?

css-modules / css-modules-loader-core Goto Github PK

css-modules-loader-core's Introduction

CSS Module Loader Core

API

core.load( sourceString , sourcePath , pathFetcher ) => Promise({ injectableSource, exportTokens })

new Core([plugins])

css-modules-loader-core's People

Contributors

Stargazers

Watchers

Forkers

css-modules-loader-core's Issues

Recommend Projects

Recommend Topics

Recommend Org

core.load( sourceString , sourcePath , pathFetcher ) =>
Promise({ injectableSource, exportTokens })